Do not use stale cached data on mount of fresh observer

[c3chong-bluescape]

Hi, apologies if this has been asked before (searched but did not find). Is there a way to configure useQuery to use cache data on mount only if that data is not stale? Consider this scenario:

A modal is launched which makes use of a query. There's no initialData, so the screen shows a loading spinner (isLoading) until the data is fetched.
The modal is then closed. The query is now inactive.
Another process mutates related data, and invalidates that query. The cache data is now stale, but is not refetched because the query has no active observers.
The modal is opened again, moving the query state to stale. It displays the stale cached data momentarily until it has refetched at which point the new data is displayed.

Ideally in this scenario we'd show a loading spinner again, but only if the cache data is stale. If the cached data is not stale, we'd like to use it. For example if you open the modal, close it, then open it immediately again, it should be able to use the cache and not fetch anything. But if you close the modal, mutate, then open it again, it should refetch and never display the stale data.

Is this configuration possible? One approach would be to clear the cache via removeQueries as opposed to invalidating it, but that requires the mutation having knowledge of how the query is used, and determining whether to invalidate or remove may be dynamic/contextual based on the application state (which ideally the mutation wouldn't have to consider).

[TkDodo]

There are multiple ways to handle this:

Another process mutates related data, and invalidates that query. The cache data is now stale, but is not refetched because the query has no active observers.

you can refetch right away if you want, either by using refetchQueries, or by passing refetchType: 'all' to invalidateQueries.

The modal is opened again, moving the query state to stale. It displays the stale cached data momentarily until it has refetched at which point the new data is displayed.

If you don't want to fetch right away, you can check for isFetchedAfterMount (returned from useQuery). You can show a spinner until the fetch has completed. Just make sure to also check if you are really fetching, otherwise, you might show that spinner indefinitely.

[bpinto]

@TkDodo is there a suspense compatible solution?

I'm handling a similar scenario and this is the code I've got so far, but I still need to add some extra tests:

  if (queryOptions.suspense && enabled) {
    if ((!isFetchedAfterMount && isStale) || isLoading) {
      const observer = new QueryObserver(queryClient, { queryKey: queryOptions.queryKey })
      throw observer.fetchOptimistic(queryOptions)
    }
  }

P.S.: My code might be slightly more complex because an additional thing we are trying to add is the ability to turn swr off. We are trying to handle that with disabling the query after the request has finished.

[TkDodo]

is there a suspense compatible solution?

Do you want to suspend even though you have data already? That's not possible with a setting. throw queryClient.fetchQuery(options) should work

[bpinto]

Exactly, I want to suspend until a fresh data is available. I'll try with that method call, thank you!

[tychenjiajun]

fetchOptimistic

How? I got infinity loading using the following code

const getQuery = (queryParam?: number) =>
  queryOptions({
    queryKey: [queryParam],
    queryFn: async () => {
      const response = await fetch(
        `https://jsonplaceholder.typicode.com/users/${queryParam}?_delay=10000`
      );
      return response.json();
    },
    // refetchOnMount: shouldAlwaysRefetch ? "always" : true,
    staleTime(query) {
      if (Number(query.queryKey[0]) > 3) return Infinity;
      return 0;
    },
    gcTime: Infinity,
  });

const User = ({ queryParam }: { queryParam?: number }) => {
  const queryClient = useQueryClient();

  const {
    data: user,
    isFetchedAfterMount,
    isStale,
  } = useSuspenseQuery(getQuery(queryParam));

  console.log(user);

  if (isStale && !isFetchedAfterMount)
    throw queryClient.fetchQuery(getQuery(queryParam));

  console.log("render");

  return <div>User name: {user?.name}</div>;
};

if staleTime set to 1_000, I got an automatically refetch after 1 seconds