Selectively persist react-query keys

[acentfrio]

Good afternoon,

There might be a need to store only certain keys in local storage rather than persisting our entire state app there.

I wonder if there's anything like in react-query persistor. Or for now it only has capability to store all keys in local storage.

[TkDodo]

the persistors are build upon hydration, and it accepts dehydrateOptions, so:

persistQueryClient({ queryClient, persistor, dehydrateOptions })

dehydrateOptions accept a shouldDehydrateQuery: (query: Query) => boolean function, where you can decide which query should be persisted, and which should not.

per default, this is implemented as: query.state.status === 'success' to avoid persisting loading or erroneous queries.

[TkDodo]

you can specify exactly what should be persisted with shouldDehydrateQuery. You can match on query keys or whatever you want. meta is one way to do it, for example:

useQuery({
  queryKey,
  queryFn,
  meta: { persist: true }
})

then match on meta?.persist inside shouldDehydrateQuery.

[koengommers]

This seems to be exactly what I'm looking for, but I'm running into a problem unfortunately.

I'm attempting the approach with meta?.persist and checking inside shouldDehydrateQuery. This works for selectively dehydrating queries, but when they are restored they are removed right after. I think the problem is that meta?.persist does not exist after restoring, so on any update, all queries are removed from persisted storage because shouldDehydrateQuery does match any queries anymore. Could this be what's happening? If so, do you have any ideas for a solution?

[TkDodo]

can you show a reproduction? are you on the latest version?

[koengommers]

The cause seemed to be a slight difference in what is included in dehydration/persistence between v4 and v5. As this thread started in v4 time, I was hoping it would still work there. Apologies! We'll upgrade to v5.

[maddyahmad]

Is there any function, or way to get that persisted data from the storage? Because when i refresh the page, it still calls the api. Even though i could prevent that using staletime, but i was just looking for a simple function to use that persited data in another page. Any solution apart from using ijnvalidateQueries would work, because if i refresh the page, invalidateQueries gives me undefined.

[smlltt]

I am trying to achieve this in react native, but cannot get it to work. This is my basic setup:

import AsyncStorage from '@react-native-async-storage/async-storage';
import {QueryClient, QueryKey} from '@tanstack/react-query';
import {createAsyncStoragePersister} from '@tanstack/query-async-storage-persister';
import {
  persistQueryClient,
  PersistQueryClientProvider,
} from '@tanstack/react-query-persist-client';

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

const asyncStoragePersister = createAsyncStoragePersister({
  storage: AsyncStorage,
});

persistQueryClient({
  queryClient,
  persister: asyncStoragePersister,
  maxAge: Infinity,
  hydrateOptions: `{},`
  dehydrateOptions: {
    shouldDehydrateQuery: ({queryKey, state}) => {
      return true;
      // return false;
    },
  },
});

function App(): JSX.Element {
  return (
    <PersistQueryClientProvider
      client={queryClient}
      persistOptions={{persister: asyncStoragePersister}}>
      <View style={{flexDirection: 'row'}}>
        <Users />
        <Characters />
        <Locations />
      </View>
    </PersistQueryClientProvider>
  );
}

Obviously I should replace the content of shouldDehydrateQuery with some actual logic in order to conditionally persist only the keys that I actually want to persist. In the code above, I left "return true" and the commented out "return false" just to show how I went about trying to implement this. Both when I use "return true" and "return false" and then log the content of my AsyncStorage, the storage includes the whole cache (in my case that means the keys 'users', 'characters' and 'locations'), whereas I'd expect it to not include any of the query keys in at least one of the cases. I cleared the content of the storage in between trials.

[TkDodo]

if you use the PersistQueryClientProvider, you don't need to call persistQueryClient manually. Instead, pass the options to PersistQueryClientProvider as persistOptions.

[jwtong]

One caveat to mention here is if you have refetchInterval set on any of the blacklisted queryKeys, the refetch will trigger a cache update, causing the underlying cache stored in localStorage to perceive itself to be refreshed. The result is that the cache will never be busted if any refetchInterval < maxAge.

To solve this, I wrote a custom serializer that overwrites the cache timestamp to be the oldest dataUpdatedAt of any whitelisted queryKey.