Cache cleared when error occurs

[debater-coder]

Hi, I'm making an offline PWA that uses persistQueryClient to cache queries in localStorage. My issue is, that when an error occurs, the cache for that query is cleared. I would like to find a way to disable this behavior so that the user can keep working with the existing data, even if they are disrupted by a potentially temporary error.

[TkDodo]

My issue is, that when an error occurs, the cache for that query is cleared.

you mean when the query errors? error are not json serializable so you cannot write them to localstorage. You can use something like superjson to serialize / deserialize.

[debater-coder]

My desired behavior is that the existing data stays in the cache, instead of being evicted. I don't want to write the error to cache. Is there any way to make this happen?

[TkDodo]

I don't understand why data should be evicted from the in-memory cache. If a query errors, it:

• goes into error state
• but should still show stale data if you have data from a previous fetch

however, queries in error state are not persisted to localstorage. So if you reload the page then, that data is gone.

If you experience different behaviour, please show it in a codesandbox reproduction.

[debater-coder]

Is there any way to keep the data after the page is reloaded?

[debater-coder]

From the TanStack Query docs:

Removal
If data is found to be any of the following:

• expired (see maxAge)
• busted (see buster)
• error (ex: throws ...)
• empty (ex: undefined)
  the persister removeClient() is called and the cache is immediately discarded.

How can I change the error behaviour? Is there any way to do so? What is the reasoning behind this behaviour?

[TkDodo]

these docs are about what happens when storing to localstorage errors - not when a query errors.

You can also dehydrate queries that are in error state, however, keep in mind that the error itself can likely not be serialized if it's of type Error unless you do custom serialization.

shouldDehydrateQuery defaults to:

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

you can change that by passing a custom function:

<PersistQueryClientProvider
  client={queryClient}
  persistOptions={{
    persister,
    dehydrateOptions: { shouldDehydrateQuery: () => true },
  }}
>