Class QueryErrorBoundary

A class-based error boundary that catches errors thrown by useSuspenseQuery and useSuspenseObservableQuery — specifically QueryFailed and QueryUnauthorized.

Place it around any subtree that uses Suspense query hooks:

<QueryErrorBoundary onError={({ error, isQueryFailed, reset }) =>
    <div>
        <p>{isQueryFailed ? 'Server error' : 'Not authorized'}</p>
        <button onClick={reset}>Retry</button>
    </div>
}>
    <Suspense fallback={<Spinner />}>
        <MyComponent />
    </Suspense>
</QueryErrorBoundary>
Copy