bigbluebutton-Github/bigbluebutton-html5/imports/ui/components/graphql-provider/component.tsx

import {
  ApolloClient, ApolloProvider, InMemoryCache, NormalizedCacheObject,
} from '@apollo/client';
// import { WebSocketLink } from "@apollo/client/link/ws";
import { WebSocketLink } from '@apollo/client/link/ws';
import { SubscriptionClient } from 'subscriptions-transport-ws';
import React, { useEffect } from 'react';
import Auth from '/imports/ui/services/auth';

interface Props {
  children: React.ReactNode;
}

const GraphqlProvider = ({ children }: Props): React.ReactNode => {
  // const [link, setLink] = React.useState<WebSocketLink | null>(null);
  const [apolloClient, setApolloClient] = React.useState<ApolloClient<NormalizedCacheObject> | null>(null);
  useEffect(() => {
    const wsLink = new WebSocketLink(
      new SubscriptionClient(`wss://${window.location.hostname}/v1/graphql`, {
        reconnect: true,
        timeout: 30000,
        connectionParams: {
          headers: {
            'X-Session-Token': Auth.sessionToken,
          },
        },
      }),
    );
    // setLink(wsLink);
    const client = new ApolloClient({ link: wsLink, cache: new InMemoryCache() });
    setApolloClient(client);
  }, []);
  return (
    apolloClient
    && (
      <ApolloProvider
        client={apolloClient}
      >
        {children}
      </ApolloProvider>
    )
  );
};

export default GraphqlProvider;