Skip to content

feat(@tanstack/query): generate type-safe getQueryData helpers#3827

Open
inas-sirhan wants to merge 1 commit intohey-api:mainfrom
inas-sirhan:feat/tanstack-get-query-data
Open

feat(@tanstack/query): generate type-safe getQueryData helpers#3827
inas-sirhan wants to merge 1 commit intohey-api:mainfrom
inas-sirhan:feat/tanstack-get-query-data

Conversation

@inas-sirhan
Copy link
Copy Markdown
Contributor

Summary

  • Adds getQueryData option to all 6 tanstack plugins (react, preact, vue, svelte, solid, angular) that generates a type-safe helper per query operation, wrapping queryClient.getQueryData() with the correct query key and response type.
  • Adds useGetQueryData hook variant for react-query and preact-query that calls useQueryClient() internally and returns the typed getter.
  • Mirrors the design of setQueryData / useSetQueryData from feat(@tanstack/query): generate type-safe setQueryData helpers #3824.

Closes #3826.

Tests

  • Extended the existing react-query "optional fields" scenario to also enable getQueryData and useGetQueryData.
  • Added new "optional fields" scenarios for preact-query, vue-query, svelte-query, solid-query, and angular-query-experimental — these didn't exist before, so this also backfills snapshot coverage for setQueryData on those frameworks.
  • 132 tests passing, 255 snapshots written.

Test plan

  • pnpm tt -- @hey-api/openapi-ts (plugins.test.ts) — all green
  • pnpm typecheck — clean
  • Verified generated output for all 6 plugins via snapshots

Adds type-safe getQueryData helpers to all 6 tanstack plugins (react,
preact, vue, svelte, solid, angular) plus useGetQueryData hook variant
for react-query and preact-query.

Mirrors the setQueryData implementation from hey-api#3824.

Also adds per-plugin "optional fields" test scenarios for preact, vue,
svelte, solid, and angular (previously only react-query was covered),
backfilling snapshot coverage for setQueryData on those frameworks too.

Closes hey-api#3826
@bolt-new-by-stackblitz
Copy link
Copy Markdown

Review PR in StackBlitz Codeflow Run & review this pull request in StackBlitz Codeflow.

@changeset-bot
Copy link
Copy Markdown

changeset-bot Bot commented Apr 26, 2026

🦋 Changeset detected

Latest commit: 16f02c7

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package
Name Type
@hey-api/openapi-ts Patch

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

@vercel
Copy link
Copy Markdown

vercel Bot commented Apr 26, 2026

@inas-sirhan is attempting to deploy a commit to the Hey API Team on Vercel.

A member of the Team first needs to authorize it.

@dosubot dosubot Bot added the size:XS This PR changes 0-9 lines, ignoring generated files. label Apr 26, 2026
@dosubot dosubot Bot added the feature 🚀 Feature request. label Apr 26, 2026
@pullfrog
Copy link
Copy Markdown
Contributor

pullfrog Bot commented Apr 26, 2026

