How to force React Query Persistent Cache to fetch from Server if Online?

I am refering to this doc https://tanstack.com/query/v4/docs/react/examples/react/offline

Able to cache properly when browser is offline, but when back online, it keeps getting data from cache. What needs to be tweaked in the sample code such that when browser is online, it fetches from server and updates the cache?

localStorage.removeItem('REACT_QUERY_OFFLINE_CACHE') does not even work. I mean, you will notice it gets purged, but the cached content fills it up on browser reload. In network tab it says (disk cache).

import { QueryClient } from '@tanstack/react-query'; import { PersistQueryClientProvider } from '@tanstack/react-query-persist-client'; import { createSyncStoragePersister } from '@tanstack/query-sync-storage-persister'; const persister = createSyncStoragePersister({ storage: window.localStorage, }); const queryClient = new QueryClient({ defaultOptions: { queries: { cacheTime: 1000 * 60 * 60 * 24, // 24 hours staleTime: 2000, retry: 0, // networkMode: 'always', // refetchOnReconnect: true, }, }, }); queryClient.invalidateQueries(); queryClient.clear(); localStorage.removeItem('REACT_QUERY_OFFLINE_CACHE'); return ( <PersistQueryClientProvider client={queryClient} persistOptions={{ persister }} onSuccess={() => { // resume mutations after initial restore from localStorage was successful queryClient.resumePausedMutations().then(() => { queryClient.invalidateQueries(); }); }} > <App /> </PersistQueryClientProvider>); 

Update: I noticed that the localStorage gets purged, but gets refilled with the cache data. How's that? When it's the source of the persistent cache data?

Update 12/17/23: Someone in my team changed the headers of the API that I am using without any release notes. The header instructs the browser to cache. >:( So, nothing is wrong with react query persistent cache.

1 Answer

When the PersistQueryClientProvider loads data from the external storage, it writes that data to the in-memory cache. Then, it sets up a subscription and syncs data from the QueryCache back into localStorage.

So, if you delete it, it likely just comes right back.

I don't fully understand what you are trying to achieve, but here is how it works:

data is loaded from the storage into the in-memory cache. Then, the cache has data. Doesn't really matter how it got there. Could be because you fetched it, or because you put it there manually with queryClient.setQueryData, or because you restored it from localStorage. It's all treated the same.

Each data has a dataUpdatedAt timestamp (that is also persisted), so we know when the data was fetched. React Query will always give you cached data, even if it's stale. But if it's stale (defined by staleTime), it will give you that data + it makes a request to fetch newer data.

With the setting staleTime: 2000 as in the example, I would expect to see a network request every time you reload the browser - unless it happens within 2 seconds. Because then, the data that gets restored from localStorage is treated as fresh and you will only see that.

ncG1vNJzZmirpJawrLvVnqmfpJ%2Bse6S7zGiorp2jqbawutJobm9oZ2p9dYKOoaawZaSkeqe70ZycZqqVlrC1edCunKuxXaWys7%2FIrKuepqRisKKvx55kraddm7K1r8dmnaunnWLApr7VnqlmoZZivK%2B4yKec