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

KimHyeongRae0 · TkDodo · DamianOsipiuk · web-flow · commit 139e67ccab2c · 2026-05-13T23:12:23.000+02:00
* fix(vue-query): allow computed ref as queryKey property in queryOptions Closes #10525 * fix(vue-query): widen queryKey to MaybeRefOrGetter to match enabled toValueDeep already calls `() => T` at runtime, so the queryKey type should accept the same reactive forms as enabled: Ref, ComputedRef, and getters. Adds a getter test and updates the changeset. --------- Co-authored-by: Dominik Dorfmeister 🔮 <office@dorfmeister.cc> Co-authored-by: Damian Osipiuk <osipiukd+git@gmail.com>
diff --git a/.changeset/fix-vue-query-options-query-key-reactive.md b/.changeset/fix-vue-query-options-query-key-reactive.md
@@ -0,0 +1,13 @@
+---
+'@tanstack/vue-query': patch
+---
+
+fix(vue-query): allow reactive and getter 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 getter functions. The related fix in #10465 only covered the `enabled` property.
+
+Now the `queryKey` property in `queryOptions` accepts the same reactive forms as `enabled`:
+- Plain `QueryKey` arrays
+- `Ref<QueryKey>`
+- `ComputedRef<QueryKey>`
+- `() => QueryKey` (getter)
diff --git a/packages/vue-query/src/__tests__/queryOptions.test-d.ts b/packages/vue-query/src/__tests__/queryOptions.test-d.ts
@@ -298,4 +298,38 @@ 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()
+  })
+
+  it('should allow getter function as queryKey', () => {
+    const id = ref<string | null>('1')
+
+    const options = queryOptions({
+      queryKey: () => ['foo', id.value] as const,
+      queryFn: () => Promise.resolve({ id: '1' }),
+    })
+
+    expectTypeOf(options.queryKey).not.toBeUndefined()
+  })
 })
diff --git a/packages/vue-query/src/queryOptions.ts b/packages/vue-query/src/queryOptions.ts
@@ -31,13 +31,15 @@ export type QueryOptions<
             TQueryData,
             DeepUnwrapRef<TQueryKey>
           >)
-    : QueryObserverOptions<
-        TQueryFnData,
-        TError,
-        TData,
-        TQueryData,
-        DeepUnwrapRef<TQueryKey>
-      >[Property]
+    : Property extends 'queryKey'
+      ? MaybeRefOrGetter<TQueryKey>
+      : QueryObserverOptions<
+          TQueryFnData,
+          TError,
+          TData,
+          TQueryData,
+          DeepUnwrapRef<TQueryKey>
+        >[Property]
 } & ShallowOption
 
 export type UndefinedInitialQueryOptions<
