When passing options, useQuery does not accept types

[nickeremin]

I created a custom hook that can accept options, and in theory, if you pass initialData into it, for example, then data should not be undefined

interface UseCardServicesParams {
  cardClientId: CardModel["card_client_id"] | undefined
  options?: Omit<UseQueryOptions<ServiceModel[]>, "queryKey" | "queryFn">
}

export function useServices({ cardClientId, options }: UseCardServicesParams) {
  const client = useClient()

  const query = useQuery({
    ...options,
    queryKey: ["services", cardClientId],
    queryFn: () =>
      client
        .get(`/api/v1/cp/cards/${cardClientId}/services`)
        .then(({ data }) => serviceSchema.array().parse(data)),
  })

  return query
}

Despite this, data remains undefined

 const initialData = useLoaderData() as ServiceModel[]

 const { data } = useServices({
   cardClientId,
   options: {
     initialData,
   },
 })

Is it possible to fix this?

So far I have found only this way

interface ServicesQueryParams {
  client: AxiosInstance
  cardClientId: CardModel["card_client_id"]
}

export function servicesQuery({ client, cardClientId }: ServicesQueryParams) {
  return {
    queryKey: ["services", cardClientId],
    queryFn: () =>
      client
        .get(`/api/v1/cp/cards/${cardClientId}/services`)
        .then(({ data }) => ({ services: serviceSchema.array().parse(data) })),
  } satisfies UseQueryOptions
}

And then do this

const client = useClient()
const initialData = useLoaderData() as ServiceModel[]

const { data } = useQuery({
  ...servicesQuery({ client, cardClientId }),
  initialData,
})

Is it possible to somehow make it so that in the first case the data type is not undefined?

[TkDodo]

if you pass initialData into it, for example, then data should not be undefined

this is a feature we have achieved with overloads in TypeScript. If you build your custom abstraction and want that, you need to either define overloads yourself or use conditional return types.

My suggestion is to use queryOptions instead of building custom abstractions: typescript playground

[nickeremin]

Thank you very much, basically as I expected. I even found advantages in this, despite the fact that I will have to write one line of code more, since useClient is a hook, and where I will have to use this function, but it will be easier to test, since suddenly I want to pass another axiosInstance it will be easy to do.
Do I understand correctly that the approach of creating simply queryOptions and then passing them to useQuery is preferable to returning a custom useQuery? And if so, then it turns out that I can stick to this approach throughout the entire project and refuse to use custom functions where I returned useQuery?

[TkDodo]

it’s two layers that can be combined really. I usually start out with queryOptions abstractions, then just call useQuery(todoOptions) in components. If I need a custom useTodos hook because there is more going on than useQuery, I extract it further.