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