fix(vue-query): allow computed ref as queryKey property in queryOptions

Closes #10525

Author: KimHyeongRae0

.changeset/fix-vue-query-options-query-key-reactive.md

@@ -0,0 +1,12 @@
+---
+'@tanstack/vue-query': patch
+---
+
+fix(vue-query): allow computed ref and other reactive values as `queryKey` property in `queryOptions`
+
+This fixes a regression introduced in #10452 where `queryOptions` only accepted plain arrays for the `queryKey` property, but not `computed` refs, `Ref` values, or other reactive values. The related fix in #10465 only covered the `enabled` property.
+
+Now the `queryKey` property in `queryOptions` correctly accepts:
+- Plain `QueryKey` arrays
+- `Ref<QueryKey>`
+- `ComputedRef<QueryKey>`

packages/vue-query/src/__tests__/queryOptions.test-d.ts

@@ -298,4 +298,27 @@ describe('queryOptions', () => {
 
     expectTypeOf(options.queryKey).not.toBeUndefined()
   })
+
+  it('should allow computed ref as queryKey', () => {
+    const id = ref<string | null>('1')
+
+    // This was broken in #10452, the #10465 fix only covered `enabled`
+    const options = queryOptions({
+      queryKey: computed(() => ['foo', id.value] as const),
+      queryFn: () => Promise.resolve({ id: '1' }),
+    })
+
+    expectTypeOf(options.queryKey).not.toBeUndefined()
+  })
+
+  it('should allow ref as queryKey', () => {
+    const keyRef = ref(['foo', '1'] as const)
+
+    const options = queryOptions({
+      queryKey: keyRef,
+      queryFn: () => Promise.resolve({ id: '1' }),
+    })
+
+    expectTypeOf(options.queryKey).not.toBeUndefined()
+  })
 })

packages/vue-query/src/queryOptions.ts

@@ -1,4 +1,9 @@
-import type { DeepUnwrapRef, MaybeRefOrGetter, ShallowOption } from './types'
+import type {
+  DeepUnwrapRef,
+  MaybeRef,
+  MaybeRefOrGetter,
+  ShallowOption,
+} from './types'
 import type {
   DataTag,
   DefaultError,
@@ -31,13 +36,15 @@ export type QueryOptions<
             TQueryData,
             DeepUnwrapRef<TQueryKey>
           >)
-    : QueryObserverOptions<
-        TQueryFnData,
-        TError,
-        TData,
-        TQueryData,
-        DeepUnwrapRef<TQueryKey>
-      >[Property]
+    : Property extends 'queryKey'
+      ? MaybeRef<TQueryKey>
+      : QueryObserverOptions<
+          TQueryFnData,
+          TError,
+          TData,
+          TQueryData,
+          DeepUnwrapRef<TQueryKey>
+        >[Property]
 } & ShallowOption
 
 export type UndefinedInitialQueryOptions<