Skip to content

fix(react-query): fix to show type error on wrong type annotation in useQuery #8683

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 10 commits into from
May 7, 2025

Conversation

skiende74
Copy link
Contributor

closes #7530

 const queryResult: UseQueryResult<number> = useQuery({
    queryKey: ['key'],
    queryFn: async () => 'not a number',
  });

This should produce a type error because the correct type for queryResult should be UseQueryResult<string>.
Previously, due to reverse type inference from the return type context, no error was detected when using the wrong type annotation.

This PR prevents reverse type inference from the result type annotation, ensuring that incorrect type annotations are caught as type errors.

@skiende74 skiende74 changed the title fix(react-query): Prevent reverse type inference causing no error on wrong type annotation in useQuery fix(react-query): fix no error on wrong type annotation in useQuery Feb 21, 2025
@skiende74 skiende74 changed the title fix(react-query): fix no error on wrong type annotation in useQuery fix(react-query): fix no type error on wrong type annotation in useQuery Feb 21, 2025
@skiende74 skiende74 changed the title fix(react-query): fix no type error on wrong type annotation in useQuery fix(react-query): fix to show type error on wrong type annotation in useQuery Feb 26, 2025
@skiende74 skiende74 changed the title fix(react-query): fix to show type error on wrong type annotation in useQuery fix(react-query): fix to show type error on wrong type annotation in useQuery Feb 28, 2025

export function useQuery(options: UseQueryOptions, queryClient?: QueryClient) {
return useBaseQuery(options, QueryObserver, queryClient)
}

type NoInfer<T> = [T][T extends any ? 0 : never]
Copy link
Collaborator

Choose a reason for hiding this comment

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

we already have a NoInfer util, you should be able to import it from the query-core package

@skiende74
Copy link
Contributor Author

Thanks for your review, @TkDodo!
I’ve updated the import to:

import { NoInfer } from 'query-core/util';

Could you please take another look?

Copy link

nx-cloud bot commented May 6, 2025

View your CI Pipeline Execution ↗ for commit 568788e.

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

☁️ Nx Cloud last updated this comment at 2025-05-06 23:08:23 UTC

Copy link

pkg-pr-new bot commented May 6, 2025

More templates

@tanstack/angular-query-devtools-experimental

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

@tanstack/angular-query-experimental

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

@tanstack/eslint-plugin-query

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

@tanstack/query-async-storage-persister

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

@tanstack/query-broadcast-client-experimental

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

@tanstack/query-core

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

@tanstack/query-devtools

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

@tanstack/query-persist-client-core

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

@tanstack/query-sync-storage-persister

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

@tanstack/react-query

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

@tanstack/react-query-devtools

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

@tanstack/react-query-next-experimental

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

@tanstack/react-query-persist-client

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

@tanstack/solid-query

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

@tanstack/solid-query-devtools

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

@tanstack/solid-query-persist-client

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

@tanstack/svelte-query

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

@tanstack/svelte-query-devtools

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

@tanstack/svelte-query-persist-client

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

@tanstack/vue-query

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

@tanstack/vue-query-devtools

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

commit: 568788e

@manudeli
Copy link
Collaborator

manudeli commented May 6, 2025

image

@skiende74 Resolve eslint error in /packages/react-query/src/tests/useQuery.test-d.tsx please

@skiende74
Copy link
Contributor Author

@manudeli
I’ve resolved the ESLint error. Could you please take another look? Thanks!

Copy link

codecov bot commented May 6, 2025

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 84.22%. Comparing base (732089e) to head (568788e).
Report is 1 commits behind head on main.

Additional details and impacted files

Impacted file tree graph

@@             Coverage Diff             @@
##             main    #8683       +/-   ##
===========================================
+ Coverage   44.53%   84.22%   +39.68%     
===========================================
  Files         204       26      -178     
  Lines        8150      374     -7776     
  Branches     1820      111     -1709     
===========================================
- Hits         3630      315     -3315     
+ Misses       4077       50     -4027     
+ Partials      443        9      -434     
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 95.42% <ø> (ø)
@tanstack/react-query-devtools 10.00% <ø> (ø)
@tanstack/react-query-next-experimental ∅ <ø> (∅)
@tanstack/react-query-persist-client 100.00% <ø> (ø)
@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 ∅ <ø> (∅)
@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.

@TkDodo TkDodo merged commit 373546b into TanStack:main May 7, 2025
7 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

useQuery() hook vulnerable to type errors
3 participants