Disable persisting of cached data to local storage for a particular query

[franferns]

While using useInfiniteQuery and persisting of the react query state via <PersistQueryClientProvider /> is it possible to not cache a particular query ?

I use the useInfiniteQuery for implementing a paged implementation of searching though a very large list from a web api. And since results are Persisted the queried results get cached and persisted into the local storage. I do not need these to be persisted . I only want the results to be displayed in the list the user searches and on search eventually selects a value which I then save.

I have tried with a cacheTime of 0 to the useInfiniteQuery but it still remains in the local storage. One way of removing from the persisted cache is to use the queryClient.removeQueries(['datainfinte']) once the searchable list closes which removes from the persisted client.

Is there a way I can not make a certain query not be added to the cache or not persist results of a particular query at all ?

Thanks & Regards,
Francis P.

[TkDodo]

you can provide a custom function in the dehydrateOptions that will include or exclude a query:

<PersistQueryClientProvider
  persistOptions={{
    dehydrateOptions: {
      shouldDehydrateQuery: (query) => // return true or false for each query
    }
  }}
>
</PersistQueryClientProvider>

Please note that the default implementation is:

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

so you might want to keep that check. What works well is additionally match the query.queryKey or query.meta to check if something has been marked for exclusion.

[franferns]

That works ! @TkDodo Thanks for quick reply.

[franferns]

More on the default value for dehydrate would this be proper check for query key 'todos' ?

<PersistQueryClientProvider client={queryClient} persistOptions={{
      persister, dehydrateOptions: {
        shouldDehydrateQuery: (query) => {
          const queryIsReadyForPersistance = query.state.status === 'success';
          if (queryIsReadyForPersistance) {
            const { queryKey } = query;
            const excludeFromPersisting = queryKey.includes('todos');
            return !excludeFromPersisting;
          }
          return queryIsReadyForPersistance;
        }
      }
    }}>
      {useIsRestoring() ? null : <DepartmentListView />}
    </PersistQueryClientProvider>