How to implement the queryOptions function in v4

[linyxria]

Below is my implementation based on the overload definitions:

import type { QueryKey, UseQueryOptions } from '@tanstack/react-query'

export function queryOptions<
  TQueryFnData,
  TError,
  TData,
  TQueryKey extends QueryKey,
>(
  options: Omit<
    UseQueryOptions<TQueryFnData, TError, TData, TQueryKey>,
    'initialData'
  > & { initialData?: () => undefined },
): Omit<
  UseQueryOptions<TQueryFnData, TError, TData, TQueryKey>,
  'initialData'
> & { initialData?: () => undefined }

export function queryOptions<
  TQueryFnData,
  TError,
  TData,
  TQueryKey extends QueryKey,
>(
  options: Omit<
    UseQueryOptions<TQueryFnData, TError, TData, TQueryKey>,
    'initialData'
  > & { initialData: TQueryFnData | (() => TQueryFnData) },
): Omit<
  UseQueryOptions<TQueryFnData, TError, TData, TQueryKey>,
  'initialData'
> & { initialData: TQueryFnData | (() => TQueryFnData) }

export function queryOptions<
  TQueryFnData,
  TError,
  TData,
  TQueryKey extends QueryKey,
>(
  options: UseQueryOptions<TQueryFnData, TError, TData, TQueryKey>,
): UseQueryOptions<TQueryFnData, TError, TData, TQueryKey>

export function queryOptions<
  TQueryFnData,
  TError,
  TData,
  TQueryKey extends QueryKey,
>(
  options: UseQueryOptions<TQueryFnData, TError, TData, TQueryKey>,
): UseQueryOptions<TQueryFnData, TError, TData, TQueryKey> {
  return options
}

However, in actual usage, if the select option is not provided, it cannot infer the type of TData. The data type is always unknown, so I have to pass the select option every time, for example:

interface User {
  id: number
  name: string
}

const fetchUser = (id: number) => Promise.resolve<User>({ id, name: 'user' })

const userQueryOptions = (id: number) =>
  queryOptions({
    queryKey: ['/api/users', id],
    queryFn: fetchUser,
  })

// The type of data is unknown
const { data } = useQuery({ 
  ...userQueryOptions(1), 
})

// The type of data can be correctly inferred, data is User or undefined 
const { data } = useQuery({ 
  ...userQueryOptions(2), 
  select: data => data,
})