query icon indicating copy to clipboard operation
query copied to clipboard

fix(react-query): update Incorrect Inference of GetDefinedOrUndefinedQueryResult when TData is assignable to CallableFunction

Open ViewableGravy opened this issue 7 months ago • 7 comments

Overview

This PR resolves an issue that was brought up in discord where using queryOptions where TQueryFnData was { name: string }, would cause the type of TData on useQueries to be { name: string } instead of { name: string } | undefined.

Upon further investigation into what was causing this, it looks like because InitialData is assignabled to { name: string } when it is a function (since name is a key on CallableFunction in typescript), the type would assume the wrong pathway in the GetDefinedOrUndefinedQueryResult type, resulting in the incorrect return type.

Changing the initial condition from T extends { initialData?: ... } to T extends { initialData: ... } allows us to avoid hitting that pathway altogether and gives the correct type.

Tests

I have updated the tests to ensure this case is correctly tested against, and ensured that existing tests are not affected. I have also slightly restructured the tests specifically testing queryOptions under a describe for better code organization.

Original Issue

Discord Thread: https://discord.com/channels/719702312431386674/1382540005624512532

ViewableGravy avatar Jun 14 '25 12:06 ViewableGravy

I can see that my pnpm.lock file shows a large number of changes - however I've ensured that I am using the correct version of pnpm and made sure to run pnpm install directly from the root of the project, so I am unsure why this is the case against master.

Please let me know if I should revert the lock file change, as this should not affect this PR with or without it.

Noting that running pnpm build:all also fails against vue - this change only affects react-query

ViewableGravy avatar Jun 14 '25 12:06 ViewableGravy

however I've ensured that I am using the correct version of pnpm

you were definitely using the wrong version, I can see that lockfileVersion changed:

- lockfileVersion: '9.0'
+ lockfileVersion: '6.0'

so yeah, definitely the wrong version of pnpm. Please revert, not sure why you’d even commit lockfile changes if you didn’t touch package.json 🤷

TkDodo avatar Jun 19 '25 11:06 TkDodo

however I've ensured that I am using the correct version of pnpm

you were definitely using the wrong version, I can see that lockfileVersion changed:

- lockfileVersion: '9.0'
+ lockfileVersion: '6.0'

so yeah, definitely the wrong version of pnpm. Please revert, not sure why you’d even commit lockfile changes if you didn’t touch package.json 🤷

Sorry about the time waste here. I just shouldn't have committed it in the first place. I've reverted that change now

ViewableGravy avatar Jun 19 '25 22:06 ViewableGravy

View your CI Pipeline Execution ↗ for commit 3250700bddea5103c39826948192f7e4c651416a.

Command Status Duration Result
nx affected --targets=test:sherif,test:knip,tes... ❌ Failed 1h 59m 25s View ↗
nx run-many --target=build --exclude=examples/*... ✅ Succeeded 28s View ↗

☁️ Nx Cloud last updated this comment at 2025-06-20 17:45:16 UTC

nx-cloud[bot] avatar Jun 20 '25 13:06 nx-cloud[bot]

More templates

@tanstack/angular-query-devtools-experimental

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

npm i https://pkg.pr.new/@tanstack/angular-query-experimental@9278
@tanstack/eslint-plugin-query

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

npm i https://pkg.pr.new/@tanstack/query-async-storage-persister@9278
@tanstack/query-broadcast-client-experimental

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

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

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

npm i https://pkg.pr.new/@tanstack/query-persist-client-core@9278
@tanstack/query-sync-storage-persister

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

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

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

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

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

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

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

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

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

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

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

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

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

commit: 3250700

pkg-pr-new[bot] avatar Jun 20 '25 13:06 pkg-pr-new[bot]

we now have a bunch of type errors:

../react-query/src/__tests__/useQueries.test-d.tsx(96,13): error TS2322: Type '{ name: string; }' is not assignable to type 'Promise<Data>'.
  Object literal may only specify known properties, and 'name' does not exist in type 'Promise<Data>'.

TkDodo avatar Jun 20 '25 18:06 TkDodo

we now have a bunch of type errors:

../react-query/src/__tests__/useQueries.test-d.tsx(96,13): error TS2322: Type '{ name: string; }' is not assignable to type 'Promise<Data>'.
  Object literal may only specify known properties, and 'name' does not exist in type 'Promise<Data>'.

Didn't get around to this one on the weekend, I'll look into this during the week.

ViewableGravy avatar Jun 23 '25 00:06 ViewableGravy