`invalidateQueries` inconsistently cancels `fetchQuery`
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
fetchQuery may throw an CancelledError { silent: true, revalidate: undefined } under the following conditions:
- the query is stale (otherwise the fetch won't run).
- the query is invalidated at least one tick after the fetch started.
- the query is in an
activestate. For example because a component withuseQueryis still mounted.
In the real world, this might happen in combination with react-router, when the user submits a form and then navigates to a new (or the same) page. In my case, we were updating a search param to close a modal after a form submission, which then triggered the loader function containing a fetchQuery call. We're also using a mutation observer[^1] to trigger invalidations, which is why the invalidation happened only after the navigation began.
I fixed the issue by using ensureQueryData instead of fetchQuery. This is the better choice anyways.
Still, this seems like a footgun since it is difficult to catch while testing. Further, if the intended behavior for fetchQuery is to throw a CancelledError on invalidation, it should always do that and not only when a revalidation is triggered.
[^1]: inspired by https://tkdodo.eu/blog/automatic-query-invalidation-after-mutations
Your minimal, reproducible example
https://codesandbox.io/p/sandbox/react-query-cancellederror-on-invalidation-d4g259
Steps to reproduce
See steps above
Expected behavior
Option A: The returned promise should consistently reject, regardless of whether an unrelated observer exists.
Option B: The returned promise should consistently resolve with the data returned from this fetch
Option C: The QueryClient should treat pending promises as observers, revalidate automatically and always resolve with the result from the latest revalidation.
How often does this bug happen?
Every time
Screenshots or Videos
No response
Platform
Tanstack Query adapter
react-query
TanStack Query version
5.50.1
TypeScript version
No response
Additional context
No response
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 reproduction and trace the interaction between fetchQuery, ensureQueryData, active observers, and query invalidation. Compare the promise behavior when an unrelated observer is mounted, then define which of the listed expected behaviors should be preserved before making a change and adding regression coverage.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react, typescript
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 5/5
- Estimated time
- Over a week
- Activity status
- Stale
- Clarity
- Needs clarification
- Newbie friendliness
- 25/100