Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 | 2x 2x 2x 1x 2x 21x 6x 15x 2x 6x | import {
QueryClient,
QueryClientProvider,
MutationCache,
QueryCache,
} from '@tanstack/react-query';
import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
import type { ReactNode } from 'react';
// Enhanced error handling for queries and mutations
const queryErrorHandler = (error: unknown) => {
console.error('Query error:', error);
// You can add global error handling here (e.g., toast notifications)
};
const mutationErrorHandler = (error: unknown) => {
console.error('Mutation error:', error);
// You can add global error handling here (e.g., toast notifications)
};
// Create a client with enhanced configuration
const queryClient = new QueryClient({
defaultOptions: {
queries: {
staleTime: 5 * 60 * 1000, // 5 minutes
gcTime: 10 * 60 * 1000, // 10 minutes (formerly cacheTime)
retry: (failureCount: number, error: any) => {
// Don't retry on 4xx errors
if (error?.response?.status >= 400 && error?.response?.status < 500) {
return false;
}
return failureCount < 3;
},
refetchOnWindowFocus: false,
refetchOnReconnect: true,
refetchOnMount: true,
},
mutations: {
retry: 1,
onError: mutationErrorHandler,
},
},
queryCache: new QueryCache({
onError: queryErrorHandler,
}),
mutationCache: new MutationCache({
onError: mutationErrorHandler,
}),
});
interface QueryProviderProps {
children: ReactNode;
}
export const QueryProvider = ({ children }: QueryProviderProps) => {
return (
<QueryClientProvider client={queryClient}>
{children}
{/* Show devtools only in development */}
{import.meta.env.DEV && (
<ReactQueryDevtools
initialIsOpen={false}
buttonPosition="bottom-left"
position="bottom"
/>
)}
</QueryClientProvider>
);
};
export { queryClient };
|