Skip to content

fix: resolve suspense queries when data gets into the cache by other means#10994

Open
TkDodo wants to merge 7 commits into
mainfrom
feature/suspense-resolving-data
Open

fix: resolve suspense queries when data gets into the cache by other means#10994
TkDodo wants to merge 7 commits into
mainfrom
feature/suspense-resolving-data

Conversation

@TkDodo

@TkDodo TkDodo commented Jun 27, 2026

Copy link
Copy Markdown
Collaborator

fixes

Summary by CodeRabbit

  • Bug Fixes
    • Query promises now remain synchronized with cached data when setQueryData occurs during an in-flight fetch.
    • Suspense queries resolve immediately from newly available cached data, then update when the original request completes.
    • Improved error boundary retry suppression to match the current “throw on error” behavior.
  • Tests
    • Added coverage for in-flight promise resolution after cache updates (React and Preact Suspense).
    • Updated an existing Suspense/error boundary test flow for clearer, stable assertions.

@coderabbitai

coderabbitai Bot commented Jun 27, 2026

Copy link
Copy Markdown
Contributor

Review Change Stack

Note

Reviews paused

It looks like this branch is under active development. To avoid overwhelming you with review comments due to an influx of new commits, CodeRabbit has automatically paused this review. You can configure this behavior by changing the reviews.auto_review.auto_pause_after_reviewed_commits setting.

Use the following commands to manage reviews:

  • @coderabbitai resume to resume automatic reviews.
  • @coderabbitai review to trigger a single review.

Use the checkboxes below for quick actions:

  • ▶️ Resume reviews
  • 🔍 Trigger review
📝 Walkthrough

Walkthrough

Query promise tracking now stays synchronized with query state, and observers/hooks read that shared promise for optimistic and suspense flows. Preact error-boundary handling now uses the current query state, and new tests cover cached data arriving during pending fetches.

Changes

Stateful Query Promise

Layer / File(s) Summary
Thenable sync helper
packages/query-core/src/thenable.ts
updateThenable aligns a thenable with result data, error, status, and pending finalization behavior.
Query promise state
packages/query-core/src/query.ts
Query stores an internal thenable, initializes and refreshes it during dispatch, and returns it from promise.
Observer promise usage
packages/query-core/src/queryObserver.ts
QueryObserver starts fetches without immediate errors, reads query.promise for optimistic results, and updates render-time thenables with updateThenable.
Suspense and error-boundary wiring
packages/preact-query/src/errorBoundaryUtils.ts, packages/preact-query/src/useBaseQuery.ts, packages/preact-query/src/useQueries.ts, packages/query-core/src/hydration.ts
Preact query hooks and hydration now use the cached query object and its promise when deciding retries, errors, prefetch-in-render behavior, and dehydration handling.
Suspense and promise tests
packages/query-core/src/__tests__/query.test.tsx, packages/react-query/src/__tests__/useSuspenseQuery.test.tsx, packages/preact-query/src/__tests__/useSuspenseQuery.test.tsx, .changeset/silly-tires-brake.md
New tests cover cached data arriving during pending fetches in query-core, React Query, and Preact Query, and the changeset records patch releases.

Estimated code review effort

🎯 4 (Complex) | ⏱️ ~45 minutes

Possibly related PRs

  • TanStack/query#10887: Touches experimental_prefetchInRender and QueryObserver promise handling, which is the same promise-tracking path updated here.

Suggested labels

package: react-query, package: query-core, package: preact-query

Suggested reviewers

  • Ephem

Poem

🐇 A promise hopped through cache and stream,
Thenables synced a waking dream.
Suspense blinked once, then fetched anew,
While cached data shimmered through.
With soft little paws and timing bright,
The query path now lands just right.

🚥 Pre-merge checks | ✅ 3 | ❌ 2

❌ Failed checks (2 warnings)

