QueryErrorResetBoundary

function QueryErrorResetBoundary(props: QueryErrorResetBoundaryProps): Element;

Defined in: packages/react-query/src/QueryErrorResetBoundary.tsx:160

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.

Parameters

props

QueryErrorResetBoundaryProps

The children to render.

`props` properties

Property	Type	Description
`children`	\| `ReactNode` \| `QueryErrorResetBoundaryFunction`	Either a plain node, or a function that receives the boundary's QueryErrorResetBoundaryValue and returns a node.

Returns

Element

The children, rendered as-is, or called with the boundary's QueryErrorResetBoundaryValue if children is a function.

Example

import { ErrorBoundary } from 'react-error-boundary'
import { QueryErrorResetBoundary } from '@tanstack/react-query'

function App() {
  return (
    <QueryErrorResetBoundary>
      {({ reset }) => (
        <ErrorBoundary
          onReset={reset}
          fallbackRender={({ resetErrorBoundary }) => (
            <div>
              There was an error!
              <button onClick={() => resetErrorBoundary()}>Try again</button>
            </div>
          )}
        >
          <Page />
        </ErrorBoundary>
      )}
    </QueryErrorResetBoundary>
  )
}