T
TanStack•4mo ago
unwilling-turquoise

(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
stormy-gold
stormy-gold•4mo 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.
unwilling-turquoise
unwilling-turquoiseOP•4mo 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.
plain-purple
plain-purple•4mo ago
WhatDoIPutHere is whatever the queryFn returns, as that is the input for select. It gets inferred if you inline it
unwilling-turquoise
unwilling-turquoiseOP•4mo ago
i should have named the function "handleSelectedQueryData". what if i have many inline select functions and still need to get their return type?
plain-purple
plain-purple•4mo ago
Please show a typescript playground
unwilling-turquoise
unwilling-turquoiseOP•4mo ago
plain-purple
plain-purple•4mo ago
unwilling-turquoise
unwilling-turquoiseOP•3mo 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?