Skip to content

docs(react-query): add caveat for typing getQueriesData#9684

Merged
TkDodo merged 1 commit intoTanStack:mainfrom
camjackson:patch-1
Sep 24, 2025
Merged

docs(react-query): add caveat for typing getQueriesData#9684
TkDodo merged 1 commit intoTanStack:mainfrom
camjackson:patch-1

Conversation

@camjackson
Copy link
Copy Markdown
Contributor

@camjackson camjackson commented Sep 24, 2025 •
edited by lachlancollins
Loading

🎯 Changes

The docs explain how to use queryOptions to get nice type inference on queries. It explicitly calls out how the type gets attached to the queryKey, so that even queryClient.getQueryData() (which just accepts the queryKey and not the full options with the queryFn can infer the type of the returned data.

I was surprised to discover that this does not work for the plural equivalent queryClient.getQueriesData(). I went to open a bug, and found #8613, which directed me to the docs for this method, which do explain why this does not work.

I think it would be good to add the same caveat to the section of the docs where the trick is explained. That's what this PR does. The intention is for the docs to say "here's how to do it, here's a special bonus where you might not think it works but does, and here's a different special case where it does not work".

✅ Checklist

  • I have followed the steps in the Contributing guide.
  • I have tested this code locally with pnpm 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

  • Documentation
    • Clarifies that type inference from per-query options doesn’t apply when fetching multiple query results; aggregated results may be typed as unknown.
    • Adds an example showing how to explicitly specify the return type when retrieving multiple results.
    • Updates guidance to highlight this limitation and the explicit-typing workaround; no API or type changes.

@github-actions github-actions Bot added the documentation Improvements or additions to documentation label Sep 24, 2025
@coderabbitai
Copy link
Copy Markdown
Contributor

coderabbitai Bot commented Sep 24, 2025 •
edited
Loading

Walkthrough

Clarifies in the React TypeScript docs that type inference from queryOptions does not apply to queryClient.getQueriesData (it can return multiple types), and shows using an explicit generic (e.g., getQueriesData<Group>()) to opt into a specific type.

Changes

Cohort / File(s) Summary of Changes
Docs: React TypeScript guide
docs/framework/react/typescript.md		 Added a note clarifying that queryOptions type inference doesn't affect queryClient.getQueriesData (which may return multiple types) and added an explicit-generic example (getQueriesData<Group>(...)) plus surrounding narrative updates describing the limitation and opt-in approach.

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~2 minutes

Poem

I twitch my whiskers, mark the line,
A tiny note to keep types fine.
When queries blend and types divide,
Call out a generic, let truth abide.
Hops of clarity — docs now wide. 🐇✨

Pre-merge checks and finishing touches

✅ Passed checks (3 passed)
Check name Status Explanation
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Title Check ✅ Passed The title concisely and accurately summarizes the primary change: adding a documentation caveat about typing getQueriesData in the React Query docs. It is specific, focused, and free of extraneous information, so a reviewer can understand the PR's intent at a glance.
Docstring Coverage ✅ Passed No functions found in the changes. Docstring coverage check skipped.
✨ Finishing touches
🧪 Generate unit tests
  • Create PR with unit tests
  • Post copyable unit tests in a comment
📜 Recent review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 084dcb7 and 6fb352b.

📒 Files selected for processing (1)
  • docs/framework/react/typescript.md (1 hunks)
🚧 Files skipped from review as they are similar to previous changes (1)
  • docs/framework/react/typescript.md

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 and usage tips.

@camjackson camjackson mentioned this pull request Sep 24, 2025
Closed
coderabbitai[bot]
coderabbitai Bot reviewed Sep 24, 2025
View reviewed changes
Copy link
Copy Markdown
Contributor

@coderabbitai coderabbitai Bot left a comment

Choose a reason for hiding this comment

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

Actionable comments posted: 1

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 4d8da1e and ca764c9.

📒 Files selected for processing (1)
  • docs/framework/react/typescript.md (1 hunks)

Comment thread docs/framework/react/typescript.md Outdated
@nx-cloud
Copy link
Copy Markdown

nx-cloud Bot commented Sep 24, 2025 •
edited
Loading

View your CI Pipeline Execution ↗ for commit 6fb352b

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

☁️ Nx Cloud last updated this comment at 2025-09-24 12:38:59 UTC

@pkg-pr-new
Copy link
Copy Markdown

pkg-pr-new Bot commented Sep 24, 2025

More templates

@tanstack/angular-query-experimental

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

@tanstack/eslint-plugin-query

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

@tanstack/query-async-storage-persister

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

@tanstack/query-broadcast-client-experimental

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

@tanstack/query-core

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

@tanstack/query-devtools

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

@tanstack/query-persist-client-core

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

@tanstack/query-sync-storage-persister

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

@tanstack/react-query

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

@tanstack/react-query-devtools

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

@tanstack/react-query-next-experimental

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

@tanstack/react-query-persist-client

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

@tanstack/solid-query

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

@tanstack/solid-query-devtools

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

@tanstack/solid-query-persist-client

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

@tanstack/svelte-query

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

@tanstack/svelte-query-devtools

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

@tanstack/svelte-query-persist-client

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

@tanstack/vue-query

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

@tanstack/vue-query-devtools

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

commit: 6fb352b

@TkDodo TkDodo merged commit cd29063 into TanStack:main Sep 24, 2025
6 checks passed
@camjackson camjackson deleted the patch-1 branch September 24, 2025 12:44
Hellol77 pushed a commit to Hellol77/query that referenced this pull request Oct 14, 2025
@camjackson @Hellol77
docs(react-query): add caveat for typing getQueriesData (TanStack#9684)
ef7d6e1
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@coderabbitai coderabbitai[bot] coderabbitai[bot] left review comments

Assignees

No one assigned

Labels

documentation Improvements or additions to documentation

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

2 participants

@camjackson @TkDodo