Skip to content

useInfiniteQuery should support dynamic pagination parameter location #2352

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.

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
1 task done
DevSnap opened this issue Jun 9, 2025 · 1 comment
Open
1 task done
Labels
enhancement New feature or request openapi-react-query Relevant to openapi-react-query

Comments

@DevSnap
Copy link

DevSnap commented Jun 9, 2025

Description

The current implementation of useInfiniteQuery in the generated client forces pagination via a pageParamName, injecting pageParam directly into the query parameters.

Example of the generated usage:

const { data } = api.useInfiniteQuery(
  "post",
  "/foods",
  {
    body,
  },
  {
    pageParamName: "pageIndex",
    initialPageParam: 1,
    getNextPageParam: (lastPage) => (lastPage.pageIndex) + 1,
  }
);

Internally, this injects the page parameter like so:

    useInfiniteQuery: (method, path, init, options, queryClient) => {
      const { pageParamName = "cursor", ...restOptions } = options;
      const { queryKey } = queryOptions(method, path, init);
      return useInfiniteQuery(
        {
          queryKey,
          queryFn: async ({ queryKey: [method, path, init], pageParam = 0, signal }) => {
            const mth = method.toUpperCase() as Uppercase<typeof method>;
            const fn = client[mth] as ClientMethod<Paths, typeof method, Media>;
            const mergedInit = {
              ...init,
              signal,
              params: {
                ...(init?.params || {}),
                query: {
                  ...(init?.params as { query?: DefaultParamsOption })?.query,
                  [pageParamName]: pageParam,
                },
              },
            };

            const { data, error } = await fn(path, mergedInit as any);
            if (error) {
              throw error;
            }
            return data;
          },
          ...restOptions,
        },
        queryClient,
      );
    },

This implementation assumes that pagination is always query-based and can be controlled by injecting pageParam via a named key (e.g., pageIndex). However, this does not work for APIs where pagination is passed in the request body or headers.

Proposal

Introduce a new optional parameter applyPagination:

const { data } = api.useInfiniteQuery(
  "post",
  "/foods",
  {
    body,
  },
  {
    applyPagination: ({ pageParam }) => ({
      body: { page: pageParam },
      //or maybe
      headers: { "X-Page": pageParam }
    }),
    initialPageParam: 1,
    getNextPageParam: (lastPage) => (lastPage.pageIndex) + 1,
  }
);

Internally, this function is called to merge pagination data into the request options:

useInfiniteQuery: (method, path, init, options, queryClient) => {
 // ...code omitted for brevity
  const mergedInit = {
    ...init,
    signal,
    ...applyPagination?.({ pageParam }),
  };
// ...more code follows

Extra

@DevSnap DevSnap added enhancement New feature or request openapi-react-query Relevant to openapi-react-query labels Jun 9, 2025
@mpash
Copy link

mpash commented Jun 10, 2025

Could be related to #2258, too

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request openapi-react-query Relevant to openapi-react-query
Projects
None yet
Development

No branches or pull requests

2 participants