Skip to content

fix(vue-query): Support infiniteQueryOptions for MaybeRef argument #9634

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

Merged
merged 6 commits into from
Sep 22, 2025
Merged

fix(vue-query): Support infiniteQueryOptions for MaybeRef argument #9634

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
44563c3
test(vue-query): add type-check test for useInfiniteQuery with infini…
hriday330 Sep 9, 2025
a028f88
fix(vue-query): wrap useInfiniteQuery options in MaybeRefOrGetter
hriday330 Sep 9, 2025
cec9590
remove type problem example
hriday330 Sep 9, 2025
ee80ed9
test(vue-query): add test for plain options getter
hriday330 Sep 10, 2025
fe88f47
ci: apply automated fixes
autofix-ci[bot] Sep 14, 2025
f42ddf2
Merge branch 'main' into use-infinite-queries-support-infinite-query-…
DamianOsipiuk Sep 22, 2025
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
15 changes: 15 additions & 0 deletions packages/vue-query/src/__tests__/useInfiniteQuery.test-d.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import { describe, expectTypeOf, it } from 'vitest'
import { computed, reactive } from 'vue-demi'
import { sleep } from '@tanstack/query-test-utils'
import { useInfiniteQuery } from '../useInfiniteQuery'
import { infiniteQueryOptions } from '../infiniteQueryOptions'
import type { InfiniteData } from '@tanstack/query-core'

describe('Discriminated union return type', () => {
Expand Down Expand Up @@ -95,4 +96,18 @@ describe('Discriminated union return type', () => {
expectTypeOf(query.data).toEqualTypeOf<InfiniteData<string, unknown>>()
}
})

it('should accept computed options using infiniteQueryOptions', () => {
const options = computed(() => infiniteQueryOptions({
queryKey: ['infiniteQuery'],
queryFn: () => sleep(0).then(() => 'Some data'),
getNextPageParam: () => undefined,
initialPageParam: 0,
}))
const query = reactive(useInfiniteQuery(options))

if (query.isSuccess) {
expectTypeOf(query.data).toEqualTypeOf<InfiniteData<string, unknown>>()
}
})
})
5 changes: 3 additions & 2 deletions packages/vue-query/src/useBaseQuery.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,7 @@ import type {
import type { QueryClient } from './queryClient'
import type { UseQueryOptions } from './useQuery'
import type { UseInfiniteQueryOptions } from './useInfiniteQuery'
import type { MaybeRefOrGetter } from './types'

export type UseBaseQueryReturnType<
TData,
Expand Down Expand Up @@ -58,14 +59,14 @@ export function useBaseQuery<
TPageParam,
>(
Observer: typeof QueryObserver,
options: UseQueryOptionsGeneric<
options: MaybeRefOrGetter<UseQueryOptionsGeneric<
TQueryFnData,
TError,
TData,
TQueryData,
TQueryKey,
TPageParam
>,
>>,
queryClient?: QueryClient,
Copy link
Contributor

Choose a reason for hiding this comment

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

💡 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 toValue from vue-demi alongside your computed import.
  • Change 
    const clonedOptions = cloneDeepUnref(options as any)
    to 
    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.

): UseBaseQueryReturnType<TData, TError> {
if (process.env.NODE_ENV === 'development') {
Expand Down
14 changes: 7 additions & 7 deletions packages/vue-query/src/useInfiniteQuery.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -72,13 +72,13 @@ export function useInfiniteQuery<
TQueryKey extends QueryKey = QueryKey,
TPageParam = unknown,
>(
options: DefinedInitialDataInfiniteOptions<
options: MaybeRefOrGetter<DefinedInitialDataInfiniteOptions<
TQueryFnData,
TError,
TData,
TQueryKey,
TPageParam
>,
>>,
queryClient?: QueryClient,
): UseInfiniteQueryReturnType<TData, TError>

Expand All @@ -89,13 +89,13 @@ export function useInfiniteQuery<
TQueryKey extends QueryKey = QueryKey,
TPageParam = unknown,
>(
options: UndefinedInitialDataInfiniteOptions<
options: MaybeRefOrGetter<UndefinedInitialDataInfiniteOptions<
TQueryFnData,
TError,
TData,
TQueryKey,
TPageParam
>,
>>,
queryClient?: QueryClient,
): UseInfiniteQueryReturnType<TData, TError>

Expand All @@ -106,18 +106,18 @@ export function useInfiniteQuery<
TQueryKey extends QueryKey = QueryKey,
TPageParam = unknown,
>(
options: UseInfiniteQueryOptions<
options: MaybeRefOrGetter<UseInfiniteQueryOptions<
TQueryFnData,
TError,
TData,
TQueryKey,
TPageParam
>,
>>,
queryClient?: QueryClient,
): UseInfiniteQueryReturnType<TData, TError>

export function useInfiniteQuery(
options: UseInfiniteQueryOptions,
options: MaybeRefOrGetter<UseInfiniteQueryOptions> ,
queryClient?: QueryClient,
) {
return useBaseQuery(
Expand Down