I'm using react-query version 4.0.0-beta.12 and I'm caching data up front while application is loading by using queryClient.fetchQuery.
The problem is when I refresh the page, the cached data will be disappeared from localStorage.
// query client instance with default option
const queryClient = new QueryClient();
// fetch data upfront while application is loading
await queryClient.fetchQuery(key, () => Promise.resolve(data), {
staleTime: 3_600_000,
cacheTime: 43_200_000,
meta: {
offline: true
}
});
<PersistQueryClientProvider
client={queryClient}
persistOptions={{
persister: createWebStoragePersister({ storage: window.localStorage }),
dehydrateOptions: {
shouldDehydrateQuery: (query) => !!query.meta?.offline
},
maxAge: Infinity
}}
>
<App />
</PersistQueryClientProvider>
query.meta.offline after first refresh of page becomes undefined.
please be noted that I'm not attending to pass the meta as a defaultOption to qurtyClient instance. I have other queries using the same instance which I don't want to cache their data.