- Install @tanstack/react-query with exponential backoff retry config - Create QueryClientProvider and custom hooks for listings, analytics, payments, and subscription API calls - Migrate 5 dashboard pages from useState/useEffect to React Query hooks - Add dark mode CSS variables and ThemeProvider with localStorage persistence - Add theme toggle button in dashboard header (sun/moon icon) - Enhance error boundaries with auto-retry, retry count, and loading state Co-Authored-By: Paperclip <noreply@paperclip.ing>
33 lines
698 B
TypeScript
33 lines
698 B
TypeScript
'use client';
|
|
|
|
import { QueryClient } from '@tanstack/react-query';
|
|
|
|
function makeQueryClient() {
|
|
return new QueryClient({
|
|
defaultOptions: {
|
|
queries: {
|
|
staleTime: 60 * 1000,
|
|
gcTime: 5 * 60 * 1000,
|
|
retry: 3,
|
|
retryDelay: (attemptIndex) => Math.min(1000 * 2 ** attemptIndex, 30000),
|
|
refetchOnWindowFocus: false,
|
|
},
|
|
mutations: {
|
|
retry: 1,
|
|
},
|
|
},
|
|
});
|
|
}
|
|
|
|
let browserQueryClient: QueryClient | undefined;
|
|
|
|
export function getQueryClient() {
|
|
if (typeof window === 'undefined') {
|
|
return makeQueryClient();
|
|
}
|
|
if (!browserQueryClient) {
|
|
browserQueryClient = makeQueryClient();
|
|
}
|
|
return browserQueryClient;
|
|
}
|