test(query-devtools/Devtools): add test for rendering a hydrated query with a custom hash function by ckdwns9121 · Pull Request #11055 · TanStack/query · GitHub

Summary

add integration coverage for Devtools rendering a hydrated query that uses a per-query custom queryKeyHashFn
exercise the complete fetchQuery → dehydrate → new client → hydrate → Devtools query-row path
guard the direct queryHash cache lookup introduced in Fix devtools query rows with mutable keys #10750

Context

Issue #6958 reported that Devtools stopped displaying persisted queries when one of them used a custom hash function. Devtools previously looked query rows up again by queryKey, which could not reproduce a per-query hash function after hydration.

The runtime lookup was changed to queryCache.get(queryHash) in #10750, but the persistence and custom-hash combination was not covered. This regression test verifies the original failure path end to end and allows #6958 to be closed against the shipped implementation.

Closes #6958.

Validation

pnpm --filter @tanstack/query-devtools test:lib --run src/__tests__/Devtools.test.tsx (72 tests)
pnpm --filter @tanstack/query-devtools test:lib --run (246 tests)
pnpm --filter @tanstack/query-devtools test:eslint
pnpm --filter @tanstack/query-devtools test:types:tscurrent
pnpm prettier --write packages/query-devtools/src/__tests__/Devtools.test.tsx

Summary by CodeRabbit

Tests
- Added coverage to verify that the Devtools query list correctly displays hydrated queries when a custom query-key hashing function is used.

Exercise the full dehydrate, hydrate, and query-row rendering path for a per-query custom queryKeyHashFn. This locks the queryHash lookup behavior introduced by TanStack#10750 and covers the persistence failure reported in TanStack#6958. Constraint: The runtime lookup fix already shipped in TanStack#10750 Rejected: Reapply queryCache.get changes | current main already contains the implementation Confidence: high Scope-risk: narrow Tested: query-devtools 246 tests; ESLint; TypeScript current; Prettier Related: TanStack#6958

📝 Walkthrough

Walkthrough

The devtools test suite validates that a query using a custom queryKeyHashFn remains visible after dehydration and hydration into a newly created QueryClient.

Changes

Devtools hydration coverage

Layer / File(s)	Summary
Hydrated query list test packages/query-devtools/src/__tests__/Devtools.test.tsx	Adds dehydrate and hydrate imports and tests rendering a rehydrated custom-hash query in the devtools panel.

Estimated code review effort: 2 (Simple) | ~10 minutes

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Description check	⚠️ Warning	The description covers the change, context, and validation, but it omits the template's Checklist and Release Impact sections.	Add the required Checklist and Release Impact sections, and fill in the relevant checkboxes or clearly mark the change as docs/CI/dev-only.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Linked Issues check	✅ Passed	The added test covers the hydrated Devtools path with a custom queryKeyHashFn, matching the async persistence regression in #6958.
Out of Scope Changes check	✅ Passed	The diff only adds a targeted regression test, with no apparent unrelated or out-of-scope changes.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Title check	✅ Passed	The title clearly describes the main change: adding a test for a hydrated query using a custom hash function.

✨ Finishing Touches 🧪 Generate unit tests (beta)

Create PR with unit tests

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

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

View your CI Pipeline Execution ↗ for commit 7f10573

