Why getQueryData and getQueryChache loses the data after sometime when hydrating the queries in a server component?

[eeslamadelll]

I'm using nextjs 13.5.2 and I'm experiencing the following scenaro:

1. I'm querying an endpoint in a server component using prefetchQuery.
2. dehydrate state using const dehydratedState = dehydrate(queryClient);
3. Sending the dehydrated state to the client using the <Hydrate state={dehydratedState}> component.
4. In the client I'm using the useQueryClient hook to get the queryClient instance.
5. accessing the cache or data using queryClient.getQueryData(["queryKey"]) or queryClient.getQueryCache(["queryKey"]).
6. I do have the data and can interact with it as long as I'm developing but once I leave the app for some time I start getting undefined.
7. To confirm something, everything works perfectly fine when using useQuery with some config to prevent sending another request because I know for sure the data will not change and I want to only rely on the data coming from the server component.

I'm not sure if this is a cache thing related to react-query or nextjs so I'm trying to understand what is going on here.

Thank you.

[TkDodo]

because I know for sure the data will not change and I want to only rely on the data coming from the server component.

I'd set staleTime: Infinity on the query and still call useQuery. Without an active observer that gets created by useQuery, data in the cache will be garbage collected after 15 minutes, because its seen as inactive. You can set gcTime (cacheTime in v4) to a higher value to avoid that.

[eeslamadelll]

Thank you for responding,

Yes adding:

{
	enabled: false,
	staleTime: Infinity,
	refetchOnWindowFocus: false,
}

was my approach here, I have another maybe silly question 😄.

When you say the cache will be garbage collected after 15 minutes, is this performed by the browser or react-query?

[eeslamadelll]

After reading your comment one more time, I believe react-query does this.

[TkDodo]

yes, it does.

[behnam-maqsudi]

const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      cacheTime: 10 * MINUTE, //remove this line
      gcTime: 10 * MINUTE, //add this line
    },
  },
})