Typescript issues with query data selector

[sem4phor]

Describe the bug
When I transform data with the query data selector like stated here https://react-query.tanstack.com/guides/migrating-to-react-query-3#query-data-selectors a typescript error is thrown and the type in onSuccess does not change to the type returned in the select function.

To Reproduce
Steps to reproduce the behavior:

1. Go to https://codesandbox.io/s/tannerlinsley-react-query-basic-typescript-forked-j8qro?file=/src/index.tsx
2. Click on 'src/index.tsx'
3. Scroll down to line 34, hover the error and data in line 31
4. See error & wrong type

Expected behavior
I expect that the return type of the select function might differ from the original type of the data and the type of the query data, the parameter for onSuccess etc. is overwritten by the type returned from the select function.

Screenshots

Additional context
Sandbox is forked from official TS example

[Svish]

You're probably already aware, but easy workaround is to be explicit about the types you expect:

return useQuery<Post[], unknown, string[]>( ...

Personally I find that preferable anyways, but yeah, would of course be nice if you didn't have to in this case.

[sem4phor]

Thanks for the hint! I actually was not aware of it. But either way I find it preferable that the type is inferred which ACTUALLY flows into data/onsuccess. And at the end of the day this is the data coming from the selector function 😅

[Svish]

Yeah, hopefully someone else can answer why it doesn't infer, and if it's a bug or not.

Personally I prefer to be explicit in these things though, as I have multiple times managed to select something else than I thought I was. Forgetting I'm working on an array rather than single item, for example. But yeah, up to personal preference for the most part that 🙂

[TkDodo]

@Svish if you only pass 3 generics, you lose type inference for the 4th generic - the queryKey.

the sandbox shows a "known" limitation with select + other callbacks. I haven't yet figured out why TypeScript can't infer things - the best workaround I've found is to annotate the input of select. optimistic updates have a similar limitation, where you have to annotate onMutate. I've written about that one here.

so by doing:

- select: (data) => data.map((d) => d.title)
+ select: (data: Array<Post>) => data.map((d) => d.title)

not only does the type error go away, but the input in onSuccess is also correctly inferred.

Maybe it would be good to add that to the typescript docs somewhere?

/edit: link to the working sandbox: https://codesandbox.io/s/tannerlinsley-react-query-basic-typescript-forked-3ov3k?file=/src/index.tsx:703-758

[Svish]

@TkDodo Yeah, sorry, used to working with our own useQuery wrapper where the query key is already hard coded 🤓