persist to local storage not working

[blomm]

Hi there,
I would like one of my queries (variableDetails) to be saved to localstorage (I want all other queries to always fetch from backend), this is my setup:

const cacheTime = 24 * 3600000; // milliseconds in day

const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      refetchOnWindowFocus: false,
      //staleTime: Infinity,
      cacheTime,
    },
  },
});

const persistQuery = "variableDetails";

persistQueryClient({
  queryClient,
  persister,
  maxAge: cacheTime,
  hydrateOptions: {},
  dehydrateOptions: {
    // queryKey is an array as of tanStack v4
    shouldDehydrateQuery: ({ queryKey }) => {
      return queryKey.includes(persistQuery);
    },
  },
});

and when I look in localstorage there is evidence of this working, however I don't see any of the variableDetails data in here, and when I refresh the page the data is always refetched successfully, certainly not being read from localstorage.

what am I doing wrong here?

    "mutations": [],
    "queries": [
        {
            "state": {
                "dataUpdateCount": 0,
                "dataUpdatedAt": 0,
                "error": null,
                "errorUpdateCount": 0,
                "errorUpdatedAt": 0,
                "fetchFailureCount": 0,
                "fetchFailureReason": null,
                "fetchMeta": null,
                "isInvalidated": false,
                "status": "loading",
                "fetchStatus": "fetching"
            },
            "queryKey": [
                "variableDetails"
            ],
            "queryHash": "[\"variableDetails\"]"
        }
    ]
}

[blomm]

@TkDodo does the queries state give any clue as to what might have happened?
seems to be stuck in "loading/fetching", but the data definitely gets returned.

[TkDodo]

you are persisting the query as you are overwriting the default shouldDehydrateQuery, which checks for query.state.status:

query/packages/query-core/src/hydration.ts

Lines 72 to 74 in 357ec04

	function defaultShouldDehydrateQuery(query: Query) {
	return query.state.status === 'success'
	}

It would be wise to also include this check when overwriting it.

Also, please use the PersistQueryClientProvider as described here:

• https://tanstack.com/query/v4/docs/plugins/persistQueryClient#usage-with-react

[blomm]

Thanks @TkDodo
I stripped my code back to NOT override the shouldDehydrateQuery (i.e. cache everything) and I also switched to using the PersistQueryClientProvider.

So I have the basic setup, just like in the docs example.

Unfortunately, when I load my app, nothing goes into the cache.
However, if I make a change in my code and save (triggering a "hot" reload of the web page), all of a sudden I've got some (not all) cached queries.
What could be going on here? Is the caching functionality somehow not set up on initial loading?

[TkDodo]

you'd need to show a codesandbox reproduction please