QueryErrorResetBoundary

When using suspense or useErrorBoundaries in your queries, you need a way to let queries know that you want to try again when re-rendering after some error occured. With the QueryErrorResetBoundary component you can reset any query errors within the boundaries of the component.

1 import { QueryErrorResetBoundary } from 'react-query'
2 import { ErrorBoundary } from 'react-error-boundary'
3 
4 const App: React.FC = () => (
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 )