T
TanStack•2mo ago
stormy-gold

(Solved) Infer result of select

const myQuery = useQuery({
  select: data => 1
})

// assume i have to write a function like this:
function handleQueryData(data: WhatDoIPutHere) {
  // ...
}
const myQuery = useQuery({
  select: data => 1
})

// assume i have to write a function like this:
function handleQueryData(data: WhatDoIPutHere) {
  // ...
}
(where WhatDoIPutHere becomes number)
8 Replies
unwilling-turquoise
unwilling-turquoise•2mo ago
Lucky for you, Dominik just wrote an in depth blog on this https://tkdodo.eu/blog/react-query-selectors-supercharged
React Query Selectors, Supercharged
How to get the most out of select, sprinkled with some TypeScript tips.
stormy-gold
stormy-goldOP•2mo ago
i read the whole article but i don't think it covers inferring the return type of an inline function passed to select. only how to abstract the function itself as a parameter.
fascinating-indigo
fascinating-indigo•2mo ago
WhatDoIPutHere is whatever the queryFn returns, as that is the input for select. It gets inferred if you inline it
stormy-gold
stormy-goldOP•2mo ago
i should have named the function "handleSelectedQueryData". what if i have many inline select functions and still need to get their return type?
fascinating-indigo
fascinating-indigo•2mo ago
Please show a typescript playground
stormy-gold
stormy-goldOP•2mo ago
fascinating-indigo
fascinating-indigo•2mo ago
stormy-gold
stormy-goldOP•3w ago
In case someone comes across this (probably me in a few months lmao):
function handleSelectedQueryData(
  data: Exclude<(typeof myQuery)["data"], undefined>
) {
  /*...*/
}
function handleSelectedQueryData(
  data: Exclude<(typeof myQuery)["data"], undefined>
) {
  /*...*/
}

Did you find this page helpful?