Retaining the persisted data after failed retries

[mitioshi]

I need some help with react query and the async storage provider. When a page is initially loaded, the state is correctly read from the persisted cache. If the maximum number of retries has passed due to server errors (on the screenshot), then the whole saved state in PersistedClient.clientState.queries is reset. How can I make it so that here the state does not change after all retries? btw, in the GUI the state remains correct, nothing is reset. The problem is only with persister

[TkDodo]

then the whole saved state in PersistedClient.clientState.queries is reset.

not sure what you mean by that. Have you implemented a custom retry logic? Please show a minimal, runnable reproduction.

[mitioshi]

I haven't implemented a custom retry logic.
Here's the example https://codesandbox.io/p/devbox/laughing-neumann-nl23s9.
To reproduce the issue:

1. first let the page load the data. The query will be stored under the REACT_QUERY_OFFLINE_CACHE key in localStorage.
2. Then, uncomment line 22 and save the file. This will reload the page.
3. Wait for ~5 secs and look at the REACT_QUERY_OFFLINE_CACHE key in localStorage. It will NOT contain the query result fetched in step 1

At step 3 I want to keep the old query in local storage. How do I achieve that?

[TkDodo]

queries that are in error state will not be persisted per default, because errors are not serializable. If you get a background refetch error, your query will be in the following state:

status: 'error'
error: YourErrorHere
data: YourStaleDataHere

if we were to persist that, error would probably become null because it can't be serialized to JSON. Then, if you restore again, you state would be:

status: 'error'
error: null
data: YourStaleDataHere

However, status:error is defined as "A Query with an error", so you should be able to access error.message - but this will error at runtime in this scenario.

So, long story short, per default, you can't. You can overwrite our default persistence behaviour to also persist queries that are in error state:

<PersistQueryClientProvider
  client={queryClient}
  persistOptions={{
    persister,
    dehydrateOptions: {
      shouldDehydrateQuery: (query) =>
        // custom logic here, default is defaultShouldDehydrateQuery(query)
    },
  }}
>

The default function is implemented as:

query/packages/query-core/src/hydration.ts

Lines 72 to 74 in 497804e

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

If you do that, you can either ignore the problem I've describe above if you don't care about that, or, you can make sure that errors can be persisted as well by using something like superjson to serialize errors to json.

peristers themselves can define a serialize and deserialize option that just defaults to JSON.stringify and JSON.parse:

query/packages/query-sync-storage-persister/src/index.ts

Lines 42 to 43 in 13b17ee

	serialize = JSON.stringify,
	deserialize = JSON.parse,