Uh oh!
There was an error while loading. Please reload this page.
fix(vue-query): allow computed ref as enabled property in queryOptions - #10465
Conversation
FixesTanStack#10458 The enabled property in QueryOptions type was incorrectly restricted to only accept getter functions (() => Enabled). This prevented using computed refs and other Vue reactive values. This change aligns QueryOptions.enabled type with UseQueryOptions.enabled, allowing: - boolean values - Ref<boolean> - ComputedRef<boolean> - () => boolean getter functions - (query) => boolean query predicates
📝 WalkthroughWalkthroughThis patch fixes a regression in Changes
Poem
Estimated code review effort🎯 2 (Simple) | ⏱️ ~12 minutes 🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
View your CI Pipeline Execution ↗ for commit 2d8cbde
☁️ Nx Cloud last updated this comment at |
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@packages/vue-query/src/__tests__/queryOptions.test-d.ts`:
- Around line 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.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro
Run ID: 12a9535e-07f6-4b37-824a-c5009c81eb9d
📒 Files selected for processing (3)
.changeset/fix-vue-query-options-enabled.mdpackages/vue-query/src/__tests__/queryOptions.test-d.tspackages/vue-query/src/queryOptions.ts
| it('should allow getter function as enabled property', () => { | ||
| const options = queryOptions({ | ||
| queryKey: ['key'], | ||
| queryFn: () => Promise.resolve(1), | ||
| enabled: () => true, | ||
| }) | ||
| expectTypeOf(options.queryKey).not.toBeUndefined() | ||
| }) |
There was a problem hiding this comment.
🛠️ Refactor suggestion | 🟠 Major
🧩 Analysis chain
🏁 Script executed:
#!/bin/bashset -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.tsRepository: 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.tsRepository: 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 -5Repository: 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 -5Repository: 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.tsRepository: 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 -30Repository: 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.tsRepository: 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.
There was a problem hiding this comment.
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.
There was a problem hiding this comment.
@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.
Uh oh!
There was an error while loading. Please reload this page.
TanStack#10465) FixesTanStack#10458 The enabled property in QueryOptions type was incorrectly restricted to only accept getter functions (() => Enabled). This prevented using computed refs and other Vue reactive values. This change aligns QueryOptions.enabled type with UseQueryOptions.enabled, allowing: - boolean values - Ref<boolean> - ComputedRef<boolean> - () => boolean getter functions - (query) => boolean query predicates Co-authored-by: Damian Osipiuk <osipiukd+git@gmail.com>
🎯 Changes
Fixes#10458
The
enabledproperty inQueryOptionstype was incorrectly restricted to only accept getter functions (() => Enabled). This prevented usingcomputedrefs and other Vue reactive values, which is a regression from #10452.This change aligns
QueryOptions.enabledtype withUseQueryOptions.enabled, allowing:booleanvaluesRef<boolean>ComputedRef<boolean>() => booleangetter functions(query) => booleanquery predicates✅ Checklist
pnpm run test:pr.🚀 Release Impact
Summary by CodeRabbit
enabledquery option for Vue Query. It now correctly accepts direct reactive boolean values, computed properties, and plain boolean literals alongside existing function-based controls. This improvement allows developers to use simpler, more natural patterns for controlling query execution state without unnecessary function wrappers.