Command	Status	Duration	Result
nx run-many --target=build --exclude=examples/*...	✅ Succeeded	28s	View ↗

☁️ Nx Cloud last updated this comment at 2026-07-26 16:36:06 UTC

More templates

@tanstack/angular-query-experimental

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

@tanstack/eslint-plugin-query

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

@tanstack/lit-query

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

@tanstack/preact-query

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

@tanstack/preact-query-devtools

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

@tanstack/preact-query-persist-client

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

@tanstack/query-async-storage-persister

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

@tanstack/query-broadcast-client-experimental

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

@tanstack/query-core

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

@tanstack/query-devtools

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

@tanstack/query-persist-client-core

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

@tanstack/query-sync-storage-persister

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

@tanstack/react-query

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

@tanstack/react-query-devtools

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

@tanstack/react-query-next-experimental

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

@tanstack/react-query-persist-client

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

@tanstack/solid-query

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

@tanstack/solid-query-devtools

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

@tanstack/solid-query-persist-client

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

@tanstack/svelte-query

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

@tanstack/svelte-query-devtools

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

@tanstack/svelte-query-persist-client

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

@tanstack/vue-query

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

@tanstack/vue-query-devtools

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

commit: 7f10573

…sistency and remove redundant 'clear'

… end of 'query list'

…'when X' convention

ckdwns9121 marked this pull request as ready for review July 13, 2026 05:49

sukvvon added 4 commits July 27, 2026 01:12

Merge branch 'main' into agent/cover-devtools-custom-query-hash

3a9aa4a

test(query-devtools/Devtools): use 'advanceTimersByTimeAsync' for con…

be1c0f0

…sistency and remove redundant 'clear'

test(query-devtools/Devtools): move custom-hash hydration test to the…

9c54f6f

… end of 'query list'

test(query-devtools/Devtools): align custom-hash test title with the …

7f10573

…'when X' convention

sukvvon changed the title test(query-devtools): cover restored custom-hash queries test(query-devtools): cover rendering hydrated queries with a custom hash function Jul 26, 2026

sukvvon changed the title test(query-devtools): cover rendering hydrated queries with a custom hash function test(query-devtools/Devtools): add test for rendering a hydrated query with a custom hash function Jul 26, 2026

sukvvon approved these changes Jul 26, 2026

View reviewed changes

sukvvon merged commit e396148 into TanStack:main Jul 26, 2026
11 of 12 checks passed

This was referenced Aug 7, 2026

perf(devtools): stop the panel freezing on caches with thousands of queries #11150

Open

perf: use stable-hash for hashing keys #11073

Open

test(query-devtools/Devtools): add test for rendering a hydrated query with a custom hash function by ckdwns9121 · Pull Request #11055 · TanStack/query · GitHub

Uh oh!

Uh oh!

test(query-devtools/Devtools): add test for rendering a hydrated query with a custom hash function - #11055

test(query-devtools/Devtools): add test for rendering a hydrated query with a custom hash function#11055
sukvvon merged 5 commits into
TanStack:mainfrom
ckdwns9121:agent/cover-devtools-custom-query-hash

ckdwns9121 commented Jul 12, 2026 •
edited by coderabbitai Bot
Loading

Uh oh!

Uh oh!

coderabbitai Bot commented Jul 12, 2026 •
edited
Loading

Uh oh!

Uh oh!

nx-cloud Bot commented Jul 26, 2026 •
edited
Loading

Uh oh!

Uh oh!

pkg-pr-new Bot commented Jul 26, 2026 •
edited
Loading

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

test(query-devtools/Devtools): add test for rendering a hydrated query with a custom hash function by ckdwns9121 · Pull Request #11055 · TanStack/query · GitHub

Uh oh!

Uh oh!

test(query-devtools/Devtools): add test for rendering a hydrated query with a custom hash function - #11055

Conversation

ckdwns9121 commented Jul 12, 2026 • edited by coderabbitai Bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Context

Validation

Summary by CodeRabbit

Uh oh!

coderabbitai Bot commented Jul 12, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Walkthrough

Changes

❌ Failed checks (1 warning)

Uh oh!

nx-cloud Bot commented Jul 26, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

pkg-pr-new Bot commented Jul 26, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

ckdwns9121 commented Jul 12, 2026 •
edited by coderabbitai Bot
Loading

coderabbitai Bot commented Jul 12, 2026 •
edited
Loading

nx-cloud Bot commented Jul 26, 2026 •
edited
Loading

pkg-pr-new Bot commented Jul 26, 2026 •
edited
Loading