QueryClient: stale-while-revalidate support?

[fedebertolini]

Hi team 👋
Does react-query's QueryClient support a stale-while-revalidate query? I see a lot of logic around this is implemented in the basic hook and in the query observer, but maybe I missed something?

Some context and motivation: I'm currently working on a big codebase that was recently moved from a standard express server with SSRing, to NextJS. For an easier migration, the getServerSideProps functions were implemented as a set of express-like middlewares that fetch and process data. To be able to cache and share data between different request scopes (only publicly accessible and mostly static data) we implemented this: #998 (global client, with a scoped client proxy that stores the ids of the queries executed by the request to be dehydrated later). In these middlewares we just use the Query Client APIs, mainly fetchQuery, prefetchQuery, and setQueryData.

The problem we have is that when we have stale cached data, fetchQuery would not return the stale data when the query function throws an error/rejection, it would just return the query's error. Is there a plan to change the behaviour of fetchQuery to fallback to stale cached data in case the query fn fails?
Probably this is outside the scope of this project, but it would be nice to have a primitive in the Query Client that would always return the cached data (even if stale) and execute the query function to refresh the data on the background or when there's no data in cache.

I guess I could implement this by using a mix of getQueryData to return the cached data, fetchQuery when there's no cached data and refetchQueries to refresh data on the background.

Any advice would be greatly appreciated 🙏

[TkDodo]

I think we're mixing two things here:

1. if you pass staleTime to fetchQuery, data will be returned if its not older than the passed staleTime. This is documented here:

If the query exists and the data is not invalidated or older than the given staleTime, then the data from the cache will be returned. Otherwise it will try to fetch the latest data.

2. react-query will not remove stale data even in case of error. What you should get is:

{
  status: 'error',
  data: theStaleData,
  error: yourError
}

if that is not the case, please provide a codesandbox reproduction.

[fedebertolini]

thanks @TkDodo ! I will take a look at that :)

[fedebertolini]

hi @TkDodo, i was just trying out calling client.refetchQueries inside a setInterval and found an issue with dehydration. If I don't pass a refetchPage fn inside the refetch filter options, then the dehydration fails with a serialization error because query.state.fetchMeta.refetchPage is undefined.
I checked the queryClient code and this is being done in https://github.com/tannerlinsley/react-query/blob/master/src/core/queryClient.ts#L290-L297:

      this.queryCache.findAll(filters).map(query =>
        query.fetch(undefined, {
          ...options,
          meta: { refetchPage: filters?.refetchPage },
        })
      )

I was not able to reproduce this consistently, maybe it only happens when the dehydration is executed while running the query. I will try passing refetchPage: null in the query options, but I guess this react-query shouldn't fail when passing undefined

[TkDodo]

I think we should probably not store refetchPage: undefined on the fetchMeta 🤔

[fedebertolini]

my workaround was passing refetchPage: () => false, to the refetchQueries options, but I agree the query should not enter a state in which dehydration fails.

[TkDodo]

refetchPage: () => false,

refetchPage: () => true would be the same as undefined.

I can take a look into the problem if you can provide a codesandbox reproduction :)