diff --git a/src/providers/QueryProvider.tsx b/src/providers/QueryProvider.tsx new file mode 100644 index 0000000..3918ab1 --- /dev/null +++ b/src/providers/QueryProvider.tsx @@ -0,0 +1,49 @@ +'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 ( + + {children} + {/* Only show devtools in development */} + {process.env.NODE_ENV === 'development' && ( + + )} + + ); +} \ No newline at end of file