diff --git a/.changeset/fix-vue-query-options-enabled.md b/.changeset/fix-vue-query-options-enabled.md new file mode 100644 index 00000000000..09ac988b038 --- /dev/null +++ b/.changeset/fix-vue-query-options-enabled.md @@ -0,0 +1,14 @@ +--- +'@tanstack/vue-query': patch +--- + +fix(vue-query): allow computed ref and other reactive values as `enabled` property in queryOptions + +This fixes a regression introduced in #10452 where `queryOptions` only accepted getter functions for the `enabled` property, but not `computed` refs or other reactive values. + +Now the `enabled` property in `queryOptions` correctly accepts: +- `boolean` values +- `Ref` +- `ComputedRef` +- `() => boolean` getter functions +- `(query) => boolean` query predicate functions diff --git a/packages/vue-query/src/__tests__/queryOptions.test-d.ts b/packages/vue-query/src/__tests__/queryOptions.test-d.ts index d7509080eba..0b87e1dd204 100644 --- a/packages/vue-query/src/__tests__/queryOptions.test-d.ts +++ b/packages/vue-query/src/__tests__/queryOptions.test-d.ts @@ -1,5 +1,5 @@ import { assertType, describe, expectTypeOf, it } from 'vitest' -import { reactive, ref } from 'vue-demi' +import { computed, reactive, ref } from 'vue-demi' import { dataTagSymbol } from '@tanstack/query-core' import { queryKey } from '@tanstack/query-test-utils' import { QueryClient } from '../queryClient' @@ -253,4 +253,49 @@ describe('queryOptions', () => { expectTypeOf(resolvedGetter.queryFn).not.toBeUndefined() expectTypeOf(resolvedGetter.queryKey).not.toBeUndefined() }) + + it('should allow computed ref as enabled property', () => { + const enabled = computed(() => true) + + // This was broken in #10452, fixed in #10458 + const options = queryOptions({ + queryKey: ['key'], + queryFn: () => Promise.resolve(1), + enabled, + }) + + expectTypeOf(options.queryKey).not.toBeUndefined() + }) + + it('should allow ref as enabled property', () => { + const enabled = ref(true) + + const options = queryOptions({ + queryKey: ['key'], + queryFn: () => Promise.resolve(1), + enabled, + }) + + expectTypeOf(options.queryKey).not.toBeUndefined() + }) + + it('should allow boolean as enabled property', () => { + const options = queryOptions({ + queryKey: ['key'], + queryFn: () => Promise.resolve(1), + enabled: true, + }) + + expectTypeOf(options.queryKey).not.toBeUndefined() + }) + + it('should allow getter function as enabled property', () => { + const options = queryOptions({ + queryKey: ['key'], + queryFn: () => Promise.resolve(1), + enabled: () => true, + }) + + expectTypeOf(options.queryKey).not.toBeUndefined() + }) }) diff --git a/packages/vue-query/src/queryOptions.ts b/packages/vue-query/src/queryOptions.ts index 38132b85bab..ee8bc8c2e5b 100644 --- a/packages/vue-query/src/queryOptions.ts +++ b/packages/vue-query/src/queryOptions.ts @@ -1,4 +1,4 @@ -import type { DeepUnwrapRef, ShallowOption } from './types' +import type { DeepUnwrapRef, MaybeRefOrGetter, ShallowOption } from './types' import type { DataTag, DefaultError, @@ -23,7 +23,14 @@ export type QueryOptions< TQueryData, TQueryKey >]: Property extends 'enabled' - ? () => Enabled> + ? + | MaybeRefOrGetter + | (() => Enabled< + TQueryFnData, + TError, + TQueryData, + DeepUnwrapRef + >) : QueryObserverOptions< TQueryFnData, TError,