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

[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;
      }

[rafcontreras]

@lili21, make sure the persistClient is serialisable:

const createIDBPersister = ({ key }: { key: string }) =>
  ({
    persistClient: async (client: PersistedClient) => {
      /**
       * Ensure the client is serializable before storing,
       * this is required because we are not storing all
       * of the queries on IndexedDB.
       */
      const serializedClient = JSON.parse(JSON.stringify(client));
      await set(key, serializedClient);
    },
    restoreClient: async () => {
      const client = await get<PersistedClient>(key);
      return client;
    },
    removeClient: async () => {
      await del(key);
    },
  }) as Persister;