Chapter 79: QueryErrorResetBoundary & useQueryErrorResetBoundary

Core Idea

Both reset the same thing — query errors within a boundary, so a "Try again" click actually retries instead of immediately re-throwing the same cached error — as a component (scopes explicitly) or a hook (scopes to the nearest QueryErrorResetBoundary, or globally if none exists).

Key Concepts

QueryErrorResetBoundary: a render-prop component wrapping the tree — its child function receives reset, wired into an error-boundary library's (e.g. react-error-boundary) onReset prop, so clicking "Try again" both resets the error boundary and clears the underlying query's error state before re-rendering.
useQueryErrorResetBoundary: the hook form of the same reset function — resets errors within the nearest ancestor QueryErrorResetBoundary, or globally across all queries if no such boundary wraps it.
Why this exists at all: without resetting the query's own error state, re-rendering into the same suspending/throwOnError query would just throw the same cached error again immediately — the boundary would never get a chance to show fresh content.

Code Examples

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

What it demonstrates: wiring a query-error reset into a third-party error boundary's own reset callback.

Key Takeaways

Pair every useSuspenseQuery/throwOnError: true error boundary with one of these — without it, "Try again" doesn't actually retry the query.
Reach for the component form when a specific subtree needs its own reset scope; the hook form when reading reset inline is more convenient, falling back to global scope if no boundary wraps it.

Connects To

Suspense: the guide where this reset pattern is introduced in context.