TanStack / TanStack/query

Errored queries caught by ErrorBoundary are not retried on mount

Open
#2,712 44 comments 5 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

bug help wanted package: react-query
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

  1. Visit the Code Sandbox
  2. Open the console
  3. 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)
  4. Press the "Hide" button to unmount the ErrorBoundary
  5. Press the "Show" button to render it again
  6. 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

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.