SSR and high memory consumption by react-query cache

[meskill]

I faced the issue with high memory consumption on nodejs app with SSR and [email protected].

Profiling the memory leads to the react-query cache internals. As I understand, a cache for the server works as explained in docs with isolation for every request.

The problem is that cache for every request stays in server memory for the cacheTime and it is not collected by GC for that time.

Explicit call to queryClient.clear() after sending the response fixes the problem, but it isn't mentioned in docs for ssr

Questions: Is this intentional how the cache works on server? Is call to queryClient.clear() on SSR is right thing to do?

[TkDodo]

are you creating the queryClient inside of getServerSideProps / getStaticProps?

export async function getStaticProps() {
   const queryClient = new QueryClient()
 
   await queryClient.prefetchQuery('posts', getPosts)
 
   return {
     props: {
       dehydratedState: dehydrate(queryClient),
     },
   }
 }

but yeah the running timers might actually stop it from being garbage collected by node. Have you tried setting a smaller cacheTime, like 10 seconds? 0 won't work because then it could be empty by the time you call dehydrate...

Profiling the memory leads to the react-query cache internals.

Can you share the profiling results maybe?

[meskill]

We have a custom implementation for SSR that creates queryClient for every request.

I cannot share actual profiling but react-query definitely prevents data from being collected by GC for the cacheTime. And it is critical for our app as it holds a big DI object with every request-related data.

I think lowering cacheTime might make things better, but currently, I've added queryClient.clear() call after request handled to force cache cleanup.

[TkDodo]

yes that should also work. In NextJs, if you add it in gerServerSideProps, it would also create a new client in every request I think. So maybe adding at least a caveat to the SSR docs would be good I think. Would you like to do that?

[meskill]

Please, take a look #3290

[phaethon5882]

@TkDodo @meskill
I have one question!
When exactly should you call queryClient.clear() ?
Can you show an example?

[meskill]

You can find example in the doc

[phaethon5882]

thx @meskill!
I'm using nextjs, so I'll have to find another way.
If I figure out how, I'll leave a comment.

[rafakwolf]

Same question as @phaethon5882 ...
does it solve?

export async function getServerSideProps() {
  const queryClient = new QueryClient();
  let dehydratedState = {};
  try {
   //  await my endpoint request
   dehydratedState = dehydrate(queryClient);
   queryClient.clear();
  } catch (err) {
    // error treatment
  }

  return {
    props: {
      dehydratedState,
    }
  };
}

Thanks !

[TkDodo]

yes. or, set cacheTime to Infinity.

[c01inQvQ]

@TkDodo Thanks for your quick anwser !

[gavinthomas-valtech]

e're currently using NextJS and React-Query v3 with the default 5mins cacheTime.
Does the code snippet shared by @rafakwolf solve the high memory consumption issue?

Are we saying v3 suffers from high memory consumption on the server if you don't clear the queryClient when using SSR? Was there a change in v4?

[gavinthomas-valtech]

Just spotted this

In v3, React Query would cache query results for a default of 5 minutes, then manually garbage collect that data. This default was applied to server-side React Query as well.

This lead to high memory consumption and hanging processes waiting for this manual garbage collection to complete. In v4, by default the server-side cacheTime is now set to Infinity effectively disabling manual garbage collection (the NodeJS process will clear everything once a request is complete).

This change only impacts users of server-side React Query, such as with Next.js. If you are setting a cacheTime manually this will not impact you (although you may want to mirror behavior).

How do i set Infinity cacheTime on the server but 5 minutes client side?

[TkDodo]

Are we saying v3 suffers from high memory consumption on the server if you don't clear the queryClient when using SSR? Was there a change in v4?

yes, in v4, cacheTime defaults to Infinity on the server. I mean, we do write migration docs for these cases: https://tanstack.com/query/v4/docs/react/guides/migrating-to-react-query-4#no-default-manual-garbage-collection-server-side

How do i set Infinity cacheTime on the server but 5 minutes client side?

you have a different QueryClient on the server and on the client, so you can give them different options.

[magicqiang]

I think this new v4 update for setting cacheTime to be Infinity or query.clear() only works if not passing in any custom cacheTime

The memory leak issue will still happen if useQuery is used inside components with custom cacheTime while being rendered in ssr.

I tried to have a root clean up method where we pass queryClient to QueryClientProvider

useEffect(() => {
return  () => {
  queryClient.clear()
 }
}, [])

but it still didn't solve the problem. I then manually change where we customize cacheTime to be

cacheTime: typeof window !== 'undefined' ? Infinity:  YOUR_OWN_CUSTOM_TIME

which seems working

@TkDodo do you think it makes sense that react-query enforce cacheTime to be Infinity by default on server side regardless of what custom cache time user pass in?

[TkDodo]

I tried to have a root clean up method where we pass queryClient to QueryClientProvider

Effects don't run on the server, so it's not surprising that this doesn't work.

@TkDodo do you think it makes sense that react-query enforce cacheTime to be Infinity by default on server side regardless of what custom cache time user pass in?

No, I don't think so, because it depends on how you use react-query on the server. If you use it for prefetching, where you create a new, isolated client per request, then cacheTime will start a timer for the queries in your cache (because they are unused), which means node can't garbage collect it. It's not per se a "memory leak", it's just still used and therefore not cleaned up. In those cases, you want cacheTime: 0.

However, you might want to use react-query on the server for server-side, in-memory caching, which is a different use-case. There, setting a cacheTime might make sense - you'd want your unused queries to be garbage collected at some point. You will also likely only create one client, so it won't be noticeable that the timers still run.

We've optimized towards the former usage, but we can't ignore the other use-case, so we can't enforce zero cacheTime at all costs.