T
TanStack•2y ago
absent-sapphire

Is it expected that queries with a `gcTime` set aren't used by `react-query-persist-client?

I have a setup like this: 
import { createSyncStoragePersister } from "@tanstack/query-sync-storage-persister";
import { PersistQueryClientProvider as BaseProvider } from "@tanstack/react-query-persist-client";
import { QueryClient } from "@tanstack/react-query";



const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      gcTime: 1_000 * 60 * 60 * 24, // 24 hours
    },
  },
});

const persister = createSyncStoragePersister({
  storage: window.localStorage,
  key: "whatever",
});

export const PersistQueryClientProvider = ({
  children,
}: {
  children: ReactNode;
}) => (
  <BaseProvider
    client={queryClient}
    // 4 weeks max age
    persistOptions={{
      persister,
      buster: "rhymes",
      maxAge: 4 * 7 * 24 * 60 * 60 * 1000,
    }}
  >
    {children}
  </BaseProvider>
);
import { createSyncStoragePersister } from "@tanstack/query-sync-storage-persister";
import { PersistQueryClientProvider as BaseProvider } from "@tanstack/react-query-persist-client";
import { QueryClient } from "@tanstack/react-query";



const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      gcTime: 1_000 * 60 * 60 * 24, // 24 hours
    },
  },
});

const persister = createSyncStoragePersister({
  storage: window.localStorage,
  key: "whatever",
});

export const PersistQueryClientProvider = ({
  children,
}: {
  children: ReactNode;
}) => (
  <BaseProvider
    client={queryClient}
    // 4 weeks max age
    persistOptions={{
      persister,
      buster: "rhymes",
      maxAge: 4 * 7 * 24 * 60 * 60 * 1000,
    }}
  >
    {children}
  </BaseProvider>
);
When I use useQuery in my app, I've found that query data restored from localStorage on load if the query includes a gcTime option. I.e.: a query like this: 
  useQuery({
    queryKey: ["migrationResult", sequenceNumber],
    queryFn: doFetch,
    // Only refetch if not yet marked as successful,
    refetchInterval: (query) =>
      query.state.data?.success === false ? 15_000 : false,
    staleTime: 30 * 24 * 60 * 60 * 1000,
  });
  useQuery({
    queryKey: ["migrationResult", sequenceNumber],
    queryFn: doFetch,
    // Only refetch if not yet marked as successful,
    refetchInterval: (query) =>
      query.state.data?.success === false ? 15_000 : false,
    staleTime: 30 * 24 * 60 * 60 * 1000,
  });
Does NOT get restored if I add a gcTime value, unless that gcTime value is Infinity. Is this expected? Versions: 
├── @tanstack/query-sync-storage-persister@5.28.4
├── @tanstack/react-query@5.28.2
├── @tanstack/react-query-devtools@5.28.4
├── @tanstack/react-query-persist-client@5.28.4
├── @tanstack/query-sync-storage-persister@5.28.4
├── @tanstack/react-query@5.28.2
├── @tanstack/react-query-devtools@5.28.4
├── @tanstack/react-query-persist-client@5.28.4
1 Reply
sunny-green
sunny-green•2y ago
No, not expected. Show a reproduction please

Did you find this page helpful?