fix(vue-query): ensure the queryFn parameter has the correct type (#5935)

Co-authored-by: Damian Osipiuk <[email protected]>

Author: Mini-ghost

packages/vue-query/src/types.ts

@@ -8,7 +8,7 @@ import type {
 import type { Ref, UnwrapRef } from 'vue-demi'
 import type { QueryClient } from './queryClient'
 
-export type MaybeRef<T> = Ref<T> | T
+type Primitive = string | number | boolean | bigint | symbol | undefined | null
 
 export type MaybeRefDeep<T> = MaybeRef<
   T extends Function
@@ -20,6 +20,18 @@ export type MaybeRefDeep<T> = MaybeRef<
     : T
 >
 
+export type MaybeRef<T> = Ref<T> | T
+
+export type DeepUnwrapRef<T> = T extends Primitive
+  ? T
+  : T extends Ref<infer U>
+  ? DeepUnwrapRef<U>
+  : T extends {}
+  ? {
+      [Property in keyof T]: DeepUnwrapRef<T[Property]>
+    }
+  : UnwrapRef<T>
+
 export type WithQueryClientKey<T> = T & {
   queryClientKey?: string
   queryClient?: QueryClient
@@ -46,7 +58,7 @@ export type VueQueryObserverOptions<
         TError,
         TData,
         TQueryData,
-        UnwrapRef<TQueryKey>
+        DeepUnwrapRef<TQueryKey>
       >[Property]
     : MaybeRef<
         QueryObserverOptions<
@@ -80,7 +92,7 @@ export type VueInfiniteQueryObserverOptions<
         TError,
         TData,
         TQueryData,
-        UnwrapRef<TQueryKey>
+        DeepUnwrapRef<TQueryKey>
       >[Property]
     : MaybeRef<
         InfiniteQueryObserverOptions<

packages/vue-query/src/useBaseQuery.ts

@@ -15,15 +15,15 @@ import {
   shouldThrowError,
   updateState,
 } from './utils'
-import type { ToRefs, UnwrapRef } from 'vue-demi'
+import type { ToRefs } from 'vue-demi'
 import type {
   QueryFunction,
   QueryKey,
   QueryObserver,
   QueryObserverOptions,
   QueryObserverResult,
 } from '@tanstack/query-core'
-import type { MaybeRef, WithQueryClientKey } from './types'
+import type { DeepUnwrapRef, MaybeRef, WithQueryClientKey } from './types'
 import type { UseQueryOptions } from './useQuery'
 import type { UseInfiniteQueryOptions } from './useInfiniteQuery'
 
@@ -55,7 +55,7 @@ export function useBaseQuery<
     | TQueryKey
     | UseQueryOptionsGeneric<TQueryFnData, TError, TData, TQueryKey>,
   arg2:
-    | QueryFunction<TQueryFnData, UnwrapRef<TQueryKey>>
+    | QueryFunction<TQueryFnData, DeepUnwrapRef<TQueryKey>>
     | UseQueryOptionsGeneric<TQueryFnData, TError, TData, TQueryKey> = {},
   arg3: UseQueryOptionsGeneric<TQueryFnData, TError, TData, TQueryKey> = {},
 ): UseQueryReturnType<TData, TError> {
@@ -179,7 +179,7 @@ export function parseQueryArgs<
     | MaybeRef<TQueryKey>
     | MaybeRef<UseQueryOptionsGeneric<TQueryFnData, TError, TData, TQueryKey>>,
   arg2:
-    | MaybeRef<QueryFunction<TQueryFnData, UnwrapRef<TQueryKey>>>
+    | MaybeRef<QueryFunction<TQueryFnData, DeepUnwrapRef<TQueryKey>>>
     | MaybeRef<
         UseQueryOptionsGeneric<TQueryFnData, TError, TData, TQueryKey>
       > = {},

packages/vue-query/src/useInfiniteQuery.ts

@@ -1,6 +1,5 @@
 import { InfiniteQueryObserver } from '@tanstack/query-core'
 import { useBaseQuery } from './useBaseQuery'
-import type { UnwrapRef } from 'vue-demi'
 import type {
   InfiniteQueryObserverResult,
   QueryFunction,
@@ -11,6 +10,7 @@ import type {
 import type { UseQueryReturnType } from './useBaseQuery'
 
 import type {
+  DeepUnwrapRef,
   DistributiveOmit,
   VueInfiniteQueryObserverOptions,
   WithQueryClientKey,
@@ -78,7 +78,7 @@ export function useInfiniteQuery<
   TQueryKey extends QueryKey = QueryKey,
 >(
   queryKey: TQueryKey,
-  queryFn: QueryFunction<TQueryFnData, UnwrapRef<TQueryKey>>,
+  queryFn: QueryFunction<TQueryFnData, DeepUnwrapRef<TQueryKey>>,
   options?: Omit<
     UseInfiniteQueryOptions<TQueryFnData, TError, TData, TQueryKey>,
     'queryKey' | 'queryFn'
@@ -95,7 +95,7 @@ export function useInfiniteQuery<
     | TQueryKey
     | UseInfiniteQueryOptions<TQueryFnData, TError, TData, TQueryKey>,
   arg2?:
-    | QueryFunction<TQueryFnData, UnwrapRef<TQueryKey>>
+    | QueryFunction<TQueryFnData, DeepUnwrapRef<TQueryKey>>
     | UseInfiniteQueryOptions<TQueryFnData, TError, TData, TQueryKey>,
   arg3?: UseInfiniteQueryOptions<TQueryFnData, TError, TData, TQueryKey>,
 ): UseInfiniteQueryReturnType<TData, TError> {

packages/vue-query/src/useQuery.ts

@@ -1,6 +1,6 @@
 import { QueryObserver } from '@tanstack/query-core'
 import { useBaseQuery } from './useBaseQuery'
-import type { ToRefs, UnwrapRef } from 'vue-demi'
+import type { ToRefs } from 'vue-demi'
 import type {
   DefinedQueryObserverResult,
   QueryFunction,
@@ -9,6 +9,7 @@ import type {
 } from '@tanstack/query-core'
 import type { UseQueryReturnType as UQRT } from './useBaseQuery'
 import type {
+  DeepUnwrapRef,
   DistributiveOmit,
   VueQueryObserverOptions,
   WithQueryClientKey,
@@ -119,7 +120,7 @@ export function useQuery<
   TQueryKey extends QueryKey = QueryKey,
 >(
   queryKey: TQueryKey,
-  queryFn: QueryFunction<TQueryFnData, UnwrapRef<TQueryKey>>,
+  queryFn: QueryFunction<TQueryFnData, DeepUnwrapRef<TQueryKey>>,
   options?: Omit<
     UseQueryOptions<TQueryFnData, TError, TData, TQueryKey>,
     'queryKey' | 'queryFn' | 'initialData'
@@ -133,7 +134,7 @@ export function useQuery<
   TQueryKey extends QueryKey = QueryKey,
 >(
   queryKey: TQueryKey,
-  queryFn: QueryFunction<TQueryFnData, UnwrapRef<TQueryKey>>,
+  queryFn: QueryFunction<TQueryFnData, DeepUnwrapRef<TQueryKey>>,
   options?: Omit<
     UseQueryOptions<TQueryFnData, TError, TData, TQueryKey>,
     'queryKey' | 'queryFn' | 'initialData'
@@ -147,7 +148,7 @@ export function useQuery<
   TQueryKey extends QueryKey = QueryKey,
 >(
   queryKey: TQueryKey,
-  queryFn: QueryFunction<TQueryFnData, UnwrapRef<TQueryKey>>,
+  queryFn: QueryFunction<TQueryFnData, DeepUnwrapRef<TQueryKey>>,
   options?: Omit<
     UseQueryOptions<TQueryFnData, TError, TData, TQueryKey>,
     'queryKey' | 'queryFn'
@@ -162,7 +163,7 @@ export function useQuery<
 >(
   arg1: TQueryKey | UseQueryOptions<TQueryFnData, TError, TData, TQueryKey>,
   arg2?:
-    | QueryFunction<TQueryFnData, UnwrapRef<TQueryKey>>
+    | QueryFunction<TQueryFnData, DeepUnwrapRef<TQueryKey>>
     | UseQueryOptions<TQueryFnData, TError, TData, TQueryKey>,
   arg3?: UseQueryOptions<TQueryFnData, TError, TData, TQueryKey>,
 ):