fix(react-query): update Incorrect Inference of GetDefinedOrUndefinedQueryResult when TData is assignable to CallableFunction
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
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
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 🤷
however I've ensured that I am using the correct version of pnpm
you were definitely using the wrong version, I can see that
lockfileVersionchanged:- 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
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
More templates
- @tanstack/query-example-angular-auto-refetching
- @tanstack/query-example-angular-basic
- @tanstack/query-example-angular-basic-persister
- @tanstack/query-example-angular-devtools-panel
- @tanstack/query-example-angular-infinite-query-with-max-pages
- @tanstack/query-example-angular-optimistic-updates
- @tanstack/query-example-angular-pagination
- @tanstack/query-example-angular-query-options-from-a-service
- @tanstack/query-example-angular-router
- @tanstack/query-example-angular-rxjs
- @tanstack/query-example-angular-simple
- @tanstack/query-example-react-algolia
- @tanstack/query-example-react-auto-refetching
- @tanstack/query-example-react-basic
- @tanstack/query-example-react-basic-graphql-request
- @tanstack/query-example-chat
- @tanstack/query-example-react-default-query-function
- @tanstack/query-example-react-devtools-panel
- @tanstack/query-example-eslint-legacy
- @tanstack/query-example-react-infinite-query-with-max-pages
- @tanstack/query-example-react-load-more-infinite-scroll
- @tanstack/query-example-react-nextjs
- @tanstack/query-example-react-nextjs-app-prefetching
- @tanstack/query-example-nextjs-suspense-streaming
- @tanstack/query-example-react-offline
- @tanstack/query-example-react-optimistic-updates-cache
- @tanstack/query-example-react-optimistic-updates-ui
- @tanstack/query-example-react-pagination
- @tanstack/query-example-react-playground
- @tanstack/query-example-react-prefetching
- @tanstack/query-example-react-react-native
- @tanstack/query-example-react-router
- @tanstack/query-example-react-rick-morty
- @tanstack/query-example-react-shadow-dom
- @tanstack/query-example-react-simple
- @tanstack/query-example-react-star-wars
- @tanstack/query-example-react-suspense
- @tanstack/query-example-solid-astro
- @tanstack/query-example-solid-basic
- @tanstack/query-example-solid-basic-graphql-request
- @tanstack/query-example-solid-default-query-function
- @tanstack/query-example-solid-simple
- @tanstack/query-example-solid-start-streaming
- @tanstack/query-example-svelte-auto-refetching
- @tanstack/query-example-svelte-basic
- @tanstack/query-example-svelte-load-more-infinite-scroll
- @tanstack/query-example-svelte-optimistic-updates
- @tanstack/query-example-svelte-playground
- @tanstack/query-example-svelte-simple
- @tanstack/query-example-svelte-ssr
- @tanstack/query-example-svelte-star-wars
- @tanstack/query-example-vue-2.6-basic
- @tanstack/query-example-vue-2.7-basic
- @tanstack/query-example-vue-basic
- @tanstack/query-example-vue-dependent-queries
- @tanstack/query-example-vue-nuxt3
- @tanstack/query-example-vue-persister
- @tanstack/query-example-vue-simple
@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
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>'.
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.