bigbluebutton-Github/bigbluebutton-html5/imports/ui/components/graphql-provider/component.tsx
2023-04-05 16:18:04 -03:00

42 lines
1.3 KiB
TypeScript

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;