When using suspense or throwOnError in your queries, you need a way to let queries know that you want to try again when re-rendering after some error occurred. With the QueryErrorResetBoundary component you can reset any query errors within the boundaries of the component.
1import { QueryErrorResetBoundary } from '@tanstack/react-query'
2import { ErrorBoundary } from 'react-error-boundary'
3
4const App = () => (
5 <QueryErrorResetBoundary>
6 {({ reset }) => (
7 <ErrorBoundary
8 onReset={reset}
9 fallbackRender={({ resetErrorBoundary }) => (
10 <div>
11 There was an error!
12 <Button onClick={() => resetErrorBoundary()}>Try again</Button>
13 </div>
14 )}
15 >
16 <Page />
17 </ErrorBoundary>
18 )}
19 </QueryErrorResetBoundary>
20)