Skip to content

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

Merged
TkDodo merged 10 commits into
TanStack:mainfrom
skiende74:bug/7530
May 7, 2025
Merged

fix(react-query): fix to show type error on wrong type annotation in useQuery#8683
TkDodo merged 10 commits into
TanStack:mainfrom
skiende74:bug/7530

Conversation

@skiende74

Copy link
Copy Markdown
Contributor

closes#7530

constqueryResult: 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.

@skiende74skiende74 changed the title fix(react-query): Prevent reverse type inference causing no error on wrong type annotation in useQueryfix(react-query): fix no error on wrong type annotation in useQueryFeb 21, 2025
@skiende74skiende74 changed the title fix(react-query): fix no error on wrong type annotation in useQueryfix(react-query): fix no type error on wrong type annotation in useQueryFeb 21, 2025
@skiende74skiende74 changed the title fix(react-query): fix no type error on wrong type annotation in useQueryfix(react-query): fix to show type error on wrong type annotation in useQueryFeb 26, 2025
@skiende74skiende74 changed the title fix(react-query): fix to show type error on wrong type annotation in useQueryfix(react-query): fix to show type error on wrong type annotation in useQueryFeb 28, 2025
Comment threadpackages/react-query/src/useQuery.ts Outdated
return useBaseQuery(options, QueryObserver, queryClient)
}

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

Copy link
Copy Markdown
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
Copy Markdown
ContributorAuthor

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

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

Could you please take another look?

@nx-cloud

nx-cloudBot commented May 6, 2025

Copy link
Copy Markdown

View your CI Pipeline Execution ↗ for commit 568788e.

CommandStatusDurationResult
nx affected --targets=test:sherif,test:knip,tes...✅ Succeeded54sView ↗
nx run-many --target=build --exclude=examples/*...✅ Succeeded2sView ↗

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

@pkg-pr-new

pkg-pr-newBot commented May 6, 2025

Copy link
Copy Markdown
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

manudeli commented May 6, 2025

Copy link
Copy Markdown
Collaborator
image

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

@skiende74

Copy link
Copy Markdown
ContributorAuthor

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

@codecov

codecovBot commented May 6, 2025

Copy link
Copy Markdown

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 
ComponentsCoverage Δ
@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-query95.42% <ø> (ø)
@tanstack/react-query-devtools10.00% <ø> (ø)
@tanstack/react-query-next-experimental∅ <ø> (∅)
@tanstack/react-query-persist-client100.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.

Sign up for freeto 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

@skiende74@manudeli@TkDodo