Ability to persist only specific queries

[b-ponomarenko]

Hi there! I'm excited about TanStack Query persistQueryClient feature. It really helps building offline-first app. Reading the docs and looking at the examples I can't understand is there ability to store only specific queries inside persistent storage. Is it like "all or nothing" approach?

Using TanStack Query I expect to have optionally choose what kind of query I would like to store. For example:

const query = useQuery({
  queryKey: 'data',
  queryFn: () => fetch('api'),
 // possible option
 persist: true
})
const query2 = useQuery({
  queryKey: 'data2',
  queryFn: () => fetch('api'),
 // possible option
 persist: false
})

[TkDodo]

step 1: add the meta option to the queries that you want to persist:

const query = useQuery({
  queryKey: 'data',
  queryFn: () => fetch('api'),
  meta: {
    persist: true
  }
})

step 2: filter on the PersistQueryClientProvider what you want to persist:

<PersistQueryClientProvider
  client={queryClient}
  persistOptions={{
    persister,
    dehydrateOptions: {
      shouldDehydrateQuery: (query) => defaultShouldDehydrateQuery(query) && query.meta.persist === true,
    },
  }}
>

defaultShouldDehydrateQuery can be imported and makes sure that only successful queries are dehydrated.

you can also invert it and per default, persist everything and then opt-out when persist is set to false, that’s up to you.

[b-ponomarenko]

Awesome! Thanks for the response, will check soon