Errored queries caught by ErrorBoundary are not retried on mount
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 50.3k
- Forks
- 4.2k
- Avg merge
- 18h 25m
- Merged PRs (30d)
- 200
Description
Describe the bug
I'm using Suspense and ErrorBoundaries and I'm seeing unexpected behavior when queries are erroring. If a query errors I'm displaying an ErrorBoundary for that part of the UI. Now if I navigate to another page using react-router-dom and navigate back to the page, the ErrorBoundary is still there and the query is not retried. I know that normally you would have to reset the error boundary while you are on the same page to trigger a re-run of the failed queries, but in this case I would've assumed that the queries are retried when I visit the page again, i.e. the components are mounted again.
To Reproduce
- Visit the Code Sandbox
- Open the console
- Wait until the error occurs and the fallback of the ErrorBoundary is shown: "An error occured!" (You need to click off of react-error-overlay to see it)
- Press the "Hide" button to unmount the ErrorBoundary
- Press the "Show" button to render it again
- Query is not re-executed and the error is immediately shown again
Expected behavior
The query is re-executed after the component mounts, i.e. honoring the retryOnMount setting.
Desktop (please complete the following information):
- Version: 3.24.4
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start with the linked CodeSandbox and reproduce the failure using Suspense, ErrorBoundary, and the Hide/Show controls. Read the query handling around retryOnMount and compare behavior before and after the ErrorBoundary remounts. Done means the query re-executes on mount instead of immediately showing the previous error.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react, typescript
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Quiet
- Clarity
- Clearly specified
- Newbie friendliness
- 42/100