Is there a way to use disable persistent storage for only one query?

[javierguzman]

Hello all,

I am making a react native app where I have enabled the mechanism to save the data on persistent storage so when I init again the app, it loads faster using data from the cache while fetching new stuff. I have followed the docs on:
https://tanstack.com/query/v4/docs/react/plugins/persistQueryClient

However, there is a query I have for fetching avatars and I think it provokes the following warnings:

 WARN  [Error: Row too big to fit into CursorWindow requiredPos=0, totalRows=1]
 WARN  Encountered an error attempting to restore client cache from persisted location. As a precaution, the persisted cache will be discarded.

Is there a way to tell react-query not to save/load this data? I am open to other solutions, maybe I can extend the storage somehow? I really feel that storing images on the async storage should not be a big deal. I mean Whatsapp for example consumes a lot of data in order to save conversations, attachments, etc.

Thank you in advance and regards

[TkDodo]

• you can use retries, either the predefined strategy that we have or with your own strategy: https://tanstack.com/query/v4/docs/react/plugins/createSyncStoragePersister#retries
• you can pass dehydrateOptions to PersistQueryClientProvider to tell it to exclude a certain query: https://tanstack.com/query/v4/docs/react/plugins/persistQueryClient#persistqueryclient

[TkDodo]

You can use the meta field for that:

return useQuery<SearchResult>({
  queryKey: ['search', unref(term)],
  queryFn: () => $fetch(url),
  meta: {
    cache: false
  }
})

and then implement shouldDehydrateQuery accordingly:

shouldDehydrateQuery: (query) => {
  return query.meta.cache !== false
}

be advised that you should probably add the default check as well to only include successful queries:

import { defaultShouldDehydrateQuery } from '@tanstack/react-query'

shouldDehydrateQuery: (query) => {
  return defaultShouldDehydrateQuery(query) && query.meta.cache !== false
}

[CavalcanteLeo]

AMAZING, thanks

[kyusungpark]

@TkDodo, would it be possible to have query level maxAge and also keep a default maxAge for the persistor client?

[lili21]

@TkDodo can I set meta base on the response data?

[lili21]

I'm trying to do it with function.

useQuery({
  meta: { cacheFn: (data) => !data.xxx }
})

shouldDehydrateQuery = (query: Query) =>
  defaultShouldDehydrateQuery(query) &&
  (query.meta?.cache === true || query.meta?.cacheFn?.(query.state.data));

But it doesn't work. it will throw an error

DataCloneError: Failed to execute 'put' on 'IDBObjectStore': function cacheFn(data) {
        return !data.project.is_auto_eval;
      }