diff --git a/.changeset/fix-vue-query-options-query-key-reactive.md b/.changeset/fix-vue-query-options-query-key-reactive.md new file mode 100644 index 00000000000..744a0d8b49e --- /dev/null +++ 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` +- `ComputedRef` +- `() => QueryKey` (getter) diff --git a/packages/vue-query/src/__tests__/queryOptions.test-d.ts b/packages/vue-query/src/__tests__/queryOptions.test-d.ts index 0b87e1dd204..5d7ed19c9e7 100644 --- 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('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('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 index ee8bc8c2e5b..2c05a0cb969 100644 --- a/packages/vue-query/src/queryOptions.ts +++ b/packages/vue-query/src/queryOptions.ts @@ -31,13 +31,15 @@ export type QueryOptions< TQueryData, DeepUnwrapRef >) - : QueryObserverOptions< - TQueryFnData, - TError, - TData, - TQueryData, - DeepUnwrapRef - >[Property] + : Property extends 'queryKey' + ? MaybeRefOrGetter + : QueryObserverOptions< + TQueryFnData, + TError, + TData, + TQueryData, + DeepUnwrapRef + >[Property] } & ShallowOption export type UndefinedInitialQueryOptions<