49 lines
1.4 KiB
TypeScript
49 lines
1.4 KiB
TypeScript
|
'use client';
|
||
|
|
|
||
|
|
import React from 'react';
|
||
|
|
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
|
||
|
|
import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
|
||
|
|
|
||
|
|
// Create a client with optimized settings for your app
|
||
|
|
const queryClient = new QueryClient({
|
||
|
|
defaultOptions: {
|
||
|
|
queries: {
|
||
|
|
// Stale time: how long data stays fresh (5 minutes)
|
||
|
|
staleTime: 5 * 60 * 1000,
|
||
|
|
// Cache time: how long data stays in cache when unused (10 minutes)
|
||
|
|
gcTime: 10 * 60 * 1000,
|
||
|
|
// Retry failed requests 3 times
|
||
|
|
retry: 3,
|
||
|
|
// Retry delay increases exponentially
|
||
|
|
retryDelay: (attemptIndex) => Math.min(1000 * 2 ** attemptIndex, 30000),
|
||
|
|
// Refetch on window focus (useful for data consistency)
|
||
|
|
refetchOnWindowFocus: false,
|
||
|
|
// Refetch on reconnect
|
||
|
|
refetchOnReconnect: true,
|
||
|
|
},
|
||
|
|
mutations: {
|
||
|
|
// Retry failed mutations once
|
||
|
|
retry: 1,
|
||
|
|
// Retry delay for mutations
|
||
|
|
retryDelay: 1000,
|
||
|
|
},
|
||
|
|
},
|
||
|
|
});
|
||
|
|
|
||
|
|
interface QueryProviderProps {
|
||
|
|
children: React.ReactNode;
|
||
|
|
}
|
||
|
|
|
||
|
|
export function QueryProvider({ children }: QueryProviderProps) {
|
||
|
|
return (
|
||
|
|
<QueryClientProvider client={queryClient}>
|
||
|
|
{children}
|
||
|
|
{/* Only show devtools in development */}
|
||
|
|
{process.env.NODE_ENV === 'development' && (
|
||
|
|
<ReactQueryDevtools
|
||
|
|
initialIsOpen={false}
|
||
|
|
/>
|
||
|
|
)}
|
||
|
|
</QueryClientProvider>
|
||
|
|
);
|
||
|
|
}
|