fix: unwrap queryFn key type (#193)

Author: DamianOsipiuk

src/vuejs/types.ts

@@ -3,7 +3,7 @@ import type {
   QueryObserverOptions,
   InfiniteQueryObserverOptions,
 } from "react-query/core";
-import { Ref } from "vue-demi";
+import { Ref, UnwrapRef } from "vue-demi";
 
 export type MaybeRef<T> = Ref<T> | T;
 export type MaybeRefDeep<T> = T extends Function
@@ -33,15 +33,23 @@ export type VueQueryObserverOptions<
     TData,
     TQueryData,
     TQueryKey
-  >]: MaybeRef<
-    QueryObserverOptions<
-      TQueryFnData,
-      TError,
-      TData,
-      TQueryData,
-      TQueryKey
-    >[Property]
-  >;
+  >]: Property extends "queryFn"
+    ? QueryObserverOptions<
+        TQueryFnData,
+        TError,
+        TData,
+        TQueryData,
+        UnwrapRef<TQueryKey>
+      >[Property]
+    : MaybeRef<
+        QueryObserverOptions<
+          TQueryFnData,
+          TError,
+          TData,
+          TQueryData,
+          TQueryKey
+        >[Property]
+      >;
 };
 
 // A Vue version of InfiniteQueryObserverOptions from "react-query/types/core"
@@ -59,13 +67,21 @@ export type VueInfiniteQueryObserverOptions<
     TData,
     TQueryData,
     TQueryKey
-  >]: MaybeRef<
-    InfiniteQueryObserverOptions<
-      TQueryFnData,
-      TError,
-      TData,
-      TQueryData,
-      TQueryKey
-    >[Property]
-  >;
+  >]: Property extends "queryFn"
+    ? InfiniteQueryObserverOptions<
+        TQueryFnData,
+        TError,
+        TData,
+        TQueryData,
+        UnwrapRef<TQueryKey>
+      >[Property]
+    : MaybeRef<
+        InfiniteQueryObserverOptions<
+          TQueryFnData,
+          TError,
+          TData,
+          TQueryData,
+          TQueryKey
+        >[Property]
+      >;
 };

src/vuejs/useBaseQuery.ts

@@ -5,6 +5,7 @@ import {
   ToRefs,
   reactive,
   watch,
+  UnwrapRef,
 } from "vue-demi";
 import type {
   QueryObserver,
@@ -16,8 +17,8 @@ import type { QueryFunction } from "react-query/lib/core";
 import { useQueryClient } from "./useQueryClient";
 import { updateState, isQueryKey, cloneDeepUnref } from "./utils";
 import { WithQueryClientKey } from "./types";
-import { UseQueryOptions } from "./useQuery";
-import { UseInfiniteQueryOptions } from "./useInfiniteQuery";
+import type { UseQueryOptions } from "./useQuery";
+import type { UseInfiniteQueryOptions } from "./useInfiniteQuery";
 
 export type UseQueryReturnType<
   TData,
@@ -48,7 +49,7 @@ export function useBaseQuery<
     | TQueryKey
     | UseQueryOptionsGeneric<TQueryFnData, TError, TData, TQueryKey>,
   arg2:
-    | QueryFunction<TQueryFnData, TQueryKey>
+    | QueryFunction<TQueryFnData, UnwrapRef<TQueryKey>>
     | UseQueryOptionsGeneric<TQueryFnData, TError, TData, TQueryKey> = {},
   arg3: UseQueryOptionsGeneric<TQueryFnData, TError, TData, TQueryKey> = {}
 ): UseQueryReturnType<TData, TError> {

src/vuejs/useInfiniteQuery.ts

@@ -1,5 +1,5 @@
 import { InfiniteQueryObserver } from "react-query/core";
-
+import type { UnwrapRef } from "vue-demi";
 import type {
   QueryObserver,
   QueryFunction,
@@ -74,7 +74,7 @@ export function useInfiniteQuery<
   TQueryKey extends QueryKey = QueryKey
 >(
   queryKey: TQueryKey,
-  queryFn: QueryFunction<TQueryFnData, TQueryKey>,
+  queryFn: QueryFunction<TQueryFnData, UnwrapRef<TQueryKey>>,
   options?: Omit<
     UseInfiniteQueryOptions<TQueryFnData, TError, TData, TQueryKey>,
     "queryKey" | "queryFn"
@@ -91,7 +91,7 @@ export function useInfiniteQuery<
     | TQueryKey
     | UseInfiniteQueryOptions<TQueryFnData, TError, TData, TQueryKey>,
   arg2?:
-    | QueryFunction<TQueryFnData, TQueryKey>
+    | QueryFunction<TQueryFnData, UnwrapRef<TQueryKey>>
     | UseInfiniteQueryOptions<TQueryFnData, TError, TData, TQueryKey>,
   arg3?: UseInfiniteQueryOptions<TQueryFnData, TError, TData, TQueryKey>
 ): UseInfiniteQueryReturnType<TData, TError> {

src/vuejs/useQuery.ts

@@ -1,3 +1,4 @@
+import type { UnwrapRef } from "vue-demi";
 import { QueryObserver } from "react-query/core";
 import type {
   QueryFunction,
@@ -50,7 +51,7 @@ export function useQuery<
   TQueryKey extends QueryKey = QueryKey
 >(
   queryKey: TQueryKey,
-  queryFn: QueryFunction<TQueryFnData, TQueryKey>,
+  queryFn: QueryFunction<TQueryFnData, UnwrapRef<TQueryKey>>,
   options?: Omit<
     UseQueryOptions<TQueryFnData, TError, TData, TQueryKey>,
     "queryKey" | "queryFn"
@@ -65,7 +66,7 @@ export function useQuery<
 >(
   arg1: TQueryKey | UseQueryOptions<TQueryFnData, TError, TData, TQueryKey>,
   arg2?:
-    | QueryFunction<TQueryFnData, TQueryKey>
+    | QueryFunction<TQueryFnData, UnwrapRef<TQueryKey>>
     | UseQueryOptions<TQueryFnData, TError, TData, TQueryKey>,
   arg3?: UseQueryOptions<TQueryFnData, TError, TData, TQueryKey>
 ): UseQueryReturnType<TData, TError> {