fetchQuery staleTime returns cacheData in case of indexDB persister

[bilalbhojani24]

I’m using React Query with @tanstack/query-persist-client-core to persist cache data in IndexedDB. My setup creates a persister with a custom buster and IndexedDB storage, and it’s configured on the QueryClient. This works correctly—cached queries are restored when the app starts, and queries refetch if they’re stale according to staleTime.

The issue comes up on app mount when I run:

const data = await queryClient.fetchQuery({
  queryKey: ['some-key'],
  queryFn: makesAPICall,
});

Since the data already exists in IndexedDB, fetchQuery immediately returns the cached value. But what I want is to always trigger a fresh API call on the first load, without considering the persisted cache.

My idea is:- While hydrating first time make query stale always. Is this possible and recommended ?

CODE

import { experimental_createPersister } from '@tanstack/query-persist-client-core';

export function createQueryClient(
  config?: QueryClientConfig,
) {
  const { busterString, hasMissingKey } = getBuster();

  const persister = getIndexDB.supports(getIndexDB.INDEXEDDB)
      ? (experimental_createPersister({
          ...defaultPersisterOptions,
          buster: busterString,
          filters: {
            predicate: query => Boolean(query.meta?.persist) && !hasMissingKey,
          },
        }) as unknown as QueryOptions['persister'])
      : undefined;

  const client = new QueryClient({
    ...config,
    queryCache:
      config?.queryCache ??
      new QueryCache({
        ...Object.fromEntries(
          handlerKeys.map(key => [key, createHandler(key)])
        ),
      }),
    defaultOptions: {
      ...config?.defaultOptions,
      queries: {
        retry: defaultQueryRetryFn,
        persister,
        ...config?.defaultOptions?.queries,
      },
    },
  });
  return client;
}

[TkDodo]

you can pass staleTime:0 to fetchQuery to force it to make a fetch.

[bilalbhojani24]

is this the same as this issue?

• refetchOnMount and queryClient.invalidateQueries() do not work as expected when using experimental_createQueryPersister #9667

Yes, even I tried invalidate and fetch faced same issue

[DamianOsipiuk]

To solve both of the problems we would need additional prop for the persister.

refetchAfterRestore: "whenStale" | "always"

Pretty small change

[TkDodo]

refetchAfterRestore: "whenStale" | "always"

let’s do refetchOnRestore: boolean | 'always' to be aligned with other refetchOn... props that we already have, where true means that staleTime will be respected (should also be the default).

[bilalbhojani24]

refetchAfterRestore: "whenStale" | "always"

Do you want me to create the PR for same ?

[TkDodo]

that would be great 🙌