Typescript 5.4.5 and useInfiniteQuery requires avoidable type annotations

[izkrivera]

Describe the bug

When using the latest Typescript and latest React Query, useInfiniteQuery requires convoluted type annotations to avoid errors. These should not be necessary and should be inferred by the compiler. Specifically, the configuration option initialPageParam should infer it's type by assignment, but it does not and infers unknown unless verbose typing is declared at the useInfiniteQuery call. This behavior is illustrated in the linked Playground example. Note the:

useInfiniteQuery<Post[]>({

vs

useInfiniteQuery<Post[], Error, InfiniteData<Post[]>, QueryKey, number>({

The first is used in many online tutorials with apparently no error marks, but I can only get rid of the errors by using the second typed invocation.

Your minimal, reproducible example

https://www.typescriptlang.org/play/?ts=5.4.5#code/JYWwDg9gTgLgBAbwFBzgawKYbABShgN2AgFcBnAEQEMYqAaFOcjASQDsAzYN4GDARRIYoATwap2XHn2q1xcQcJEBpDGKQBfOBygQQcAOQABWmzK0AxmgD0+KhZgBaAI5DRBpKEiw4VAB7EZNq6+gb+gR5IGH7e8Nx8UBz2GHA4EOaIjMAAJgBccGwkIABGwowwvAA2GPnmUNwA5ozFENkitTD1bE2ozFAseQVFpVCaSJ5sCUkWKWnmiqKZqGBUDRgAysAAXjVDJWUa40gWEGbwzHMwQQC8cAAUrkr5lwsiAJRw1wB8jMyS3LwBG4RAAeS4AbQAunQ4ABRKC6KBfO7IVCoR6iVTtODggyQcxkAwwjEiaGMdHAgBibHyKLgKzWOCoUCo+luAEY4BoPt8lmjUPgYCQoGxfAF0uT+XAAHRrGBg9IwKHIgwACxgMDAZFy1msACsyKcwJVkqqIJVssJpTARGBgCdLdKTiBrPirkS+VK0SsWSBtZ6vWiAPrmZkwWkMjBM31wRxwdkfABUcBJ0sjmx28kDwcqoF4+VT6e2GCzgY0pf53Ml-OtqowbDud3wZB5Xzgzel2RoVDekvLktD1QAKqBduyAAxB8fT0sAipUSpMxnM1n5dml42m82WqCyKj5TDYPCEYjkPeluUAOWiMCXUZXIFpJvMd5hC8XqwwZBhz9vn+jrKtgGAoYEKIpwL+d7StU3QwKqcBtuOcAAPy+JUH5rGQ0H1g0cFwAA1PGcD5CQbCWlIGDZH2F6gceRCkGQd4AY+9xcFAL6fm+6F3t+EFUBxy6+q21ZoRhX7YbB8FtpyqHvjxEm4fBcaciRZEYBR2TyFW4wnGcTBkFGipkAATJ89wks8iqvMJvQGf80hAkoCrmFCMLwoiML2YCe7OUqkJfDCrxYjChT7EiKKSiSWL5LibqEsSwJkvyJLUrSCD0v+D5mZy3KfG2qJSoKwqiuEErZrKoG+cqdxqhqWo6vqhpsJuMxmhaVo2naDoYE6eiukZHoFdmPqsv6Q3ZnAIa0LAEaZTGylJimwJpp+GYliJXpBrmID5ktSgrWsa0VlK-bZlW5VwfWjbNkBHZdrQvaVqWg4YCOIBjpO07jrO0jAAuTEPmuG4mq127CHuB5YLg+D0We3Y0TA15+H+gmrvckGcaJPE-vxKP3kJeXAe2oHFXxAk9TBikIXASGydxn5YZTeGESpTBqRp1GSnKdGnoxc1o3cbHk1xYm8RjqMgDZUpyQzCl4dJKFY7LTNKURqnkdwlFab2UQxNA8AIBcRkwkbBLGRoQA

Steps to reproduce

1. Navigate to TS Playground link provided
2. Note the error marks and lack-there-of in the 2 hook implementations provided

Expected behavior

As a developer, I expect the only required type annotation to be useInfiniteQuery<**TQueryFnData**> the others should be forwarded or inferred by the value of initialPageParam

How often does this bug happen?

Every time

Screenshots or Videos

Platform

macOS Sonoma 14.5,
VS Code Version: 1.89.1 (Universal)
@tanstack/[email protected]
@types/[email protected]
@types/[email protected]
@vitejs/[email protected]
[email protected]
[email protected]
[email protected]
[email protected]
[email protected]

Tanstack Query adapter

react-query

TanStack Query version

v5.40.0

TypeScript version

v5.4.5

Additional context

No response

[TkDodo]

pageParam is unknown because you take away type inference by providing to 2 of the 5 type parameters manually. TypeScript can't do partial type inference yet, so once you define one type parameter, the rest will fall back to the default value.

The best fix is to use type inference all the way through. I've written about this here: https://tkdodo.eu/blog/react-query-and-type-script#infer-all-the-things

and it's also in the docs: https://tanstack.com/query/v5/docs/framework/react/typescript#type-inference

so really, just remove the <> and everything infers nicely:

https://www.typescriptlang.org/play/?ts=5.4.5#code/JYWwDg9gTgLgBAbwFBzgawKYbABShgN2AgFcBnAEQEMYqAaFOcjASQDsAzYN4GDARRIYoATwap2XHn2q1xcQcJEBpDGKQBfOBygQQcAOQABWmzK0AxmgD0+KhZgBaAI5DRBpKEiw4VAB7EZNq6+gb+gR5IGH7e8Nx8UBz2GHA4EOaIjMAAJgBccGwkIABGwowwvAA2GPnmUNwA5ozFENkitTD1bE2ozFAseQVFpVCaSJ5sCUkWKWnmiqKZqGBUDRgAysAAXjVDJWUa40gWEGbwzHMwQQC8cAAUrkr5lwsiAJRw1wB8jMyS3LwBG4RHdkKhUI9RKp2nAANoGSDmMgGOhwSEiAC68ghwIAYmx8qC4Cs1jgqFAqPoNB9vktwah8DASFA2L4AulGPTUAA6NYwAA8l1hGK+dwMAAsYDAwGRctZrAArMinMCVZLiiCVbLCbkwERgYAnbXck4gayIq4oulc8ErCkgWXWm3ggD65nJMEJJIwZPtcEccAAjB8AFRo4Hc72bHbY52oF2VUC8fLoyOrDbbDCxm0abPg6mcrm68UYNh3O74Mg0r5wSvc7I0KhvQu5wvu6oAFVAu0DAAYXb3B7GARUqJUyaTyZT8oHY6r1ZrtVBZFR8phsHhCMRyCvY3yAHLRGATn1TkCEtXmE+osfj9NkVGX4-p32U6tOhkYJksuBPk-c6puhgcU4BrXs4AAfl8So7zWMgANLBpgLgABqIM4HyEg2G1KQMGyFs9y-TciFIMgT1fc97i4KAr3TG8YJPB9fyoWjJ3tatC1QW9GIQoCQJrQNIOg2CMHgwCkJAgNBMw7CMFw7J5ALcZoliRALnSK4NCAA

[pipech]

After spending the whole morning trying to debug this issues, what ever I'm tried I can't get getNextPageParam to inferred typed from queryFn.

Turns out it's my linter, it auto sort object key alphabetically.

So note to myself and other who sees this, order does matter!

Below is the exact same code, but getNextPageParam is the first key on the object, lastPage ended up to be unknown.

https://www.typescriptlang.org/play/?ts=5.4.5&ssl=23&ssc=5&pln=23&pc=21#code/JYWwDg9gTgLgBAbwFBzgawKYbABShgN2AgFcBnAEQEMYqAaFOcjASQDsAzYN4GDARRIYoATwap2XHn2q1xcQcJEBpDGKQBfOBygQQcAOQABWmzK0AxmgD0+KhZgBaAI5DRBpKEiw4VAB7EZNq6+gb+gR5IGH7e8Nx8UBz2GHA4EOaIjMAAJgBccGwkIABGwowwvAA2GPnmUNwA5ozFENkitTD1bE2ozFAseQVFpVCaSJ5sCUkWKWnmiqKZqGBUDRgAysAAXjVDJWUa40gWEGbwzHMwQQC8cAAUrkr5lwsiAJRw1wB8jMyS3LwBG4RHdkKhUGsYAA5aIwHCrDDwqBUED5O6VKjmeFrOi+SqVbEYMi4jFYhFIlEfb5LcGofAwEhQNhwUlwhEAOmq3RgAAs4F84AAGOAAfjxBIRZE5GG5fIA1HAAIxwfIkNjZDBSDDZRioDTyCEYOH4IikMiEimo+5cKBknHiwnElmYtlrS1Un601BUfGO6Wy-lK0UOyX+hq8uCOIOq9Wa7jag1wR6iVTtOAAbQMkHMZAMuOTIgAuomCwAxNhohBwFZuqjI-QaD002n0xnM8LpXVe9mQgA8l3Tha+dwMPJgMDAZFy1msACsyKcwBiZjyIJUNVB2TARGBgCcNeyTiBrNmrnnm17lnWUVOL5fUAB9cx1mBomuI6-6KOKj4AKiTwLsu+mw7Im95wA+lSgLw+QFkBCIgRgYFevqXa0o2aHgluPIyncdz4GQTYEey2Q0FQbxdqhtLPtUAAqoC7IqgoPoKrGJgCFQ+han75IqiZLskq7rsIshUPkmDYHghDEOQonyBh4zRLEiAXOkVwaEAA

Reference:
microsoft/TypeScript#56297

[uncvrd]

Wow would have never guessed this, but the order of the properties was also my issue as well. Thanks :)