Skip to content

test({react,preact}-query/usePrefetchQuery): assert the 'Loading...' fallback is rendered before the prefetch resolves#11075

Merged
sukvvon merged 1 commit into
mainfrom
test/prefetch-query-loading-fallback-assertion
Jul 18, 2026
Merged

test({react,preact}-query/usePrefetchQuery): assert the 'Loading...' fallback is rendered before the prefetch resolves#11075
sukvvon merged 1 commit into
mainfrom
test/prefetch-query-loading-fallback-assertion

Conversation

@sukvvon

@sukvvon sukvvon commented Jul 18, 2026

Copy link
Copy Markdown
Member

🎯 Changes

Adds an assertion right after the initial render that the Suspense 'Loading...' fallback is shown while the prefetched query is still in flight, in should prefetch query if query state does not exist for both react-query and preact-query. The same file's should not create a suspense waterfall if prefetch is fired test already follows this convention (checking fetchStatus/fallback text before advancing timers); this test was missing it.

✅ Checklist

  • I have followed the steps in the Contributing guide.
  • I have tested this code locally with pnpm run test:pr.

🚀 Release Impact

  • This change affects published code, and I have generated a changeset.
  • This change is docs/CI/dev-only (no release).

Summary by CodeRabbit

  • Tests
    • Added/strengthened assertions to confirm the Suspense loading fallback (“Loading...”) appears immediately when prefetching a query without existing state.
    • Updated coverage for both React and Preact integrations to better validate prefetch behavior during the initial render.

@nx-cloud

nx-cloud Bot commented Jul 18, 2026

Copy link
Copy Markdown

View your CI Pipeline Execution ↗ for commit 78dbec4

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

☁️ Nx Cloud last updated this comment at 2026-07-18 05:19:21 UTC

@sukvvon sukvvon changed the title test(react-query,preact-query/usePrefetchQuery): assert the 'Loading...' fallback is rendered before the prefetch resolves test({react,preact}-query/usePrefetchQuery): assert the 'Loading...' fallback is rendered before the prefetch resolves Jul 18, 2026
@github-actions

Copy link
Copy Markdown
Contributor

🚀 Changeset Version Preview

No changeset entries found. Merging this PR will not cause a version bump for any packages.

@coderabbitai

coderabbitai Bot commented Jul 18, 2026

Copy link
Copy Markdown
Contributor

Review Change Stack

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info
⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: fff86090-40ea-485c-a4f9-ffe585932a18

📥 Commits

Reviewing files that changed from the base of the PR and between 78dbec4 and 092776c.

📒 Files selected for processing (2)
  • packages/preact-query/src/__tests__/usePrefetchQuery.test.tsx
  • packages/react-query/src/__tests__/usePrefetchQuery.test.tsx
🚧 Files skipped from review as they are similar to previous changes (2)
  • packages/react-query/src/tests/usePrefetchQuery.test.tsx
  • packages/preact-query/src/tests/usePrefetchQuery.test.tsx

📝 Walkthrough

Walkthrough

The React and Preact usePrefetchQuery tests now assert that the Loading... Suspense fallback appears immediately after rendering, before fake timers advance and prefetched data resolves.

Changes

Prefetch fallback tests

Layer / File(s) Summary
Initial Suspense fallback validation
packages/preact-query/src/__tests__/usePrefetchQuery.test.tsx, packages/react-query/src/__tests__/usePrefetchQuery.test.tsx
Both tests verify the Loading... fallback before advancing timers in the missing-query-state scenario.

Estimated code review effort: 1 (Trivial) | ~2 minutes

Possibly related PRs

🚥 Pre-merge checks | ✅ 5
✅ Passed checks (5 passed)
Check name Status Explanation
Title check ✅ Passed The title clearly matches the PR's main change: adding an assertion that the Loading fallback renders before prefetch resolves.
Description check ✅ Passed The description follows the required template and includes changes, checklist, and release impact sections with relevant details.
Docstring Coverage ✅ Passed No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
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 docstrings
  • Create stacked PR
  • Commit on current branch
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Commit unit tests in branch test/prefetch-query-loading-fallback-assertion

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

…fallback is rendered before the prefetch resolves
@pkg-pr-new

pkg-pr-new Bot commented Jul 18, 2026

Copy link
Copy Markdown
More templates

@tanstack/angular-query-experimental

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

@tanstack/eslint-plugin-query

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

@tanstack/lit-query

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

@tanstack/preact-query

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

@tanstack/preact-query-devtools

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

@tanstack/preact-query-persist-client

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

@tanstack/query-async-storage-persister

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

@tanstack/query-broadcast-client-experimental

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

@tanstack/query-core

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

@tanstack/query-devtools

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

@tanstack/query-persist-client-core

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

@tanstack/query-sync-storage-persister

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

@tanstack/react-query

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

@tanstack/react-query-devtools

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

@tanstack/react-query-next-experimental

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

@tanstack/react-query-persist-client

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

@tanstack/solid-query

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

@tanstack/solid-query-devtools

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

@tanstack/solid-query-persist-client

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

@tanstack/svelte-query

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

@tanstack/svelte-query-devtools

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

@tanstack/svelte-query-persist-client

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

@tanstack/vue-query

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

@tanstack/vue-query-devtools

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

commit: 092776c

@github-actions

Copy link
Copy Markdown
Contributor

size-limit report 📦

Path Size
react full 12.13 KB (0%)
react minimal 9.08 KB (0%)

@sukvvon
sukvvon merged commit b9c657e into main Jul 18, 2026
9 checks passed
@sukvvon
sukvvon deleted the test/prefetch-query-loading-fallback-assertion branch July 18, 2026 05:47
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