QueryErrorBoundary

QueryErrorBoundary(props): ReactNode

Defined in: packages/react/src/ui/QueryErrorBoundary.tsx:100

Shared error boundary for the admin panel’s streamed query regions (polish fixes, Decision 1) — a region whose useSuspenseQuery throws (a dehydrated "error"-status query, e.g. a stale ?sort= link’s UNINDEXED_SORT, or an unreadable ?peek=/shared-view id) renders fallbackRender’s own region-specific UI instead of crashing the whole page.

Wraps TanStack Query’s own QueryErrorResetBoundary (forgets the offending query’s cached error state, so the next render attempt genuinely refetches instead of synchronously rethrowing the same stale error again) around a class-based error boundary — React ships no hook equivalent for catching a render-time throw. Place this immediately around the <Suspense> boundary whose content might throw (NOT around unrelated siblings — e.g. the table’s own toolbar, or the tab strip’s non-shared tabs, must stay OUTSIDE this boundary so a failure in one region never takes them down too).

Parameters

props

QueryErrorBoundaryProps

QueryErrorBoundaryProps.

Returns

ReactNode

children, or fallbackRender’s own UI once children has thrown.

Example

<QueryErrorBoundary
  fallbackRender={({ error, resetErrorBoundary }) => (
    <DataTable data={[]} columns={columnsWithActions} queryError={
      <ListViewQueryError error={error} collectionLabelPlural="posts" onRetry={resetErrorBoundary} />
    } />
  )}
>
  <Suspense fallback={<DataTable data={[]} columns={columnsWithActions} isPending />}>
    <CollectionListViewData {...props} />
  </Suspense>
</QueryErrorBoundary>