shouldDehydrateQuery and useInfinityQuery

[raulriera]

Hey all, running into an issue with trying to persist queries using useInfinityQuery, if I understand the code of

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

Lines 97 to 109 in 1c8d978

	if (options.dehydrateQueries !== false) {
	const shouldDehydrateQuery =
	options.shouldDehydrateQuery || defaultShouldDehydrateQuery
	client
	.getQueryCache()
	.getAll()
	.forEach((query) => {
	if (shouldDehydrateQuery(query)) {
	queries.push(dehydrateQuery(query))
	}
	})
	}

correctly, if the shouldDehydrateQuery function returns false the query is skipped for persistence but the state is in fact stored.

This is all working fine with normal useQuery but when using useInfinityQuery given that the the query can return false if failed (look at if (query.state.status !== "success") return false;) when resetting the state it will delete any previous state already cached for that infinity query.

  const dehydrateOptions: DehydrateOptions = {
    shouldDehydrateQuery,
  };

export const shouldDehydrateQuery = (query: Query): boolean => {
  if (query.queryKey.length === 0) return false;
  if (query.state.status !== "success") return false;

  // eslint-disable-next-line prettier/prettier
  const keysToDehydrate = [
    "some-key-here",
    "some-key-here-used-in-infinityQuery"
  ];

  const stringKey = String(query.queryKey[0]);
  return keysToDehydrate.includes(stringKey);
};

Curious if anyone has found a solution for this? at the moment I can just "whitelist" all useInfinityQuery for persistence, but just making sure I am not doing anything wrong.

Thank you all

[TkDodo]

if the shouldDehydrateQuery function returns false the query is skipped for persistence but the state is in fact stored.

if shouldDehydrateQuery returns false, the query is not persisted to the external storage. Not sure what you mean with "state is in fact stored". Stored where? The data remains in the queryCache in memory if that's what you mean, yes. The persisters never delete anything from the queryCache.

This is all working fine with normal useQuery but when using useInfinityQuery given that the the query can return false if failed (look at if (query.state.status !== "success") return false;) when resetting the state it will delete any previous state already cached for that infinity query.

not sure I understand what you are referring to here, sorry. infinite queries and "normal" queries are no different. it's just that their query.state.data has a different shape. Apart from that, they are identical.

[raulriera]

So if you fetch 3 pages successfully, and then make a re-fetch where 2 succeed and 1 errors, none of the refetches would end up in the query cache. The query would be in error state with an error and stale data.
In this case, because the query is in error state, it will not be persisted per default.

I see, that makes perfect sense. Thank you, one unexpected behaviour of that is that failure state it will remove any previous persisted cached data even tho the configurations makes them "fresh"

    cacheTime: Infinity,
    staleTime: Infinity,
    retry: RETRY,
    retryDelay: RETRY_DELAY,

Just making sure its a feature and not a bug when using useInfiniteQuery

[TkDodo]

if your data is fresh, how did a refetch happen? Can only be due to manual invalidation, right? That makes your data non-fresh.

Anyways: The reason why we only persist successful queries is because Error cannot be serialized via json. Now a query can have stale data and also errors, but if we'd persisted that, the Error would be gone, and after a restore, you would still be in error state but have no error, and might face a runtime exception if you'd want to show the error.

If you don't care about that, you can change the shouldDehydrateQuery implementation to store everything that has data:

shouldDehydrateQuery: (query) => !!query.state.data

This will include erroneous queries with stale data.

What you can also do is make errors serializable and use a custom serializer instead of JSON.stringify. superjson is a nice alternative - we also use it in the devtools.

The serialize / deserialize functions can be passed to createAsyncStoragePersister:

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

Lines 48 to 49 in 7741a2f

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

[raulriera]

if your data is fresh, how did a refetch happen?

Not a refetch of the old data, but new... In an infinite list example

• Loaded the first 5 items, scrolled to bottom
• Loaded the next 5 times, scrolled to bottom
• Failed to load the next 5 items. Nothing is persisted and the previous persisted data of this query key is removed from the cache

[TkDodo]

oh now I get it. Yeah I see, hmm, but there isn't really anything we can do here out of the box because the query is in error state. Going the route I suggested in the previous post is something you can do in user-land:

• different serializer
• custom dehydration function

[raulriera]

Thanks for all the clarifications 😄 this was very helpful. Will try those both options!