tsq-query-boundary

1'use client';
2 
3import { QueryErrorResetBoundary } from '@tanstack/react-query';
4import { AlertTriangle, RefreshCcw } from 'lucide-react';
5import * as React from 'react';
6import { ErrorBoundary, type FallbackProps } from 'react-error-boundary';
7import { Button } from '@/components/ui/button';
8 
9interface QueryBoundaryProps {
10  children: React.ReactNode;
11  queryKeys?: string[];
12  loadingFallback?: React.ReactNode;
13  errorFallback?: (props: FallbackProps) => React.ReactNode;
14}
15 
16export function QueryBoundary({
17  children,
18  queryKeys = [],
19  loadingFallback = 'Loading...',
20  errorFallback,
21}: QueryBoundaryProps) {
22  return (
23    <QueryErrorResetBoundary>
24      {({ reset }) => (
25        <ErrorBoundary
26          onReset={reset}
27          fallbackRender={(props) =>
28            errorFallback ? errorFallback(props) : <DefaultErrorFallback {...props} queryKeys={queryKeys} />
29          }
30        >
31          <React.Suspense fallback={loadingFallback}>{children}</React.Suspense>
32        </ErrorBoundary>
33      )}
34    </QueryErrorResetBoundary>
35  );
36}
37 
38export function DefaultErrorFallback({
39  error,
40  resetErrorBoundary,
41  queryKeys = [],
42}: FallbackProps & { queryKeys?: string[] }) {
43  return (
44    <div className='p-6 rounded-lg border border-destructive/30 bg-destructive/5 flex flex-col items-center justify-center space-y-4 text-center'>
45      <AlertTriangle className='text-destructive size-12' />
46      <div>
47        <h3 className='text-lg font-semibold mb-2'>Oops, something went wrong!</h3>
48        <p className='text-muted-foreground'>{error instanceof Error ? error.message : 'Unexpected error'}</p>
49        {queryKeys.length && (
50          <p className='text-xs text-muted-foreground mt-2'>
51            Concerned quer{queryKeys.length > 1 ? 'ies' : 'y'}: {queryKeys.join(', ')}
52          </p>
53        )}
54      </div>
55      <Button onClick={resetErrorBoundary} variant='outline' className='gap-2'>
56        <RefreshCcw className='size-4' />
57        Retry
58      </Button>
59    </div>
60  );
61}