fix(vue-query): Support infiniteQueryOptions for MaybeRef argument #9634
Conversation
WalkthroughUpdates type signatures of useBaseQuery and useInfiniteQuery to accept MaybeRefOrGetter-wrapped options. Adds a new helper Changes
Sequence Diagram(s)Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes Pre-merge checks (2 passed, 1 warning)❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
Poem
Tip 👮 Agentic pre-merge checks are now available in preview!Pro plan users can now enable pre-merge checks in their settings to enforce checklists before merging PRs.
Please see the documentation for more information. Example: reviews:
pre_merge_checks:
custom_checks:
- name: "Undocumented Breaking Changes"
mode: "warning"
instructions: |
Pass/fail criteria: All breaking changes to public APIs, CLI flags, environment variables, configuration keys, database schemas, or HTTP/GraphQL endpoints must be documented in the "Breaking Change" section of the PR description and in CHANGELOG.md. Exclude purely internal or private changes (e.g., code not exported from package entry points or explicitly marked as internal).Please share your feedback with us on this Discord post. 📜 Recent review detailsConfiguration used: CodeRabbit UI Review profile: CHILL Plan: Pro 📒 Files selected for processing (2)
🚧 Files skipped from review as they are similar to previous changes (2)
✨ Finishing Touches
🧪 Generate unit tests
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 |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (2)
packages/vue-query/src/__tests__/useInfiniteQuery.test-d.tsx (1)
100-112: Add a getter-based type test to cover MaybeRefOrGetter fully.You validated computed(Ref) inputs; please also assert a plain getter (() => options) works, since the API now accepts MaybeRefOrGetter at the top level.
Apply this patch after Line 112:
+ it('should accept getter options using infiniteQueryOptions', () => { + const optionsGetter = () => + infiniteQueryOptions({ + queryKey: ['infiniteQuery'], + queryFn: () => sleep(0).then(() => 'Some data'), + getNextPageParam: () => undefined, + initialPageParam: 0, + }) + const query = reactive(useInfiniteQuery(optionsGetter)) + if (query.isSuccess) { + expectTypeOf(query.data).toEqualTypeOf<InfiniteData<string, unknown>>() + } + })packages/vue-query/src/useInfiniteQuery.ts (1)
120-120: Tiny whitespace nit.There’s an extra space before the comma.
Apply:
-export function useInfiniteQuery( - options: MaybeRefOrGetter<UseInfiniteQueryOptions> , +export function useInfiniteQuery( + options: MaybeRefOrGetter<UseInfiniteQueryOptions>,
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (3)
packages/vue-query/src/__tests__/useInfiniteQuery.test-d.tsx(2 hunks)packages/vue-query/src/useBaseQuery.ts(2 hunks)packages/vue-query/src/useInfiniteQuery.ts(3 hunks)
🧰 Additional context used
🧬 Code graph analysis (3)
packages/vue-query/src/useBaseQuery.ts (1)
packages/vue-query/src/types.ts (1)
MaybeRefOrGetter(27-27)
packages/vue-query/src/__tests__/useInfiniteQuery.test-d.tsx (2)
packages/vue-query/src/useInfiniteQuery.ts (1)
useInfiniteQuery(119-128)packages/query-core/src/types.ts (1)
InfiniteData(204-207)
packages/vue-query/src/useInfiniteQuery.ts (3)
packages/vue-query/src/types.ts (1)
MaybeRefOrGetter(27-27)packages/vue-query/src/infiniteQueryOptions.ts (2)
DefinedInitialDataInfiniteOptions(26-42)UndefinedInitialDataInfiniteOptions(10-24)packages/react-query/src/useInfiniteQuery.ts (1)
useInfiniteQuery(72-81)
🔇 Additional comments (6)
packages/vue-query/src/__tests__/useInfiniteQuery.test-d.tsx (1)
5-5: Import looks good.Path resolution is correct for local test usage.
packages/vue-query/src/useBaseQuery.ts (1)
25-25: Type import alignment is fine.packages/vue-query/src/useInfiniteQuery.ts (4)
75-82: Overload now accepts MaybeRefOrGetter — good.This unblocks passing computed/refs for the “defined initialData” branch.
92-99: Overload now accepts MaybeRefOrGetter — good.Covers the default/undefined initialData path consistently.
109-116: Generic overload with MaybeRefOrGetter — good.Keeps inference parity while extending accepted inputs.
119-127: No changes needed for infiniteQueryOptions export
infiniteQueryOptionsis already re-exported frompackages/vue-query/src/index.ts(line 9).
| options: MaybeRefOrGetter<UseQueryOptionsGeneric< | ||
| TQueryFnData, | ||
| TError, | ||
| TData, | ||
| TQueryData, | ||
| TQueryKey, | ||
| TPageParam | ||
| >, | ||
| >>, | ||
| queryClient?: QueryClient, |
There was a problem hiding this comment.
💡 Verification agent
🧩 Analysis chain
Unwrap MaybeRefOrGetter at the call site to avoid stale options.
Now that options can be a getter, ensure it’s evaluated before deep-unref so dependencies are tracked and runtime receives an object, not a function.
Apply this change outside the shown hunk:
- Import toValue from vue-demi with the other imports.
- Evaluate options via toValue before cloneDeepUnref.
Example changes:
- computed,
+ computed,
+ toValue,- const clonedOptions = cloneDeepUnref(options as any)
+ const clonedOptions = cloneDeepUnref(toValue(options) as any)Run to confirm utils already handles getters (if so, the toValue change is optional; if not, it’s required):
🏁 Script executed:
#!/bin/bash
# Verify cloneDeepUnref unwraps getters internally; if not, prefer toValue(options) at call site.
rg -n --glob 'packages/vue-query/src/**' 'cloneDeepUnref\(' -C2
rg -n --glob 'packages/vue-query/src/**' '\btoValue\b' -C2
# Sanity-check: ensure no places still assume options is non-function
rg -n --glob 'packages/vue-query/src/**' 'typeof clonedOptions\.enabled === .function.'Length of output: 14628
Import toValue and unwrap options before cloning
- Add
toValuefromvue-demialongside yourcomputedimport. - Change
to
const clonedOptions = cloneDeepUnref(options as any)
const clonedOptions = cloneDeepUnref(toValue(options) as any)
to ensure any getter passed in options is invoked before deep-unref.
🤖 Prompt for AI Agents
In packages/vue-query/src/useBaseQuery.ts around lines 62 to 70, options may be
a getter/ref and is being deep-unrefbed without first invoking it; import
toValue from 'vue-demi' alongside the existing computed import and replace the
cloneDeepUnref(options as any) call with cloneDeepUnref(toValue(options) as any)
so any getter is evaluated before cloning/unwrapping.
Wrap all overloads of
useInfiniteQueryOptionsinMaybeRefOrGetterto support this pattern:This should fix [vue-query] useInfiniteQuery doesn't support infiniteQueryOptions with MaybeRef type
Summary by CodeRabbit
New Features
Tests