Type inference fail to report error on queryFn return if TData is different in onSuccess/generic types

[mbret]

Describe the bug

If I manually set a type on the generic useQuery<> or on the onSuccess callback typescript will not fail regarding of what is returned by the actual query function. It should fail and prevent returning something wrong when we type the query elsewhere

Your minimal, reproducible example

https://stackblitz.com/edit/vitejs-vite-vspsam?file=src%2FApp.tsx,src%2Fmain.tsx&terminal=dev

Steps to reproduce

Go to https://stackblitz.com/edit/vitejs-vite-vspsam?file=src%2FApp.tsx,src%2Fmain.tsx&terminal=dev and check the code

Expected behavior

typescript should fail

How often does this bug happen?

Every time

Screenshots or Videos

No response

Platform

all

TanStack Query version

4.20.9

TypeScript version

4.9.4

Additional context

No response

[TkDodo]

  // infered result is number because we typed on generic
  // the query however return invalid type and ts does not fail
  useQuery<unknown, unknown, number>(
    ['foo'],
    () => 'I SHOULD NOT BE ALLOWED AS A RESULT'
  );

the first generic is the return type of queryFn. If you set that to number, you get the error you want:

  useQuery<number, unknown, number>(
    ['foo'],
    () => 'I SHOULD NOT BE ALLOWED AS A RESULT'
  );

---

  // infered result is number because we typed onSuccess
  // the query however return invalid type and ts does not fail
  useQuery(['foo'], () => 'I SHOULD NOT BE ALLOWED AS A RESULT', {
    onSuccess: (data: number) => {},
  });

the inferred type here is:

useQuery<string, unknown, number, string[]>

so the queryFn returns string and your data attribute is number. Usually, the 3rd generic will be inferred from the select function. If you manually annotate the param passed to onSuccess, it seems to also set this value. Not sure if we can make typescript smart enough to only infer the type from select, or to make select required if the 1st and 3rd generic have different types.

My suggestion is to just not annotate the types in onSuccess but let them be inferred.

[mbret]

Indeed my bad I made a mistake and switched generic type. By using the first one it does indeed throw an error.

My suggestion is to just not annotate the types in onSuccess but let them be inferred.

I think everyone would prefer that over typing manually but it's unfortunately not always easy to infer. In our case we have functions that wraps queries and we had to type some options being passed down to the query. Of couse now that we are aware of this limitation we will use generic type to enforce it. That being said, it could be easy to not notice the lack of type check and make a breaking change in your code.

Not sure if we can make typescript smart enough to only infer the type from select, or to make select required if the 1st and 3rd generic have different types.

Yeah I m not sure either, it looks like ts is more permissive in this case because we are typing a function that is normally inferred from generic parameters. I wonder if it's a known limitation

[TkDodo]

I think everyone would prefer that over typing manually but it's unfortunately not always easy to infer.

instead of typing onSuccess, add an explicit return type to the queryFn. The rest will be inferred from there:

useQuery({
  queryKey,
  queryFn: (): Promise<MyDataType> => myAPIService.getSomeData(),
  onSuccess: (data) => {
    // data will be of type MyDataType here
  }
}