fix(vue-query): ref unwrapping of QueryKey in queryOptions (#7390)

* fix(vue-query): ref unwrapping of QueryKey in queryOptions * test: add test
TanStack · May 7, 2024 · f903af2 · f903af2
1 parent a378560
commit f903af2
Show file tree

Hide file tree

Showing 3 changed files with 59 additions and 61 deletions.
diff --git a/packages/vue-query/src/__tests__/queryOptions.types.test.ts b/packages/vue-query/src/__tests__/queryOptions.types.test.ts
@@ -1,5 +1,5 @@
 import { describe, it } from 'vitest'
-import { reactive } from 'vue-demi'
+import { reactive, ref } from 'vue-demi'
 import { QueryClient } from '../queryClient'
 import { queryOptions } from '../queryOptions'
 import { useQuery } from '../useQuery'
@@ -148,4 +148,23 @@ describe('queryOptions', () => {
       return result
     })
   })
+  it('should allow to be passed to QueryClient methods while containing ref in queryKey', () => {
+    doNotExecute(() => {
+      const options = queryOptions({
+        queryKey: ['key', ref(1), { nested: ref(2) }],
+        queryFn: () => Promise.resolve(5),
+      })
+
+      const queryClient = new QueryClient()
+
+      // Should not error
+      const data = queryClient.invalidateQueries(options)
+      // Should not error
+      const data2 = queryClient.fetchQuery(options)
+
+      const result: Expect<Equal<typeof data, Promise<void>>> = true
+      const result2: Expect<Equal<typeof data2, Promise<number>>> = true
+      return result || result2
+    })
+  })
 })
diff --git a/packages/vue-query/src/useInfiniteQuery.ts b/packages/vue-query/src/useInfiniteQuery.ts
@@ -29,39 +29,26 @@ export type UseInfiniteQueryOptions<
     TQueryData,
     TQueryKey,
     TPageParam
-  >]: Property extends
-    | 'queryFn'
-    | 'getPreviousPageParam'
-    | 'getNextPageParam'
-    | 'select'
-    ? InfiniteQueryObserverOptions<
-        TQueryFnData,
-        TError,
-        TData,
-        TQueryData,
-        DeepUnwrapRef<TQueryKey>,
-        TPageParam
-      >[Property]
-    : Property extends 'enabled'
-      ? MaybeRefOrGetter<
-          InfiniteQueryObserverOptions<
-            TQueryFnData,
-            TError,
-            TData,
-            TQueryData,
-            TQueryKey
-          >[Property]
-        >
-      : MaybeRefDeep<
-          InfiniteQueryObserverOptions<
-            TQueryFnData,
-            TError,
-            TData,
-            TQueryData,
-            TQueryKey,
-            TPageParam
-          >[Property]
-        >
+  >]: Property extends 'enabled'
+    ? MaybeRefOrGetter<
+        InfiniteQueryObserverOptions<
+          TQueryFnData,
+          TError,
+          TData,
+          TQueryData,
+          DeepUnwrapRef<TQueryKey>
+        >[Property]
+      >
+    : MaybeRefDeep<
+        InfiniteQueryObserverOptions<
+          TQueryFnData,
+          TError,
+          TData,
+          TQueryData,
+          DeepUnwrapRef<TQueryKey>,
+          TPageParam
+        >[Property]
+      >
 }
 
 export type UseInfiniteQueryReturnType<TData, TError> = UseBaseQueryReturnType<

diff --git a/packages/vue-query/src/useQuery.ts b/packages/vue-query/src/useQuery.ts
@@ -30,33 +30,25 @@ export type UseQueryOptions<
     TData,
     TQueryData,
     TQueryKey
-  >]: Property extends 'queryFn' | 'select'
-    ? QueryObserverOptions<
-        TQueryFnData,
-        TError,
-        TData,
-        TQueryData,
-        DeepUnwrapRef<TQueryKey>
-      >[Property]
-    : Property extends 'enabled'
-      ? MaybeRefOrGetter<
-          QueryObserverOptions<
-            TQueryFnData,
-            TError,
-            TData,
-            TQueryData,
-            TQueryKey
-          >[Property]
-        >
-      : MaybeRefDeep<
-          QueryObserverOptions<
-            TQueryFnData,
-            TError,
-            TData,
-            TQueryData,
-            TQueryKey
-          >[Property]
-        >
+  >]: Property extends 'enabled'
+    ? MaybeRefOrGetter<
+        QueryObserverOptions<
+          TQueryFnData,
+          TError,
+          TData,
+          TQueryData,
+          DeepUnwrapRef<TQueryKey>
+        >[Property]
+      >
+    : MaybeRefDeep<
+        QueryObserverOptions<
+          TQueryFnData,
+          TError,
+          TData,
+          TQueryData,
+          DeepUnwrapRef<TQueryKey>
+        >[Property]
+      >
 }>
 
 export type UndefinedInitialQueryOptions<