CODEWITHSUNDEEP
error-handlingreact-querytanstackreact-querytanstackreact-error-boundary
beeboop
beeboop

Reputation: 41

Pattern for ErrorBoundary + TanStack's useQuery

Installed dependencies

@tanstack/react-query: "^4.29.5"
react-error-boundary: "^4.0.13"

I can't seem to get Error boundaries working. I've stripped down my components to be the most bare it could be.

QueryComponent.tsx

// useQuery with option throwOnError is true

App.tsx


const { reset } = useQueryErrorResetBoundary();

...

return (
  <ErrorBoundary onReset={reset} fallbackRender={() => <p>Testing..</p>}>
     <div>
       <QueryComponent />
     </div>
  </ErrorBoundary>

Inside of my custom hook, I have defined useErrorBoundary: (error) => error.response?.status === 404 but even if I were to just set it to boolean true, I don't get the error boundary. What am I missing? Examples look relatively straightforward but the only thing I am getting is the 404 with a blank screen

EDIT: I've moved the hook outside to its own component and just wrapped that component in

Some references that I am using:

https://tkdodo.eu/blog/react-query-error-handling https://tanstack.com/query/v4/docs/framework/react/reference/useQueryErrorResetBoundary https://github.com/TanStack/query/discussions/2763

React - Error boundary not catching error React Query's useQueryErrorResetBoundary() reset not working in nested Error Boundaries

Upvotes: 1

Views: 848

Answers (0)

Related Questions