Skip to content

[Vue] useInfiniteFindMany ignores pageParam — infinite pagination never advances (diverges from React adapter) #2713

@DouglasCalora

Description

@DouglasCalora

Describe the bug

In the Vue TanStack Query runtime, useInfiniteFindMany never paginates: every page after the first re-fetches the initial args. The pageParam returned by getNextPageParam is ignored because the default queryFn doesn't read it. The React runtime handles it correctly (pageParam ?? args), so this is Vue-specific.

Affected versions
Confirmed in 3.7.1, 3.7.2 (latest) and 3.8.0-beta.3 (canary) — the compiled queryFn is identical across them.

Root cause
useInternalInfiniteQuery in the Vue runtime builds the default queryFn ignoring pageParam:

Vue (dist/vue.js):

queryFn: ({ signal }) => {
  const reqUrl = makeUrl(endpoint, model, operation, argsValue); // argsValue, not pageParam
  return fetcher(reqUrl, { signal }, fetch);
},
initialPageParam: toValue(argsValue),

React (dist/react.js) — correct:

queryFn: ({ pageParam, signal }) =>
  fetcher(makeUrl(endpoint, model, operation, pageParam ?? args), { signal }, fetch),
initialPageParam: args,

The Vue version destructures only { signal } and uses the closed-over argsValue, so the pageParam produced by getNextPageParam never reaches makeUrl.

Reproduction

const { fetchNextPage } = client.post.useInfiniteFindMany(
  { take: 10, orderBy: { createdAt: 'desc' } },
  {
    getNextPageParam: (lastPage, pages) =>
      lastPage.length < 10
        ? undefined
        : { take: 10, skip: pages.length * 10, orderBy: { createdAt: 'desc' } },
  },
);
// call fetchNextPage()

getNextPageParam correctly returns { skip: 10, ... }, but the outgoing request still sends skip: 0, so page 2 returns the same rows as page 1 (duplicates) and pagination never advances.

Expected behavior
The Vue runtime should use pageParam, like React:

queryFn: ({ pageParam, signal }) =>
  fetcher(makeUrl(endpoint, model, operation, pageParam ?? toValue(args)), { signal }, fetch),

Workaround
Override queryFn in the options passed to useInfiniteFindMany (options are spread after the defaults, so it wins), rebuilding the request with makeUrl/fetcher and pageParam ?? args.

Environment
@zenstackhq/tanstack-query 3.7.2 (also 3.7.1, 3.8.0-beta.3)
Vue runtime (/vue), @tanstack/vue-query v5, Nuxt 4

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions