Cache in ssr component and client component

[AntonStorozhenko]

Hi, we recently started implementing your package in our Next.js application.
There are a few issues we are facing:
In the server components, we send a query like this

const data = await client.query({
    query: MY_PROJECTS,
  });

Is it possible to clear the cache specifically for this query?
And how to clear the whole cache?
2. If we use the Apollo Wapper, which was created on the basis of this code

function makeClient() {
  const httpLink = new HttpLink({
    uri: "https://example.com/api/graphql",

  return new NextSSRApolloClient({
    cache: new NextSSRInMemoryCache(),
    link:
      typeof window === "undefined"
        ? ApolloLink.from([
            new SSRMultipartLink({
              stripDefer: true,
            }),
            httpLink,
          ])
        : httpLink,
  });
}
export function ApolloWrapper({ children }: React.PropsWithChildren) {
  return (
    <ApolloNextAppProvider makeClient={makeClient}>
      {children}
    </ApolloNextAppProvider>
  );

Then we have a problem with caching requests. When we reload the page, the cache is completely cleared and NextSSRInMemoryСache() works like in InMemoryCache()
We tried to use the experimental hooks useQuery, useSuspenseQuery. but the problem is that using them, we also fail to fully cache queries.
How can we fix this problem?
Thanks in advance. I would appreciate your help

[phryneas]

Is it possible to clear the cache specifically for this query?
And how to clear the whole cache?

Every time a user makes a request to your server, if you use getClient from registerApolloClient, you get a new Apollo Client unique to this one request. That Client should start with an empty cache.

From that perspective, it should not be necessary to clear the cache again, on top of that.

Was this a misunderstanding on your side or am I missing a specific requirement you have here?

Then we have a problem with caching requests. When we reload the page, the cache is completely cleared and NextSSRInMemoryСache() works like in InMemoryCache()
We tried to use the experimental hooks useQuery, useSuspenseQuery. but the problem is that using them, we also fail to fully cache queries.

That is to be expected. NextSSRInMemoryСache is a version of InMemoryCache. It will start with an empty cache every time the page is reloaded.
You need theNextSSRInMemoryСache here because the first page you visit after a page reload will be rendered on the server - even though it is a client component, it goes through SSR. And the job of NextSSRInMemoryСache (if used with useBackgroundQuery/useReadQuery) is to transport the results of that SSR render over to the browser, so that the browser doesn't repeat these requests that already just happened on the server.

But it doesn't have any "persisting" functionality that would survive a page reload beyond that - just like InMemoryCache hasn't.

[AntonStorozhenko]

We don't quite understand how to use this client in server components.
When creating a new client, if we made a request, in our implementation, query is still cached, but in your answer, it seems that it should not be so.
We don't quite understand the flow of working with the package and SSR.
Is the package should not or cannot cache requests globally for all clients?
If it does, do you have any examples of how it can be implemented?

Our final goal is that we want to store the Query responses on the server, and return them to the front end, so we don't have to make extra queries. And on certain events, clear the cache of certain Query, so that the next query gets the most recent response. Is this possible with this package?

[phryneas]

In React Server Components, this package will always give you a new instance of Apollo Client with an empty cache.

If in that environment, you want to cache data over requests, you can do so at network level using the Next.js network cache - Apollo Client will just use that in the background if you configure Next.js accordingly.

The same cache will be used in SSR, and then this package will help transport the result over to the browser so that the browser does not need to make a request.