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 | 1x 1x 1x 1x 1x 8x 8x 8x 8x 8x 8x 6x 6x 6x 6x 6x 6x 6x 6x 6x 6x 6x 6x 6x 8x 8x 8x 8x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 8x 1x 1x 1x 1x 1x 1x 1x 8x 8x 8x | 'use client';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import { ErrorBoundary } from '@web/components/error-boundary';
import { useToast } from '@web/hooks/use-toast';
import { useState } from 'react';
export function ReactQueryProvider({
children,
}: {
children: React.ReactNode;
}) {
const { toast } = useToast();
const [queryClient] = useState(
() =>
new QueryClient({
defaultOptions: {
queries: {
staleTime: 60 * 1000, // 1 minute
gcTime: 5 * 60 * 1000, // 5 minutes
refetchOnWindowFocus: false,
retry: 1,
},
mutations: {
retry: 1,
},
},
}),
);
return (
<ErrorBoundary
fallback={(_error) => (
<div className="flex flex-col items-center justify-center p-8 text-center">
<h2 className="text-lg font-semibold text-red-600 mb-2">
Data loading error
</h2>
<p className="text-sm text-gray-600 mb-4">
There was a problem loading the application data.
</p>
<button
type="button"
className="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700"
onClick={() => window.location.reload()}
>
Reload page
</button>
</div>
)}
onError={(error, errorInfo) => {
console.error('React Query error boundary:', error, errorInfo);
toast({
title: 'Application error',
description: 'A critical error occurred. Please reload the page.',
variant: 'destructive',
});
}}
>
<QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
</ErrorBoundary>
);
}
|