49 lines
1.2 KiB
TypeScript
49 lines
1.2 KiB
TypeScript
"use client";
|
|
|
|
import { ReactNode, useEffect, useState } from "react";
|
|
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
|
|
import { persistQueryClient } from "@tanstack/react-query-persist-client";
|
|
import { createAsyncStoragePersister } from "@tanstack/query-async-storage-persister";
|
|
import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
|
|
|
|
interface Props {
|
|
children: ReactNode;
|
|
}
|
|
|
|
export function ReactQueryProvider({ children }: Props) {
|
|
const [queryClient] = useState(
|
|
() =>
|
|
new QueryClient({
|
|
defaultOptions: {
|
|
queries: {
|
|
staleTime: 1000 * 60 * 5, // 5 minutes
|
|
retry: true
|
|
}
|
|
}
|
|
})
|
|
);
|
|
|
|
// will cause bun to SEGFAULT
|
|
|
|
useEffect(() => {
|
|
if (typeof window === "undefined") return;
|
|
// Persist to localStorage (safe, runs client-side)
|
|
const localStoragePersister = createAsyncStoragePersister({
|
|
storage: window.localStorage
|
|
});
|
|
|
|
persistQueryClient({
|
|
queryClient,
|
|
persister: localStoragePersister,
|
|
maxAge: 1000 * 60 * 60 // 1 hour max
|
|
});
|
|
}, [queryClient]);
|
|
|
|
return (
|
|
<QueryClientProvider client={queryClient}>
|
|
{children}
|
|
<ReactQueryDevtools initialIsOpen={false} client={queryClient} />
|
|
</QueryClientProvider>
|
|
);
|
|
}
|