Skip to content

fix(vue-query): allow computed ref as enabled property in queryOptions #10465

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
byungsker wants to merge 1 commit into
base: main
Choose a base branch
from
+69 −3
Open

fix(vue-query): allow computed ref as enabled property in queryOptions #10465

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
14 changes: 14 additions & 0 deletions .changeset/fix-vue-query-options-enabled.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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<boolean>`
- `ComputedRef<boolean>`
- `() => boolean` getter functions
- `(query) => boolean` query predicate functions
47 changes: 46 additions & 1 deletion packages/vue-query/src/__tests__/queryOptions.test-d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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'
Expand Down Expand Up @@ -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()
})
Comment on lines +292 to +300
Copy link
Copy Markdown
Contributor

@coderabbitai coderabbitai bot Apr 12, 2026 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🛠️ Refactor suggestion | 🟠 Major

🧩 Analysis chain

🏁 Script executed:

#!/bin/bash
set -euo pipefail

# Verify whether predicate-form coverage already exists in this type test file.
rg -n -C2 "enabled:\s*\(\s*query\s*\)\s*=>\s*" packages/vue-query/src/__tests__/queryOptions.test-d.ts

# Show current enabled-form test coverage for comparison.
rg -n -C2 "enabled:\s*" packages/vue-query/src/__tests__/queryOptions.test-d.ts

Repository: TanStack/query

Length of output: 40

🏁 Script executed:

# First, check if the file exists and how many lines it has
wc -l packages/vue-query/src/__tests__/queryOptions.test-d.ts

# Read lines around 292-300 to see the actual code
sed -n '280,310p' packages/vue-query/src/__tests__/queryOptions.test-d.ts

Repository: TanStack/query

Length of output: 635

🏁 Script executed:

# Search for all 'enabled' property patterns in the test file
rg -n "enabled" packages/vue-query/src/__tests__/queryOptions.test-d.ts

# Also check what the queryOptions type signature accepts for enabled parameter
fd -t f queryOptions packages/vue-query/src --type typescript --type tsx | head -5

Repository: TanStack/query

Length of output: 678

🏁 Script executed:

# Find the queryOptions implementation in vue-query
fd -t f queryOptions.ts packages/vue-query/src --exclude "__tests__"

# Also check the useQuery type definition to understand enabled parameter
fd -t f "useQuery" packages/vue-query/src -e ts -e tsx | grep -v test | head -5

Repository: TanStack/query

Length of output: 223

🏁 Script executed:

# Check the queryOptions.ts file to understand the enabled parameter type definition
cat -n packages/vue-query/src/queryOptions.ts

Repository: TanStack/query

Length of output: 4162

🏁 Script executed:

# Check what the Enabled type is in query-core
rg -n "type Enabled" packages/query-core/src

# Also check the QueryObserverOptions to understand enabled parameter fully
rg -n -A 5 "enabled" packages/query-core/src/types.ts | head -30

Repository: TanStack/query

Length of output: 843

🏁 Script executed:

# Get the full definition of the Enabled type
rg -n -A 10 "^export type Enabled<" packages/query-core/src/types.ts

Repository: TanStack/query

Length of output: 370

Add a type test for the predicate form enabled: () => (query) => boolean to prevent regression.

The current test coverage includes computed ref, ref, boolean, and a simple getter function returning true. However, the Enabled type also accepts a predicate function that receives the query object: (query) => boolean. Add a dedicated test case that validates this form through the getter—for example, enabled: () => (query) => boolean—to ensure full type coverage.

🤖 Prompt for AI Agents 
Verify each finding against the current code and only fix it if needed.

In `@packages/vue-query/src/__tests__/queryOptions.test-d.ts` around lines 292 -
300, Add a new type test that verifies the predicate getter form for the enabled
option: when calling queryOptions with enabled: () => (query) => boolean the
resulting options still have the correct types. Specifically, update the test
suite around the queryOptions usage (the existing test that uses enabled: () =>
true) to add another it block that uses enabled: () => (q) => typeof q !==
'undefined' or a simple (q) => true predicate and assert
expectTypeOf(options.queryKey).not.toBeUndefined(); reference the queryOptions
call and the enabled getter/predicate shape to ensure the Enabled type accepting
(query) => boolean is covered.

Copy link
Copy Markdown
Contributor Author

@byungsker byungsker Apr 13, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for the review!

Regarding the query predicate test suggestion: I tested it and found that the query predicate form (query) => boolean actually doesn't work with queryOptions - it throws a type error even on the current main branch. This seems to be a pre-existing limitation, not something introduced or changed by this PR.

This PR's scope is specifically fixing the regression from #10452 where ComputedRef, Ref, and plain boolean values stopped working. The added tests cover these cases.

If predicate support in queryOptions is desired, that would be a separate feature request/issue.

Copy link
Copy Markdown
Contributor

@coderabbitai coderabbitai bot Apr 13, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@byungsker, thanks for testing and clarifying! That's a good point — the predicate form (query) => boolean being unsupported in queryOptions is a pre-existing limitation unrelated to this PR. The existing tests you've added correctly cover the regression cases from #10452 (ComputedRef, Ref, and plain boolean), and the scope of this PR is appropriate.

Would you like me to open a follow-up GitHub issue to track adding predicate ((query) => boolean) support to queryOptions as a separate feature request?

✏️ Learnings added 
Learnt from: byungsker
Repo: TanStack/query PR: 10465
File: packages/vue-query/src/__tests__/queryOptions.test-d.ts:292-300
Timestamp: 2026-04-13T15:15:48.626Z
Learning: In `packages/vue-query/src/queryOptions.ts`, the predicate form of `enabled` — i.e., `(query) => boolean` — is not supported by `queryOptions` (throws a TypeScript error). This is a pre-existing limitation that exists even on the main branch, unrelated to any specific PR. It is distinct from the simple getter form `() => boolean` which is supported. Predicate support in `queryOptions` would require a separate feature implementation.

Note: Learnings are effective only in the context of similar code segments. To apply general coding guidelines, please configure review instructions. You can manage existing learnings in the app.

🧠 Learnings used 
Learnt from: sukvvon
Repo: TanStack/query PR: 9892
File: packages/solid-query-persist-client/src/__tests__/PersistQueryClientProvider.test.tsx:331-335
Timestamp: 2025-11-22T09:06:05.219Z
Learning: In TanStack/query test files, when a queryFn contains side effects (e.g., setting flags for test verification), prefer async/await syntax for clarity; when there are no side effects, prefer the .then() pattern for conciseness.

Learnt from: oscartbeaumont
Repo: TanStack/query PR: 9564
File: packages/solid-query-devtools/src/production.tsx:2-3
Timestamp: 2025-08-19T03:18:18.303Z
Learning: In the solid-query-devtools package, the codebase uses a pattern of type-only default imports combined with typeof for component type annotations (e.g., `import type SolidQueryDevtoolsComp from './devtools'` followed by `typeof SolidQueryDevtoolsComp`). This pattern is consistently used across index.tsx and production.tsx files, and the maintainers prefer consistency over changing this approach.

})
11 changes: 9 additions & 2 deletions packages/vue-query/src/queryOptions.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import type { DeepUnwrapRef, ShallowOption } from './types'
import type { DeepUnwrapRef, MaybeRefOrGetter, ShallowOption } from './types'
import type {
DataTag,
DefaultError,
Expand All @@ -23,7 +23,14 @@ export type QueryOptions<
TQueryData,
TQueryKey
>]: Property extends 'enabled'
? () => Enabled<TQueryFnData, TError, TQueryData, DeepUnwrapRef<TQueryKey>>
?
| MaybeRefOrGetter<boolean | undefined>
| (() => Enabled<
TQueryFnData,
TError,
TQueryData,
DeepUnwrapRef<TQueryKey>
>)
: QueryObserverOptions<
TQueryFnData,
TError,
Expand Down
Loading