Check name Status Explanation Resolution
Description check ⚠️ Warning The description only references an issue and omits the required Changes, Checklist, and Release Impact sections. Fill out the template with a change summary, checklist items, and release impact details, including whether a changeset is needed.
Docstring Coverage ⚠️ Warning Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%. Write docstrings for the functions missing them to satisfy the coverage threshold.
✅ Passed checks (3 passed)
Check name Status Explanation
Title check ✅ Passed The title clearly summarizes the main change: resolving suspense queries when cache data arrives through another path.
Linked Issues check ✅ Passed Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check ✅ Passed Check skipped because no linked issues were found for this pull request.
✨ Finishing Touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Commit unit tests in branch feature/suspense-resolving-data

Comment @coderabbitai help to get the list of available commands.

@nx-cloud

nx-cloud Bot commented Jun 27, 2026

Copy link
Copy Markdown

View your CI Pipeline Execution ↗ for commit 46bed97

Command Status Duration Result
nx affected --targets=test:sherif,test:knip,tes... ✅ Succeeded 7m 46s View ↗
nx run-many --target=build --exclude=examples/*... ✅ Succeeded 1m 47s View ↗

☁️ Nx Cloud last updated this comment at 2026-06-27 19:31:13 UTC

@github-actions

github-actions Bot commented Jun 27, 2026

Copy link
Copy Markdown
Contributor

🚀 Changeset Version Preview

3 package(s) bumped directly, 22 bumped as dependents.

🟩 Patch bumps

Package Version Reason
@tanstack/preact-query 5.101.1 → 5.101.2 Changeset
@tanstack/query-core 5.101.1 → 5.101.2 Changeset
@tanstack/react-query 5.101.1 → 5.101.2 Changeset
@tanstack/angular-query-experimental 5.101.1 → 5.101.2 Dependent
@tanstack/angular-query-persist-client 5.101.1 → 5.101.2 Dependent
@tanstack/eslint-plugin-query 5.101.1 → 5.101.2 Dependent
@tanstack/lit-query 0.2.8 → 0.2.9 Dependent
@tanstack/preact-query-devtools 5.101.1 → 5.101.2 Dependent
@tanstack/preact-query-persist-client 5.101.1 → 5.101.2 Dependent
@tanstack/query-async-storage-persister 5.101.1 → 5.101.2 Dependent
@tanstack/query-broadcast-client-experimental 5.101.1 → 5.101.2 Dependent
@tanstack/query-devtools 5.101.1 → 5.101.2 Dependent
@tanstack/query-persist-client-core 5.101.1 → 5.101.2 Dependent
@tanstack/query-sync-storage-persister 5.101.1 → 5.101.2 Dependent
@tanstack/react-query-devtools 5.101.1 → 5.101.2 Dependent
@tanstack/react-query-next-experimental 5.101.1 → 5.101.2 Dependent
@tanstack/react-query-persist-client 5.101.1 → 5.101.2 Dependent
@tanstack/solid-query 5.101.1 → 5.101.2 Dependent
@tanstack/solid-query-devtools 5.101.1 → 5.101.2 Dependent
@tanstack/solid-query-persist-client 5.101.1 → 5.101.2 Dependent
@tanstack/svelte-query 6.1.35 → 6.1.36 Dependent
@tanstack/svelte-query-devtools 6.1.35 → 6.1.36 Dependent
@tanstack/svelte-query-persist-client 6.1.35 → 6.1.36 Dependent
@tanstack/vue-query 5.101.1 → 5.101.2 Dependent
@tanstack/vue-query-devtools 6.1.35 → 6.1.36 Dependent

@pkg-pr-new

pkg-pr-new Bot commented Jun 27, 2026

Copy link
Copy Markdown
More templates

@tanstack/angular-query-experimental

npm i https://pkg.pr.new/@tanstack/angular-query-experimental@10994

@tanstack/eslint-plugin-query

npm i https://pkg.pr.new/@tanstack/eslint-plugin-query@10994

@tanstack/lit-query

npm i https://pkg.pr.new/@tanstack/lit-query@10994

@tanstack/preact-query

npm i https://pkg.pr.new/@tanstack/preact-query@10994

@tanstack/preact-query-devtools

npm i https://pkg.pr.new/@tanstack/preact-query-devtools@10994

@tanstack/preact-query-persist-client

npm i https://pkg.pr.new/@tanstack/preact-query-persist-client@10994

@tanstack/query-async-storage-persister

npm i https://pkg.pr.new/@tanstack/query-async-storage-persister@10994

@tanstack/query-broadcast-client-experimental

npm i https://pkg.pr.new/@tanstack/query-broadcast-client-experimental@10994

@tanstack/query-core

npm i https://pkg.pr.new/@tanstack/query-core@10994

@tanstack/query-devtools

npm i https://pkg.pr.new/@tanstack/query-devtools@10994

@tanstack/query-persist-client-core

npm i https://pkg.pr.new/@tanstack/query-persist-client-core@10994

@tanstack/query-sync-storage-persister

npm i https://pkg.pr.new/@tanstack/query-sync-storage-persister@10994

@tanstack/react-query

npm i https://pkg.pr.new/@tanstack/react-query@10994

@tanstack/react-query-devtools

npm i https://pkg.pr.new/@tanstack/react-query-devtools@10994

@tanstack/react-query-next-experimental

npm i https://pkg.pr.new/@tanstack/react-query-next-experimental@10994

@tanstack/react-query-persist-client

npm i https://pkg.pr.new/@tanstack/react-query-persist-client@10994

@tanstack/solid-query

npm i https://pkg.pr.new/@tanstack/solid-query@10994

@tanstack/solid-query-devtools

npm i https://pkg.pr.new/@tanstack/solid-query-devtools@10994

@tanstack/solid-query-persist-client

npm i https://pkg.pr.new/@tanstack/solid-query-persist-client@10994

@tanstack/svelte-query

npm i https://pkg.pr.new/@tanstack/svelte-query@10994

@tanstack/svelte-query-devtools

npm i https://pkg.pr.new/@tanstack/svelte-query-devtools@10994

@tanstack/svelte-query-persist-client

npm i https://pkg.pr.new/@tanstack/svelte-query-persist-client@10994

@tanstack/vue-query

npm i https://pkg.pr.new/@tanstack/vue-query@10994

@tanstack/vue-query-devtools

npm i https://pkg.pr.new/@tanstack/vue-query-devtools@10994

commit: 46bed97

@coderabbitai coderabbitai Bot left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@packages/query-core/src/thenable.ts`:
- Around line 108-113: The pending branch in thenable handling is reusing an old
promise across query-hash changes, so update the logic in thenable.ts and the
caller in queryObserver.ts to recreate or refresh the thenable whenever the
query identity changes instead of returning the previous pending instance. Use
the query-hash comparison in QueryObserver and the finalizePending path in
finalizeThenableIfPossible/thenable.status handling to ensure a new settled
query does not inherit a stale pending promise.
🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

  • Push a commit to this branch (recommended)
  • Create a new PR with the fixes

ℹ️ Review info
⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 5d9cd8e2-21ff-462c-b1e7-4a16aa5cf26d

📥 Commits

Reviewing files that changed from the base of the PR and between b03390b and f581dfc.

📒 Files selected for processing (5)
  • packages/query-core/src/__tests__/query.test.tsx
  • packages/query-core/src/query.ts
  • packages/query-core/src/queryObserver.ts
  • packages/query-core/src/thenable.ts
  • packages/react-query/src/__tests__/useSuspenseQuery.test.tsx

Comment on lines +108 to +113
switch (thenable.status) {
case 'pending':
if (finalizePending) {
finalizeThenableIfPossible(thenable)
}
return thenable

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🩺 Stability & Availability | 🟠 Major | ⚡ Quick win

Recreate the thenable on query-hash switches.

When packages/query-core/src/queryObserver.ts passes false here for a query change, the 'pending' branch reuses the previous query's pending thenable. If the new query is already settled from cache, nextResult.promise stays pending and Suspense can hang indefinitely.

Suggested fix
   switch (thenable.status) {
     case 'pending':
-      if (finalizePending) {
-        finalizeThenableIfPossible(thenable)
-      }
-      return thenable
+      if (!finalizePending) {
+        return recreateThenable()
+      }
+      finalizeThenableIfPossible(thenable)
+      return thenable
     case 'fulfilled':
       if (isErrorWithoutData || result.data !== thenable.value) {
         return recreateThenable()
       }
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
switch (thenable.status) {
case 'pending':
if (finalizePending) {
finalizeThenableIfPossible(thenable)
}
return thenable
switch (thenable.status) {
case 'pending':
if (!finalizePending) {
return recreateThenable()
}
finalizeThenableIfPossible(thenable)
return thenable
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@packages/query-core/src/thenable.ts` around lines 108 - 113, The pending
branch in thenable handling is reusing an old promise across query-hash changes,
so update the logic in thenable.ts and the caller in queryObserver.ts to
recreate or refresh the thenable whenever the query identity changes instead of
returning the previous pending instance. Use the query-hash comparison in
QueryObserver and the finalizePending path in
finalizeThenableIfPossible/thenable.status handling to ensure a new settled
query does not inherit a stale pending promise.

@github-actions

Copy link
Copy Markdown
Contributor

size-limit report 📦

Path Size
react full 12.14 KB (+0.13% 🔺)
react minimal 9.08 KB (+0.06% 🔺)

@coderabbitai coderabbitai Bot left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@packages/query-core/src/query.ts`:
- Around line 202-203: `Query.promise` can still be undefined, but
`QueryObserver.fetchOptimistic()` assumes it is always a Promise and calls
`.then()` directly. Update `Query.promise` in `Query` to initialize and cache
the promise on first access (or otherwise guarantee a Promise return), and
adjust the getter signature so it no longer exposes `undefined`; verify the flow
where `QueryObserver.fetchOptimistic()` reads `query.promise` remains safe
without extra guards.
🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

  • Push a commit to this branch (recommended)
  • Create a new PR with the fixes

ℹ️ Review info
⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: d646e7ae-bb64-40a4-8fd8-4fd3b3682525

📥 Commits

Reviewing files that changed from the base of the PR and between 81ff18f and d19a32d.

📒 Files selected for processing (1)
  • packages/query-core/src/query.ts

Comment thread packages/query-core/src/query.ts Outdated

@coderabbitai coderabbitai Bot left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In @.changeset/silly-tires-brake.md:
- Line 3: The changeset entry uses the wrong package name, so update the package
identifier in the changeset metadata from the misspelled `@tanstack/peact-query`
to the correct `@tanstack/preact-query`. Make this fix in the changeset file so
the package is properly included in the version bump and release notes
generation.
🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

  • Push a commit to this branch (recommended)
  • Create a new PR with the fixes

ℹ️ Review info
⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 1d41ac60-a1bc-4992-be31-7239db25860f

📥 Commits

Reviewing files that changed from the base of the PR and between 8f0fb9a and 86ff705.

📒 Files selected for processing (7)
  • .changeset/silly-tires-brake.md
  • packages/preact-query/src/__tests__/useSuspenseQuery.test.tsx
  • packages/preact-query/src/errorBoundaryUtils.ts
  • packages/preact-query/src/useBaseQuery.ts
  • packages/preact-query/src/useQueries.ts
  • packages/query-core/src/hydration.ts
  • packages/query-core/src/query.ts
🚧 Files skipped from review as they are similar to previous changes (1)
  • packages/query-core/src/query.ts

Comment thread .changeset/silly-tires-brake.md Outdated
Comment thread .changeset/silly-tires-brake.md Outdated
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant