T
TanStack•2y ago
fascinating-indigo

How do you provide a default select function and keep TypeScript happy?

I'm using v4 and trying to follow this example tweet https://twitter.com/TkDodo/status/1657026702512467970/photo/1 I'd like to provide a default select function, but also give the user the ability to override it. 
export type GetBillResponse = {
  bill: BillResponseObject
}

export const useBillQuery = <TData = BillResponseObject>(
  billId?: number,
  select?: (data: GetBillResponse) => TData
) => {
  return useQuery({
    queryKey: queryKeys.bill(billId),
    queryFn: () => getBill(billId),
    enabled: !!billId,
    select: select ?? ((data) => data.bill),
  })
}
export type GetBillResponse = {
  bill: BillResponseObject
}

export const useBillQuery = <TData = BillResponseObject>(
  billId?: number,
  select?: (data: GetBillResponse) => TData
) => {
  return useQuery({
    queryKey: queryKeys.bill(billId),
    queryFn: () => getBill(billId),
    enabled: !!billId,
    select: select ?? ((data) => data.bill),
  })
}
This gives me a TS error saying no overload matches this call, but I think the real issue is that my default select function has the type: 
(data: GetBillResponse) => BillResponseObject
(data: GetBillResponse) => BillResponseObject
and that can't be assigned to type: 
(data: GetBillResponse) => TData
(data: GetBillResponse) => TData
Is it possible to have a default select function but still allow an override?
Dominik 🔮 (@TkDodo) on X
It doesn't take a lot of #TypeScript magic to get type inference with the select option in React Query. We need: - One generic with a default value - Types for the select argument That's it 🙌
From An unknown user
Twitter
5 Replies
conscious-sapphire
conscious-sapphire•2y ago
show a TS playground please because I'm pretty sure this code should work
fascinating-indigo
fascinating-indigoOP•2y ago
@TkDodo 🔮 Here's a TS playground. https://www.typescriptlang.org/play?#code/JYWwDg9gTgLgBAbzgVwM4FMCKz1QJ5wC+cAZlBCHAOQACMAhgHaoMDGA1gPRTr2swBaAI458VALAAoKTDxh0cAELAANioBK6VJGboA8gCMAVun5wAvIilw4wACYAuOI2QgDuKYSky5CgOLoMMpqmtoQuhZWkjYGqipOwRpaOhiGJvye3pKs4SxwAOaBiZEAFLFqAJKOzq7uUACUTgAK5CDAGAA8AUFxoSnoAHwWQwjWcDwwyFCMcC0U7egAdDyoECoAbuglSOXxiLbVAIxEhPWZ0pLoAB6QsHA5zPBo6InYuASWHQAqACL0DJFEn1cvpjKYYAMSmNdlUnC43LgADRjDAqcEAficJTs-3oTm6QOSIPqwzgv1xUhJ5hGYwmUxmzze+G2YxsIneAGl0HgnABtKi7VBURFwGF2AC6yOiNjg7PwADFGFiqUNCj01GU4lV6lKZXBUeCnAazOj0XAStjcSq4DiGItdjqxqdPEA I'm not very familiar with TS Playground so I'm not sure which version of react query it's using (I copied it from another TS playground on this discord). But the error looks like what I'm seeing
TS Playground - An online editor for exploring TypeScript and JavaS...
The Playground lets you write TypeScript or JavaScript online in a safe and sharable way.
conscious-sapphire
conscious-sapphire•2y ago
conscious-sapphire
conscious-sapphire•2y ago
Oh, you want data.bill if no select is supplied? That doesn't work
fascinating-indigo
fascinating-indigoOP•2y ago
Oh, you want data.bill if no select is supplied? That doesn't work
Yeah I was hoping to build a default select into the query itself No worries if it doesn't work, I was curious if it was possible, but it's easy enough to pass in a select

Did you find this page helpful?