TL;DR — Adds a new getQueryData config option (and a useGetQueryData hook variant for React/Preact) to all six @tanstack/*-query plugins, generating type-safe helpers that wrap queryClient.getQueryData() with the correct query key and response type already wired up.

Key changes

  • Add getQueryData code generator — New createGetQueryData function that emits a typed helper per query operation, accepting a QueryClient and options, and calling queryClient.getQueryData<TResponse>(queryOptions(options).queryKey).
  • Add useGetQueryData hook generator — New createUseGetQueryData function (React/Preact only) that emits a hook calling useQueryClient() internally and returning a typed getter closure.
  • Wire generators into plugin handlerhandlerV5 now conditionally invokes createGetQueryData and createUseGetQueryData based on the resolved config.
  • Add getQueryData config to all six framework plugins — Angular, Preact, React, Solid, Svelte, and Vue query plugins all gain the getQueryData user config and resolved Config type; React and Preact additionally gain useGetQueryData.
  • Add test scenarios for each framework — Six new test cases in plugins.test.ts covering getQueryData (and useGetQueryData where applicable) with updated snapshots across OpenAPI 2.0, 3.0, and 3.1.
  • Add changeset — Patch release for @hey-api/openapi-ts documenting the new options.

Summary | 275 files | 1 commit | base: mainfeat/tanstack-get-query-data


getQueryData helper generation

Before: No built-in way to read cached query data with type safety — consumers had to manually construct the query key and cast the return type.
After: Enabling getQueryData: true generates a helper like fooGetQueryData(queryClient, options) that returns TResponse | undefined with correct types.

The generator in getQueryData.ts follows the same pattern as the existing setQueryData generator: it references the operation's queryOptions function to derive the query key, parameterizes getQueryData with the response type, and skips SSE operations. The option accepts boolean | string | function | object with case, enabled, and name fields, defaulting to the {{name}}GetQueryData naming pattern.

getQueryData.ts · plugin.ts


useGetQueryData hook for React and Preact

Before: Reading cached query data in a React/Preact component required importing useQueryClient and manually calling getQueryData with the right key.
After: Enabling useGetQueryData: true generates a useFooGetQueryData hook that internally calls useQueryClient() and returns a typed getter function.

Only available for @tanstack/react-query and @tanstack/preact-query since these are the frameworks with a useQueryClient hook. The hook returns a closure (options) => queryClient.getQueryData<TResponse>(...) so it can be called lazily in event handlers or effects.

useGetQueryData.ts · react-query/config.ts · preact-query/config.ts


Config and type declarations across all frameworks

Before: The six @tanstack/*-query plugin type/config files had no getQueryData option.
After: Each plugin's UserConfig type exposes getQueryData? (and useGetQueryData? for React/Preact), and each plugin's Config type includes the resolved getQueryData: NamingOptions & FeatureToggle.

The config resolution logic is identical across all six frameworks — context.valueToObject with the same default value ({ case, enabled: false, name: '{{name}}GetQueryData' }) and mappers.

angular-query/types.ts · solid-query/types.ts · vue-query/types.ts · svelte-query/types.ts

Pullfrog  | View workflow run | via Pullfrog𝕏

Copy link
Copy Markdown
Contributor

@pullfrog pullfrog Bot left a comment

Choose a reason for hiding this comment

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

Reviewed — no issues found.

The implementation cleanly mirrors the existing setQueryData/useSetQueryData pattern with the correct semantic differences: no updater parameter and an explicit .generic(typeResponse) annotation (since TanStack's getQueryData<TData>() requires a type parameter rather than inferring from an argument). Config resolution, guard checks, naming conventions, type definitions, and plugin.ts wiring are all consistent across all 6 frameworks. useGetQueryData is correctly restricted to react-query and preact-query only.

Task list (4/4 completed)
  • Checkout PR and read the diff
  • Investigate key areas of change in depth
  • Self-critique and finalize comments
  • Submit review

Pullfrog  | View workflow run𝕏

@codecov
Copy link
Copy Markdown

codecov Bot commented Apr 26, 2026

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 39.40%. Comparing base (f3b6ff3) to head (16f02c7).

Additional details and impacted files
@@            Coverage Diff             @@
##             main    #3827      +/-   ##
==========================================
- Coverage   39.57%   39.40%   -0.17%     
==========================================
  Files         532      534       +2     
  Lines       19544    19628      +84     
  Branches     5811     5834      +23     
==========================================
  Hits         7734     7734              
- Misses       9568     9643      +75     
- Partials     2242     2251       +9     
Flag Coverage Δ
unittests 39.40% <ø> (-0.17%) ⬇️

Flags with carried forward coverage won't be shown. Click here to find out more.

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:
  • ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
  • 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

@pkg-pr-new
Copy link
Copy Markdown

pkg-pr-new Bot commented Apr 26, 2026

Open in StackBlitz

@hey-api/codegen-core

npm i https://pkg.pr.new/@hey-api/codegen-core@3827

@hey-api/json-schema-ref-parser

npm i https://pkg.pr.new/@hey-api/json-schema-ref-parser@3827

@hey-api/nuxt

npm i https://pkg.pr.new/@hey-api/nuxt@3827

@hey-api/openapi-ts

npm i https://pkg.pr.new/@hey-api/openapi-ts@3827

@hey-api/shared

npm i https://pkg.pr.new/@hey-api/shared@3827

@hey-api/spec-types

npm i https://pkg.pr.new/@hey-api/spec-types@3827

@hey-api/types

npm i https://pkg.pr.new/@hey-api/types@3827

@hey-api/vite-plugin

npm i https://pkg.pr.new/@hey-api/vite-plugin@3827

commit: 16f02c7

@mrlubos
Copy link
Copy Markdown
Member

mrlubos commented Apr 28, 2026

@inas-sirhan I moved TanStack Query plugin tests into a separate project just like the rest. Can you resolve the conflicts please?

@inas-sirhan
Copy link
Copy Markdown
Contributor Author

@mrlubos On it!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

feature 🚀 Feature request. size:XS This PR changes 0-9 lines, ignoring generated files.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

@tanstack/query: generate type-safe getQueryData helpers

2 participants