T
TanStack•4mo ago
dependent-tan

(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
conscious-sapphire
conscious-sapphire•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.
dependent-tan
dependent-tanOP•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.
harsh-harlequin
harsh-harlequin•4mo ago
WhatDoIPutHere is whatever the queryFn returns, as that is the input for select. It gets inferred if you inline it
dependent-tan
dependent-tanOP•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?
harsh-harlequin
harsh-harlequin•4mo ago
Please show a typescript playground
dependent-tan
dependent-tanOP•3mo ago
harsh-harlequin
harsh-harlequin•3mo ago
dependent-tan
dependent-tanOP•2mo 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?