persistWithLocalStorage is hydrating with the wrong cacheTime

[melanieseltzer]

Describe the bug
It appears that after hydrating from local storage, the cacheTime gets reset back to the default of 5 minutes.

I use 1000 * 60 * 60 * 24 which is 86400000 ms (24 hours). You can see in my GIF that this is correctly set at first, but as soon as I refresh the page and it hydrates from local storage, the cacheTime is set back to the default of 300000 ms (5 minutes).

It will then garbage collect the queries after 5 minutes if you navigate away from the app, which removes them from local storage, rendering local storage pretty useless...

To Reproduce
https://codesandbox.io/s/react-query-persist-bug-4k32q

1. Click on some buttons to save some queries
2. Observe in devtools that the cacheTime is correct (86400000)
3. Refresh the page
4. Observe that the cacheTime is now 300000
5. Navigate away from the codesandbox for 5 minutes and come back to it
6. Observe that there are no longer any queries saved in local storage

Expected behavior
Uses the correct cacheTime so queries are not forced out of local storage early.

Screenshots

Desktop (please complete the following information):

• OS: macOS
• Browser: Chrome
• Version: 3.5.6

Additional context
Add any other context about the problem here.

[melanieseltzer]

After poking around a little, it seems to function correctly if cacheTime is set as a default when creating the client, rather than as an option for useQuery 🤔 Like this:

// _app.ts
import React from "react";
import { QueryClient, QueryClientProvider } from "react-query";
import { Hydrate } from "react-query/hydration";
import { ReactQueryDevtools } from "react-query/devtools";
import { persistWithLocalStorage } from "react-query/persist-localstorage-experimental";

const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      cacheTime: 1000 * 60 * 60 * 24 // 24hrs
    }
  }
});
persistWithLocalStorage(queryClient);

export default function MyApp({ Component, pageProps }) {
  return (
    <QueryClientProvider client={queryClient}>
      <Hydrate state={pageProps.dehydratedState}>
        <Component {...pageProps} />
      </Hydrate>
      <ReactQueryDevtools />
    </QueryClientProvider>
  );
}

But as far as I understood, you don't have to set blanket options like this, and can set them per query, is that right?

[TkDodo]

But as far as I understood, you don't have to set blanket options like this, and can set them per query, is that right?

Yes, that's right, it should work.

looking at what is actually stored in the localstorage, it seems that properties like staleTime and cacheTime are not part of the internal state, and that's why they are just not stored:

it seems to just work with default options because they will be set even for dehydrated queries if they have not specific cacheTime set.

[melanieseltzer]

Ah, that makes sense! Funny thing is, it looks like there was some code from this PR that already got merged and would fix it (adding cacheTime into dehydrateQuery and hydrate functions):

https://github.com/tannerlinsley/react-query/blob/df530d6b87827b8609d568dd040e921de8e22a5a/src/hydration/hydration.ts#L71

https://github.com/tannerlinsley/react-query/blob/df530d6b87827b8609d568dd040e921de8e22a5a/src/hydration/hydration.ts#L170

However, what's strange is it no longer appears on master (https://github.com/tannerlinsley/react-query/blob/master/src/hydration/hydration.ts) and I don't have it in my node_modules after installing 3.5.11.

Was it never released with V3? I did some basic testing by manually adding the code into my node_modules hydration.js file (just without serializePositiveNumber and deserializePositiveNumber) and it definitely fixes the problem.

[edit] Somehow completely missed that this commit removes it eb301fc#diff-e96de446ebe6331f178837e79073d10448ca24c309f0fc9478c3ccaa89129817 🤦‍♀️ Ignore this comment

[boschni]

There were some problems with hydrating the cache time because sometimes servers and clients have different GC requirements. You can define a client cache time when constructing a QueryClient like @melanieseltzer suggested.

But maybe there is also some misconception about the cache time. The cache time is more of a memory management option because the GC timer starts counting from the moment a query is not being used anymore. You can specify a cache time of 24 hours, but as long as a query is being rendered on screen, this will not have any effect. Which means that the specified cache time does not really mean anything from a freshness perspective. If the query was hydrated after a year, the GC would start counting to 24 hours from that moment on, and only if the data was not rendered on screen. The stale time can be used to specify if data is considered fresh or not. I guess gcTime would be a better name.

[TkDodo]

I guess gcTime would be a better name.

@boschni I made the exact same proposal a while back: #1217

[melanieseltzer]

This is all very insightful!

So it seems to me that it should be listed in the docs for persist here https://react-query.tanstack.com/plugins/persist-localstorage that you need to define a cacheTime for QueryClient manually to override the default. Otherwise, persist straight up won't work right (as described in my original issue description).

I can contribute a PR to add to the docs, if ya'll agree with the above :)

[tannerlinsley]

Yeah, let's get a PR going and we can keep discussing there 👍

[tannerlinsley]

🎉 This issue has been resolved in version 3.5.14 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