Hi,
We’re using Apollo in react to use both queries and subscription with a Hasura backend server- as per the instructions here - see the code below. This seems to work fine, but we see that the cache is not shared between the query results and the subscription results.
Is there any way possible to share the cache between queries and subscriptions? I could not find any information about this.
thx,
Robert
export const ApolloClientProvider = ({ children }: ApolloClientProviderProps): JSX.Element => {
const { getAccessTokenSilently } = useAuth0();
const apolloClient = useRef<ApolloClient<NormalizedCacheObject>>();
const timeoutLink = new ApolloLinkTimeout(graphqlApiConfig.defaultTimeout);
const httpLink = new HttpLink({ uri: `${graphqlApiConfig.host}${graphqlApiConfig.graphqlEndpoint}` });
const timeoutHttpLink = timeoutLink.concat(httpLink);
const fetchToken = async (): Promise<string | void> => {
try {
return await getAccessTokenSilently();
} catch (error: unknown) {
console.error('Failed to fetch token', error);
}
};
const authHttpLink = setContext(async (_, { headers, ...rest }) => {
const token = await fetchToken();
if (!token) return { headers, ...rest };
return { ...rest, headers: { ...headers, authorization: `Bearer ${token}` } };
});
const fullHttpLink = authHttpLink.concat(timeoutHttpLink);
const client = createClient({
url: `${graphqlApiConfig.wsHost}${graphqlApiConfig.graphqlEndpoint}`
});
const wsLink = new GraphQLWsLink(client);
const splitLink = split(
({ query }) => {
const definition = getMainDefinition(query);
return definition.kind === 'OperationDefinition' && definition.operation === 'subscription';
},
wsLink,
fullHttpLink
);
if (!apolloClient.current) {
apolloClient.current = new ApolloClient({
link: splitLink,
cache: new InMemoryCache({})
});
}
return <ApolloProvider client={apolloClient.current}>{children}</ApolloProvider>;
};