fix(vue-query): move `queryOptions` and `useQuery` function overloads by romansp · Pull Request #9088 · TanStack/query

romansp · 2025-04-29T21:23:47Z

Fixes #9069. Unfortunately solutions from #9073 and #9077 didn't fully resolve the original issue.

I looked at what react-query does to ensure correct type safety for 4 different cases of initialData. These are: undefined, T, () => T, () => T | undefined and how come we're seeing troubles with type inference in vue-query.

So what I noticed is that react version declares overloads of useQuery and queryOptions where initialData is defined before the ones where initialData is undefined. But overload ordering matters. In a nutshell, more specific overload should come before a more general one. Vue was doing the opposite where defined initialData overloads are declared later which caused TypeScript to pick the wrong overload instead. That was causing both forbidding of undefined in function returns and leaving undefined in type union for data.

So I changed type declarations to align with react-query types. And it looks to be working as expected now.

I also copied initialData type test cases from useQuery into queryOptions to verify that when query is using queryOptions API then data types are still inferred correctly.

… useQuery to come before general ones (TanStack#9069) This instructs TypeScript to pick correct function overload when initialData is defined.

nx-cloud · 2025-04-29T21:49:06Z

View your CI Pipeline Execution ↗ for commit 835d48c.

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

☁️ Nx Cloud last updated this comment at 2025-04-29 21:53:26 UTC

pkg-pr-new · 2025-04-29T21:52:53Z

More templates

@tanstack/angular-query-devtools-experimental

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

@tanstack/angular-query-experimental

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

@tanstack/eslint-plugin-query

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

@tanstack/query-async-storage-persister

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

@tanstack/query-broadcast-client-experimental

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

@tanstack/query-core

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

@tanstack/query-devtools

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

@tanstack/query-persist-client-core

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

@tanstack/query-sync-storage-persister

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

@tanstack/react-query

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

@tanstack/react-query-devtools

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

@tanstack/react-query-next-experimental

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

@tanstack/react-query-persist-client

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

@tanstack/solid-query

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

@tanstack/solid-query-devtools

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

@tanstack/solid-query-persist-client

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

@tanstack/svelte-query

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

@tanstack/svelte-query-devtools

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

@tanstack/svelte-query-persist-client

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

@tanstack/vue-query

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

@tanstack/vue-query-devtools

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

commit: 835d48c

codecov · 2025-04-29T21:53:41Z

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 71.10%. Comparing base (3111e8a) to head (835d48c).
Report is 9 commits behind head on main.

Additional details and impacted files

@@             Coverage Diff             @@
##             main    #9088       +/-   ##
===========================================
+ Coverage   44.56%   71.10%   +26.53%     
===========================================
  Files         203       19      -184     
  Lines        8101      481     -7620     
  Branches     1803      136     -1667     
===========================================
- Hits         3610      342     -3268     
+ Misses       4059      109     -3950     
+ Partials      432       30      -402

Components	Coverage Δ
@tanstack/angular-query-devtools-experimental	`∅ <ø> (∅)`
@tanstack/angular-query-experimental	`∅ <ø> (∅)`
@tanstack/eslint-plugin-query	`∅ <ø> (∅)`
@tanstack/query-async-storage-persister	`∅ <ø> (∅)`
@tanstack/query-broadcast-client-experimental	`∅ <ø> (∅)`
@tanstack/query-codemods	`∅ <ø> (∅)`
@tanstack/query-core	`∅ <ø> (∅)`
@tanstack/query-devtools	`∅ <ø> (∅)`
@tanstack/query-persist-client-core	`∅ <ø> (∅)`
@tanstack/query-sync-storage-persister	`∅ <ø> (∅)`
@tanstack/react-query	`∅ <ø> (∅)`
@tanstack/react-query-devtools	`∅ <ø> (∅)`
@tanstack/react-query-next-experimental	`∅ <ø> (∅)`
@tanstack/react-query-persist-client	`∅ <ø> (∅)`
@tanstack/solid-query	`∅ <ø> (∅)`
@tanstack/solid-query-devtools	`∅ <ø> (∅)`
@tanstack/solid-query-persist-client	`∅ <ø> (∅)`
@tanstack/svelte-query	`∅ <ø> (∅)`
@tanstack/svelte-query-devtools	`∅ <ø> (∅)`
@tanstack/svelte-query-persist-client	`∅ <ø> (∅)`
@tanstack/vue-query	`71.10% <ø> (ø)`
@tanstack/vue-query-devtools	`∅ <ø> (∅)`

🚀 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.

ss0526100 · 2025-05-01T13:25:05Z

Could you check out this PR and take a look at useQuery.test-d.ts in vue-query?

In this PR, I tested all possible combinations of initialData.
However, no issues were found.

From what I can tell, the problem seems to be in queryOptions.

romansp · 2025-05-01T23:28:18Z

@ss0526100 Yes, if I understand correctly the issue comes specifically from combining queryOptions with useQuery.

Because there are 2 layers of function type overloads these should be declared in correct order otherwise DefinedInitialQueryOptions by queryOptions maps to UndefinedInitialQueryOptions in useQuery and vice-versa.

ss0526100 · 2025-05-02T08:47:53Z

~~I implemented the test for queryOptions as well and identified issues.~~

~~I rebased to the branch suggested in the PR and applied it to queryOptions and useQuery.~~
~~Refer to queryOptions.test-d.ts in the this branch.~~
~~(Note: Do not include the tests from this branch, as they may significantly slow down CI/CD.)~~

~~The following issues were found:~~

~~queryOptions:~~
~~1. When initialData is an optional property, it cannot be assigned to the argument.~~
~~2. When initialData is a required property and is undefined, () => undefined, TData | undefined, or () => TData | undefined, it cannot be assigned to the argument.~~

Sorry, I was mistaken.
It works well

github-actions Bot added the package: vue-query label Apr 29, 2025

fix(vue-query): more specific function overloads for queryOptions and…

f48877e

… useQuery to come before general ones (TanStack#9069) This instructs TypeScript to pick correct function overload when initialData is defined.

romansp force-pushed the fix/9069-undefined-initial-data-types branch from bba7782 to f48877e Compare April 29, 2025 21:34

ci: apply automated fixes

835d48c

romansp changed the title ~~Move queryOptions and useQuery function overloads~~ fix(vue-query): move queryOptions and useQuery function overloads Apr 29, 2025

DamianOsipiuk merged commit a535a46 into TanStack:main May 2, 2025
7 checks passed

romansp deleted the fix/9069-undefined-initial-data-types branch May 2, 2025 16:52

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

fix(vue-query): move `queryOptions` and `useQuery` function overloads #9088

fix(vue-query): move `queryOptions` and `useQuery` function overloads #9088
DamianOsipiuk merged 2 commits intoTanStack:mainfrom
romansp:fix/9069-undefined-initial-data-types

romansp commented Apr 29, 2025 •

edited

Loading

Uh oh!

nx-cloud Bot commented Apr 29, 2025 •

edited

Loading

Uh oh!

pkg-pr-new Bot commented Apr 29, 2025

Uh oh!

codecov Bot commented Apr 29, 2025 •

edited

Loading

Uh oh!

ss0526100 commented May 1, 2025 •

edited

Loading

Uh oh!

romansp commented May 1, 2025

Uh oh!

ss0526100 commented May 2, 2025 •

edited

Loading

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Uh oh!

Conversation

romansp commented Apr 29, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

nx-cloud Bot commented Apr 29, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

pkg-pr-new Bot commented Apr 29, 2025

Uh oh!

codecov Bot commented Apr 29, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codecov Report

Uh oh!

ss0526100 commented May 1, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

romansp commented May 1, 2025

Uh oh!

ss0526100 commented May 2, 2025 • 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!

3 participants

romansp commented Apr 29, 2025 •

edited

Loading

nx-cloud Bot commented Apr 29, 2025 •

edited

Loading

codecov Bot commented Apr 29, 2025 •

edited

Loading

ss0526100 commented May 1, 2025 •

edited

Loading

ss0526100 commented May 2, 2025 •

edited

Loading