# React query and subscription cache

**URL:** <https://community.apollographql.com/t/react-query-and-subscription-cache/8028>\
**Category:** Client SDKs\
**Tags:** client, web\
**Created:** [December 19, 2024, 9:22pm UTC](https://community.apollographql.com/t/react-query-and-subscription-cache/8028 "2024-12-19T21:22:15Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![Notalifeform](https://sea1.discourse-cdn.com/flex019/user_avatar/community.apollographql.com/notalifeform/32/5425_2.png) [@Notalifeform](https://community.apollographql.com/u/Notalifeform)\
**Post date:** [December 19, 2024, 9:22pm UTC](https://community.apollographql.com/t/react-query-and-subscription-cache/8028/1 "2024-12-19T21:22:15Z")

</div>

Hi,

We’re using Apollo in react to use both queries and subscription with a Hasura backend server- as per the instructions [here](https://www.apollographql.com/docs/react/data/subscriptions) - 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

```auto
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>;
};

```

---

<div class="post-metadata">

**Author:** ![jerelmiller](https://sea1.discourse-cdn.com/flex019/user_avatar/community.apollographql.com/jerelmiller/32/3314_2.png) [@jerelmiller](https://community.apollographql.com/u/jerelmiller)\
**Post date:** [December 19, 2024, 10:28pm UTC](https://community.apollographql.com/t/react-query-and-subscription-cache/8028/2 "2024-12-19T22:28:27Z")

</div>

Hey @Notalifeform 👋

Unless you’re creating multiple clients in your app, you should be using the same cache for all operations. Do you have the [Apollo Client Devtools](https://chromewebstore.google.com/detail/apollo-client-devtools/jdkknkkbebbapilgoeccciglkfbmbnfm) installed by chance? This makes it easier to inspect the cache. Could you see if you’re seeing anything written there? This should also help you detect if you’re creating a single instance or not.

---

<div class="post-metadata">

**Author:** ![Notalifeform](https://sea1.discourse-cdn.com/flex019/user_avatar/community.apollographql.com/notalifeform/32/5425_2.png) [@Notalifeform](https://community.apollographql.com/u/Notalifeform)\
**Post date:** [December 20, 2024, 9:33am UTC](https://community.apollographql.com/t/react-query-and-subscription-cache/8028/3 "2024-12-20T09:33:32Z")

</div>

Thx @jerelmiller for the quick response.

After inspection I do see that we have one client and that the cache is indeed shared. We’re also requesting aggregations form the server, which I expected to be read form the cache too - but those do not end up in the object cache, since they are not entities with an id - but they do end up in the query cache - correct?  
This means when we switch our application form fetching to subscriptions (a user option) the subscriptions have to be collected once before we can display them.  
While I do like the push based principle of subscriptions it introduces a bunch of challenges (both client and server-side), so I guess I’ll the follow advice in the [apollo docs](https://www.apollographql.com/docs/react/data/subscriptions#when-to-use-subscriptions) to use polling instead.

thx.

Robert

---

<div class="post-metadata">

**Author:** ![lenz](https://sea1.discourse-cdn.com/flex019/user_avatar/community.apollographql.com/lenz/32/4007_2.png) [@lenz](https://community.apollographql.com/u/lenz)\
**Post date:** [December 20, 2024, 10:07am UTC](https://community.apollographql.com/t/react-query-and-subscription-cache/8028/4 "2024-12-20T10:07:43Z")

</div>

Even if you name them equally, the cache cannot just assume that the query `users` has the same contents as the subcription `users` - they could be two completely different things with just the same name. So unless they share an `id` and `__typename`, the cache will need to treat them as completely separate entities and cannot merge them.

That said, you could manually configure cache redirects: [Advanced topics on caching in Apollo Client - Apollo GraphQL Docs](https://www.apollographql.com/docs/react/caching/advanced-topics#cache-redirects)