national-gold

Typescript and conditional select

Hi, So I want to have a query

const useGetItems = (id: string, select?: (data: ViewsType) => void) => {
  const query = useQuery<ItemsType>({
    queryKey: ['items', id],
    queryFn: () => fetchItems(id),
    select: (data) => (select ? select(data) : data),
  })

  return query
}

const useGetItems = (id: string, select?: (data: ViewsType) => void) => {
  const query = useQuery<ItemsType>({
    queryKey: ['items', id],
    queryFn: () => fetchItems(id),
    select: (data) => (select ? select(data) : data),
  })

  return query
}

` and then I have something like this

const useGetFirstItem = (id: string) => {
  const selectFirst = (data: ItemsType) => {
    return data.items[0]
  }

  const defaultItem = useGetItems(typeId, selectFirst)
  return defaultItem
}

const useGetFirstItem = (id: string) => {
  const selectFirst = (data: ItemsType) => {
    return data.items[0]
  }

  const defaultItem = useGetItems(typeId, selectFirst)
  return defaultItem
}

select gives the error

Overload 1 of 3, '(options: UndefinedInitialDataOptions<ItemsType, Error, ItemsType, QueryKey>, queryClient?: QueryClient | undefined): UseQueryResult<...>', gave the following error.
Type '(data: ItemsType) => void' is not assignable to type '(data: ItemsType) => ItemsType'.
  Type 'void' is not assignable to type 'ItemsType'.
Overload 2 of 3, '(options: DefinedInitialDataOptions<ItemsType, Error, ItemsType, QueryKey>, queryClient?: QueryClient | undefined): DefinedUseQueryResult<...>', gave the following error.
Type '(data: ItemsType) => void' is not assignable to type '(data: ItemsType) => ItemsType'.
Overload 3 of 3, '(options: UseQueryOptions<ItemsType, Error, ItemsType, QueryKey>, queryClient?: QueryClient | undefined): UseQueryResult<...>', gave the following error.
Type '(data: ItemsType) => void' is not assignable to type '(data: ItemsType) => ItemsType'.ts(2769)
queryClient-bm-z2rsD.d.ts(410, 5): The expected type comes from property 'select' which is declared here on type 'UndefinedInitialDataOptions<ItemsType, Error, ItemsType, QueryKey>'
queryClient-bm-z2rsD.d.ts(410, 5): The expected type comes from property 'select' which is declared here on type 'DefinedInitialDataOptions<ItemsType, Error, ItemsType, QueryKey>'
queryClient-bm-z2rsD.d.ts(410, 5): The expected type comes from property 'select' which is declared here on type 'UseQueryOptions<ItemsType, Error, ItemsType, QueryKey>'

Overload 1 of 3, '(options: UndefinedInitialDataOptions<ItemsType, Error, ItemsType, QueryKey>, queryClient?: QueryClient | undefined): UseQueryResult<...>', gave the following error.
Type '(data: ItemsType) => void' is not assignable to type '(data: ItemsType) => ItemsType'.
  Type 'void' is not assignable to type 'ItemsType'.
Overload 2 of 3, '(options: DefinedInitialDataOptions<ItemsType, Error, ItemsType, QueryKey>, queryClient?: QueryClient | undefined): DefinedUseQueryResult<...>', gave the following error.
Type '(data: ItemsType) => void' is not assignable to type '(data: ItemsType) => ItemsType'.
Overload 3 of 3, '(options: UseQueryOptions<ItemsType, Error, ItemsType, QueryKey>, queryClient?: QueryClient | undefined): UseQueryResult<...>', gave the following error.
Type '(data: ItemsType) => void' is not assignable to type '(data: ItemsType) => ItemsType'.ts(2769)
queryClient-bm-z2rsD.d.ts(410, 5): The expected type comes from property 'select' which is declared here on type 'UndefinedInitialDataOptions<ItemsType, Error, ItemsType, QueryKey>'
queryClient-bm-z2rsD.d.ts(410, 5): The expected type comes from property 'select' which is declared here on type 'DefinedInitialDataOptions<ItemsType, Error, ItemsType, QueryKey>'
queryClient-bm-z2rsD.d.ts(410, 5): The expected type comes from property 'select' which is declared here on type 'UseQueryOptions<ItemsType, Error, ItemsType, QueryKey>'

` Help! 🙂

6 Replies

quickest-silver•2y ago

Please create a typescript playground

extended-salmon•2y ago

https://x.com/TkDodo/status/1657026702512467970

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 🙌