Skip to content
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.

Sign up for GitHub

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

Jump to bottom

useQuery() hook vulnerable to type errors #7530

Open
JK-WP opened this issue Jun 7, 2024 · 2 comments · May be fixed by #8683
Open

useQuery() hook vulnerable to type errors #7530

JK-WP opened this issue Jun 7, 2024 · 2 comments · May be fixed by #8683
Labels
help wanted Extra attention is needed types

Comments

@JK-WP
Copy link

JK-WP commented Jun 7, 2024 •
edited
Loading

Describe the bug

There is a problem with hidden typescript type errors in the useQuery() hook when select is not defined.

Your minimal, reproducible example

Simple 1-line example provided inline

Steps to reproduce

Try compiling the following:

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

Expected behavior

This should produce a type error, since queryResult.data will contain a string, contrary to the declared type of number.

But it compiles cleanly with no type errors detected.

A type error will, however, be detected if a no-op selectFn is provided:

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

How often does this bug happen?

Every time

Screenshots or Videos

No response

Platform

N/A

Tanstack Query adapter

react-query

TanStack Query version

v5.40.1

TypeScript version

v5.2.2

Additional context

One possible avenue of attack might be to switch the template arguments to take the type of the select function instead, and try to infer TData from that. For example (where I've simplified to focus just on the types of interest):

interface MyQueryOptions<TQueryFnData = unknown, TSelect = unknown> {
  queryFn: () => Promise<TQueryFnData>;
  selectFn?: TSelect;
}

interface MyUseQueryResult<TData = unknown> {
  data: TData;
}

declare function useMyQuery<TQueryFnData = unknown, TSelect = unknown>(
  options: MyQueryOptions<TQueryFnData, TSelect>,
): MyUseQueryResult<TSelect extends (data: TQueryFnData) => infer TData ? TData : TQueryFnData>;

function thisHasATypeError(): MyUseQueryResult<number> {
  return useMyQuery({ queryFn: async () => 'not a number' });
}

function thisIsTypeCorrect(): MyUseQueryResult<number> {
  return useMyQuery({ queryFn: async () => 'not a number', selectFn: (s) => Number.parseInt(s) });
}
@TkDodo
Copy link
Collaborator

TkDodo commented Jun 7, 2024

if you know a good way to fix this, please make a PR including type tests. My general recommendation is to use type inference and not slap the UseQueryResult type on your custom hooks. It will also take away some optimizations we do with overloads.

@TkDodo TkDodo added help wanted Extra attention is needed types labels Jun 7, 2024
@skiende74 skiende74 linked a pull request Feb 21, 2025 that will close this issue
Open
@skiende74
Copy link

@TkDodo
I made PR to solve this issue. Can you give me a feedback on this PR? #8683

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
help wanted Extra attention is needed types
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

fix(react-query): fix to show type error on wrong type annotation in useQuery skiende74/query
3 participants
@TkDodo @skiende74 @JK-WP