feat(react-query): add timeout cancellation support to QueriesHydration#1927
Merged
feat(react-query): add timeout cancellation support to QueriesHydration#1927
Conversation
Cancel in-flight queries when timeout occurs, leveraging React Query's
built-in AbortSignal. The `timeout` prop now accepts either a number
(cancel enabled by default) or an object `{ ms, cancel }` for opt-out.
Inspired by #1902 and #1904.
Co-Authored-By: saengmotmi <saengmotmi@users.noreply.github.com>
People can be co-author:
|
🦋 Changeset detectedLatest commit: cfd0e1f The changes in this PR will be included in the next version bump. This PR includes changesets to release 6 packages
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
Contributor
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
Contributor
|
Size Change: +66 B (+0.11%) Total Size: 60.1 kB
ℹ️ View Unchanged
|
…e without timeout Refactor the QueriesHydration component to ensure that queries are canceled when they fail due to errors, even if a timeout is not specified. The timeout handling has been simplified to accept only a number, removing the previous object structure. This change enhances the reliability of query cancellation in error scenarios.
…ng in QueriesHydration Refactor the QueriesHydration component to consistently clear the timeoutController in both the catch block and the finally block. This change improves the reliability of query cancellation during error scenarios, ensuring that resources are properly released.
Refactor the QueriesHydration component to ensure the timeoutController is only created when a valid timeout value is provided. This change enhances the clarity of the timeout logic and ensures that the function signature for createTimeoutController only accepts a number, improving type safety.
Updated versioning for react-query packages to minor.
Member
Author
|
@saengmotmi, could you review this Pull Request, please? |
Contributor
|
@manudeli I think it's much simple 👍 |
There was a problem hiding this comment.
Pull request overview
Adds broader query-cancellation behavior to QueriesHydration so that any server-side fetch error (including timeout) triggers React Query cancellation for the provided query list, and extends test coverage for both v4 and v5 packages.
Changes:
- Simplifies timeout controller creation and fixes the timeout error message formatting.
- Cancels hydration queries via
queryClient.cancelQueries(...)on any error path. - Adds multiple test cases verifying cancellation behavior (timeout, non-timeout error, skipSsrOnError modes) in both v4 and v5.
Reviewed changes
Copilot reviewed 5 out of 5 changed files in this pull request and generated 4 comments.
Show a summary per file
| File | Description |
|---|---|
| packages/react-query-5/src/QueriesHydration.tsx | Cancels queries on error and simplifies timeout controller creation/message. |
| packages/react-query-5/src/QueriesHydration.spec.tsx | Adds tests asserting query cancellation across timeout/error/success cases. |
| packages/react-query-4/src/QueriesHydration.tsx | Mirrors v5 behavior changes for cancellation + timeout controller simplification. |
| packages/react-query-4/src/QueriesHydration.spec.tsx | Mirrors v5 test additions for v4 package. |
| .changeset/gorgeous-snails-beg.md | Declares a minor release for affected packages. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
You can also share your feedback on Copilot code review. Take the survey.
| timeoutController?.clear() | ||
| } catch { | ||
| timeoutController?.clear() | ||
| queries.forEach((query) => void queryClient.cancelQueries(query)) |
| timeoutController?.clear() | ||
| } catch { | ||
| timeoutController?.clear() | ||
| queries.forEach((query) => void queryClient.cancelQueries(query)) |
| children: <div>children</div>, | ||
| }) | ||
|
|
||
| // Promise.all waits for all, so timeout cancels all queries in the list |
| children: <div>children</div>, | ||
| }) | ||
|
|
||
| // Promise.all waits for all, so timeout cancels all queries in the list |
manudeli
pushed a commit
that referenced
this pull request
Mar 19, 2026
This PR was opened by the [Changesets release](https://github.com/changesets/action) GitHub action. When you're ready to do a release, you can merge this and the packages will be published to npm automatically. If you're not ready to do a release yet, that's fine, whenever you add more changesets to main, this PR will be updated. # Releases ## @suspensive/react-query@3.20.0 ### Minor Changes - [#1927](#1927) [`34607e4`](34607e4) Thanks [@manudeli](https://github.com/manudeli)! - feat(react-query): add timeout cancellation support to QueriesHydration ### Patch Changes - Updated dependencies \[[`34607e4`](34607e4)]: - @suspensive/react-query-4@3.20.0 - @suspensive/react-query-5@3.20.0 ## @suspensive/react-query-4@3.20.0 ### Minor Changes - [#1927](#1927) [`34607e4`](34607e4) Thanks [@manudeli](https://github.com/manudeli)! - feat(react-query): add timeout cancellation support to QueriesHydration ## @suspensive/react-query-5@3.20.0 ### Minor Changes - [#1927](#1927) [`34607e4`](34607e4) Thanks [@manudeli](https://github.com/manudeli)! - feat(react-query): add timeout cancellation support to QueriesHydration ## @suspensive/codemods@3.20.0 ## @suspensive/jotai@3.20.0 ## @suspensive/react@3.20.0 Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Co-authored by: @saengmotmi
Inspired by #1902 and #1904
Changes
cancelQueries. IfqueryFnforwards AbortSignal tofetch, the HTTP request is aborted immediately.createTimeoutControllerOverview
PR Checklist