React query persister uses a single key to store everything

[galangel]

In my application, I use React query and IndexDB persister. When creating the PersistQueryClientProvider with persistOptions the persister provided already has a key for react query to use for caching,

However, after extensive use and caching big data sets, I have experienced a big impact on loading and overall performance when a react query loads the initial data from the cache.

I am aware that I can use multiple PersistQueryClientProvider, but I access the cache from several areas in the application, which creates another layer of maintenance that I want to avoid.

Is there a way to use the query key as the indexDB key, so every use will have its own key, not one for the whole client?

For example:

SomeComponent = () => {
  const {...} = useQuery(['key1'],fn);
  const {...} = useQuery(['key2'],fn);

  return <>{...}</>
}

will result in two distinct entries in indexDB

[TkDodo]

Have a look at the experimental createPersister: https://tanstack.com/query/latest/docs/framework/react/plugins/createPersister#experimentalcreatepersister