How to never use stale data?

[OoDeLally]

I have a feature that cannot tolerate stale data.

• It is acceptable to stay in isLoading until the request returns and provide fresh data.
• It may cache the receive data for other potential users of this data.

Is there an option for that?

I've cheched the doc and found nothing for that, although I dont think it is such a edge case usage 🤔

My current workaround is to override to {isLoading: true, data: undefined} when {isStale: true}.

[TkDodo]

check for isFetchedAfterMount

[OoDeLally]

Thank you.
From what I undestand, this would allow me about the same workaround I'm doing with isStale.
Ideally I would prefer a allowStaleData: false I can pass to the query options.

[OoDeLally]

isFetchedAfterMount is indeed a better choice for this workaround, as it is not dependant on the staleTime's value.

[OoDeLally]

Here is a dev-friendly middleware, inspired from @TkDodo answer

import { QueryObserverLoadingResult, UseQueryResult } from '@tanstack/react-query';

export interface NoCacheDataMiddlewareOptions {
  allowCachedData?: boolean;
}

export const noCachedDataMiddleware = <T>(queryResult: UseQueryResult<T>): UseQueryResult<T> => {
  if (queryResult.isSuccess && !queryResult.isFetchedAfterMount) {
    // We do not tolerate cached data here.
    // Therefore if the data comes from the cache of an earlier query, we dont use it, and instead return a loading state.
    return {
      ...queryResult,
      ...queryLoadingState, // override fields to return a loading state.
    } satisfies QueryObserverLoadingResult;
  }
  return queryResult;
};

const queryLoadingState = {
  data: undefined,
  error: null,
  isError: false,
  isPending: true,
  isLoading: true,
  isLoadingError: false,
  isRefetchError: false,
  isSuccess: false,
  status: 'pending',
} satisfies Partial<QueryObserverLoadingResult>;

Usage:

  const result = useQuery({
    queryKey: ['foobar']
    queryFn: () => fetchFoobar(),
  });
  const activeMiddlewares = [
    ...(options.allowCachedData === false ? [noCachedDataMiddleware] : []),
  ];
  return flow(activeMiddlewares)(result); // lodash's flow, but may be overkill if you just have one middleware.

[TkDodo]

just note that this won't work if you have staleTime set and get no background refetch happens I think

[tychenjiajun]

How to never use stale data in suspense?

[TkDodo]

isFetchedAfterMount

https://tanstack.com/query/v5/docs/framework/react/reference/useQuery

[tychenjiajun]

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>;
};

I tried. Suspense always render fallback

[TkDodo]

Suspense always render fallback

fallback as in “the suspense fallback”? That would be expected.

[tychenjiajun]

Suspense always render fallback

fallback as in “the suspense fallback”? That would be expected.

So how I can get fresh data every time a new query instance mounted? Using isFetchedAfterMount means I have to repeat my loading in the suspense component again?

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

 // works but Loading is duplicated
  return isFetchedAfterMount ? <div>User name: {user?.name}</div> : <Loading />;
}

function App() {
 // I am expecting the Loading is rendered when the User component is fetching fresh data, 
 // and User is rendered with the fresh data after the fetching. 
 // if the data become stale after that, do not trigger refetch
    return <Suspense fallback={<Loading />}><User /></Suspense>
}

An more realistic use case is, I have a following query

const getQuery = () => queryOption({
  queryKey: [someKey],
  queryFn: fn,
  staleTime(query) {
     if (query.state.data.theServerToldMeThisDataIsNeverStaleAndTheClientShouldAvoidRefetchingThisAsMuchAsPossible) return Infinity;
     return 0;
  },
// not possible now
//  gcTime: (query) {
//     if (query.state.data.theServerToldMeThisDataIsNeverStaleAndTheClientShouldAvoidRefetchingThisAsMuchAsPossible) return Infinity;
//     return 0;
  gcTime: Infinity, // have to be Infinity, otherwise it will be refetched on mount and make my server unhappy
},