How to use two query clients (normal and persistent one)

[piszczu4]

I want to use two query clients: normal one for usual use cases, and persistent one to cache some queries for a long time. What is the correct implementation? Is below correct? How to use persistent query provider for certain queries? I guess by default useQuery uses the provider from the nearest content (not persistent one in my case).

'use client';

import { TooltipProvider } from '@/components/ui/tooltip';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import { ThemeProvider } from 'next-themes';

import { createSyncStoragePersister } from '@tanstack/query-sync-storage-persister';
import { PersistQueryClientProvider } from '@tanstack/react-query-persist-client';

export const persistQueryClient = new QueryClient({
  defaultOptions: {
    queries: {
      retry: false,
      refetchOnWindowFocus: false,
      cacheTime: 1000 * 60 * 60 * 24, // 24 hours,
      staleTime: 1000 * 60 * 60 * 1, // 1 hour
    },
  },
});

export const persister = createSyncStoragePersister({
  storage: window.localStorage,
});

export const queryClient = new QueryClient();

export default function GlobalProviders({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <ThemeProvider
      attribute='class'
      defaultTheme='system'
      enableSystem
      disableTransitionOnChange
    >
      <PersistQueryClientProvider
        client={persistQueryClient}
        persistOptions={{ persister }}
      >
        <QueryClientProvider client={queryClient}>
          <TooltipProvider>{children}</TooltipProvider>
        </QueryClientProvider>
      </PersistQueryClientProvider>
    </ThemeProvider>
  );
}

Also, for each query I want to specify cache time separately as below where the query should be stale after midnight:

 return useQuery(['usersStats'], queryFn, {
    cacheTime: new Date().setHours(24, 0, 0, 0) - Date.now(),
  });

[TkDodo]

I want to use two query clients

The better idea is to use one query client and filter down what you'd want to persist with dehydrateOptions

I guess by default useQuery uses the provider from the nearest content (not persistent one in my case).

yes, but you can pass a custom query client to useQuery as a second argument.

[TkDodo]

let the typescript types guide you:

persistOptions={{ persister, dehydrateOptions: { shouldDehydrateQuery: (query) => ...return true for queries to be included, false for others... }}

[piszczu4]

@TkDodo hmm I did the following:

export const persistQueryClient = new QueryClient();

export const persister = createSyncStoragePersister({
  storage: window.localStorage,
});


export default function GlobalProviders({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <ThemeProvider
      attribute='class'
      defaultTheme='system'
      enableSystem
      disableTransitionOnChange
    >
      <PersistQueryClientProvider
        client={persistQueryClient}
        persistOptions={{
          persister,
          dehydrateOptions: {
            shouldDehydrateQuery: (query) => {
              if (query.queryKey[0] === 'persist') return true;
              return false;
            },
          },
        }}
      >
    {children}
      </PersistQueryClientProvider>
    </ThemeProvider>
  );
}

and I'm calling the query like this:

export const useUsersStats = () => {
  const queryFn = () => getUsersStats();

  return useQuery(['persist', 'usersStats'], queryFn, {
    cacheTime: new Date().setHours(24, 0, 0, 0) - Date.now(),
    staleTime: 0,
  });
};

I expected that once I call the query, the results are saved to cache and the next time the query will fetch the data from db will be after mifnight (because of the cacheTime. However, I checked lcoalStorage and values is updated every each page refresh. Any advices whats wrong with my code?

[TkDodo]

your persistence code looks fine but I don't understand what you're trying to do with that cacheTime calculation. This will be re-calculated every render. This has nothing to do with persistence, it just doesn't work like that.

[piszczu4]

I hoped that this cache time will do the following:

• user logged in at 2pm, query is called with cache time equal to the time left to midnight
• user logged in at 6pm, query is not called because the data is in cache (until midnight)
• user logged in at 1am, query is called again and cache time is again the time until midnight

If I cant obtain above with the cacheTime, how can I do this?

[TkDodo]

there was a discussion recently:

• Setting Cached Time Base on a function instead of based on a period #7113

it's not supported