Add pageParamName

Author: lukasedw

Diff for: packages/openapi-react-query/src/index.ts

@@ -4,7 +4,6 @@ import {
   type UseQueryOptions,
   type UseQueryResult,
   type InfiniteData,
-  type InfiniteQueryObserverResult,
   type UseInfiniteQueryOptions,
   type UseInfiniteQueryResult,
   type UseSuspenseQueryOptions,
@@ -116,7 +115,9 @@ export type UseInfiniteQueryMethod<Paths extends Record<string, Record<HttpMetho
       unknown
     >,
     "queryKey" | "queryFn"
-  >,
+  > & {
+    pageParamName?: string;
+  },
 >(
   method: Method,
   url: Path,
@@ -198,8 +199,10 @@ export default function createClient<Paths extends {}, Media extends MediaType =
       useQuery(queryOptions(method, path, init as InitWithUnknowns<typeof init>, options), queryClient),
     useSuspenseQuery: (method, path, ...[init, options, queryClient]) =>
       useSuspenseQuery(queryOptions(method, path, init as InitWithUnknowns<typeof init>, options), queryClient),
-    useInfiniteQuery: (method, path, init, options, queryClient) =>
-      useInfiniteQuery(
+    useInfiniteQuery: (method, path, init, options, queryClient) => {
+      const { pageParamName = "cursor", ...restOptions } = options;
+
+      return useInfiniteQuery(
         {
           queryKey: [method, path, init] as const,
           queryFn: async <Method extends HttpMethod, Path extends PathsWithMethod<Paths, Method>>({
@@ -216,7 +219,7 @@ export default function createClient<Paths extends {}, Media extends MediaType =
                 ...(init?.params || {}),
                 query: {
                   ...(init?.params as { query?: DefaultParamsOption })?.query,
-                  cursor: pageParam,
+                  [pageParamName]: pageParam,
                 },
               },
             };
@@ -227,10 +230,11 @@ export default function createClient<Paths extends {}, Media extends MediaType =
             }
             return data;
           },
-          ...options,
+          ...restOptions,
         },
         queryClient,
-      ),
+      );
+    },
     useMutation: (method, path, options, queryClient) =>
       useMutation(
         {

Diff for: packages/openapi-react-query/test/index.test.tsx

@@ -822,6 +822,7 @@ describe("client", () => {
       });
     });
   });
+  // >: {"tests": ["infiniteQuery"]}
   describe("useInfiniteQuery", () => {
     it("should fetch data correctly with pagination and include cursor", async () => {
       const fetchClient = createFetchClient<paths>({ baseUrl });
@@ -990,5 +991,92 @@ describe("client", () => {
       const allItems = result.current.data?.pages.flatMap((page) => page.items);
       expect(allItems).toEqual([4, 5, 6, 1, 2, 3]);
     });
+    it("should use custom cursor params", async () => {
+      const fetchClient = createFetchClient<paths>({ baseUrl });
+      const client = createClient(fetchClient);
+
+      // First page request handler
+      const firstRequestHandler = useMockRequestHandler({
+        baseUrl,
+        method: "get",
+        path: "/paginated-data",
+        status: 200,
+        body: { items: [1, 2, 3], nextPage: 1 },
+      });
+
+      const { result, rerender } = renderHook(
+        () =>
+          client.useInfiniteQuery(
+            "get",
+            "/paginated-data",
+            {
+              params: {
+                query: {
+                  limit: 3,
+                },
+              },
+            },
+            {
+              getNextPageParam: (lastPage) => lastPage.nextPage,
+              initialPageParam: 0,
+              pageParamName: "follow_cursor",
+            },
+          ),
+        { wrapper },
+      );
+
+      // Wait for initial query to complete
+      await waitFor(() => expect(result.current.isSuccess).toBe(true));
+
+      // Verify first request
+      const firstRequestUrl = firstRequestHandler.getRequestUrl();
+      expect(firstRequestUrl?.searchParams.get("limit")).toBe("3");
+      expect(firstRequestUrl?.searchParams.get("follow_cursor")).toBe("0");
+
+      // Set up mock for second page before triggering next page fetch
+      const secondRequestHandler = useMockRequestHandler({
+        baseUrl,
+        method: "get",
+        path: "/paginated-data",
+        status: 200,
+        body: { items: [4, 5, 6], nextPage: 2 },
+      });
+
+      // Fetch next page
+      await act(async () => {
+        await result.current.fetchNextPage();
+        // Force a rerender to ensure state is updated
+        rerender();
+      });
+
+      // Wait for second page to be fetched and verify loading states
+      await waitFor(() => {
+        expect(result.current.isFetching).toBe(false);
+        expect(result.current.hasNextPage).toBe(true);
+        expect(result.current.data?.pages).toHaveLength(2);
+      });
+
+      // Verify second request
+      const secondRequestUrl = secondRequestHandler.getRequestUrl();
+      expect(secondRequestUrl?.searchParams.get("limit")).toBe("3");
+      expect(secondRequestUrl?.searchParams.get("follow_cursor")).toBe("1");
+
+      expect(result.current.data).toBeDefined();
+      expect(result.current.data?.pages[0].nextPage).toBe(1);
+
+      expect(result.current.data).toBeDefined();
+      expect(result.current.data?.pages[1].nextPage).toBe(2);
+
+      // Verify the complete data structure
+      expect(result.current.data?.pages).toEqual([
+        { items: [1, 2, 3], nextPage: 1 },
+        { items: [4, 5, 6], nextPage: 2 },
+      ]);
+
+      // Verify we can access all items through pages
+      const allItems = result.current.data?.pages.flatMap((page) => page.items);
+      expect(allItems).toEqual([1, 2, 3, 4, 5, 6]);
+    });
   });
+  // <: {"tests": ["infiniteQuery"]}
 });