feat: ✨ infiniteQueryOptions add with test code

minchodang · minchodang · commit 9b318012eca1 · 2025-10-03T14:29:35.000+09:00
diff --git a/packages/openapi-react-query/src/index.ts b/packages/openapi-react-query/src/index.ts
@@ -79,6 +79,59 @@ export type QueryOptionsFunction<Paths extends Record<string, Record<HttpMethod,
   }
 >;
 
+// Helper type to infer TPageParam type
+type InferPageParamType<T> = T extends { initialPageParam: infer P } ? P : unknown;
+
+export type InfiniteQueryOptionsFunction<
+  Paths extends Record<string, Record<HttpMethod, {}>>,
+  Media extends MediaType,
+> = <
+  Method extends HttpMethod,
+  Path extends PathsWithMethod<Paths, Method>,
+  Init extends MaybeOptionalInit<Paths[Path], Method>,
+  Response extends Required<FetchResponse<Paths[Path][Method], Init, Media>>,
+  Options extends Omit<
+    UseInfiniteQueryOptions<
+      Response["data"],
+      Response["error"],
+      InferSelectReturnType<InfiniteData<Response["data"]>, Options["select"]>,
+      QueryKey<Paths, Method, Path>,
+      InferPageParamType<Options>
+    >,
+    "queryKey" | "queryFn"
+  > & {
+    pageParamName?: string;
+    initialPageParam: InferPageParamType<Options>;
+  },
+>(
+  method: Method,
+  path: Path,
+  init: InitWithUnknowns<Init>,
+  options: Options,
+) => NoInfer<
+  Omit<
+    UseInfiniteQueryOptions<
+      Response["data"],
+      Response["error"],
+      InferSelectReturnType<InfiniteData<Response["data"]>, Options["select"]>,
+      QueryKey<Paths, Method, Path>,
+      InferPageParamType<Options>
+    >,
+    "queryFn"
+  > & {
+    queryFn: Exclude<
+      UseInfiniteQueryOptions<
+        Response["data"],
+        Response["error"],
+        InferSelectReturnType<InfiniteData<Response["data"]>, Options["select"]>,
+        QueryKey<Paths, Method, Path>,
+        InferPageParamType<Options>
+      >["queryFn"],
+      SkipToken | undefined
+    >;
+  }
+>;
+
 export type UseQueryMethod<Paths extends Record<string, Record<HttpMethod, {}>>, Media extends MediaType> = <
   Method extends HttpMethod,
   Path extends PathsWithMethod<Paths, Method>,
@@ -167,6 +220,7 @@ export type UseMutationMethod<Paths extends Record<string, Record<HttpMethod, {}
 
 export interface OpenapiQueryClient<Paths extends {}, Media extends MediaType = MediaType> {
   queryOptions: QueryOptionsFunction<Paths, Media>;
+  infiniteQueryOptions: InfiniteQueryOptionsFunction<Paths, Media>;
   useQuery: UseQueryMethod<Paths, Media>;
   useSuspenseQuery: UseSuspenseQueryMethod<Paths, Media>;
   useInfiniteQuery: UseInfiniteQueryMethod<Paths, Media>;
@@ -215,44 +269,47 @@ export default function createClient<Paths extends {}, Media extends MediaType =
     ...options,
   });
 
+  const infiniteQueryOptions: InfiniteQueryOptionsFunction<Paths, Media> = (method, path, init, options) => {
+    const { pageParamName = "cursor", initialPageParam, ...restOptions } = options;
+    const { queryKey } = queryOptions(method, path, init);
+
+    return {
+      queryKey,
+      initialPageParam,
+      queryFn: async ({ queryKey: [method, path, init], pageParam, 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,
+    };
+  };
+
   return {
     queryOptions,
+    infiniteQueryOptions,
     useQuery: (method, path, ...[init, options, queryClient]) =>
       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) => {
-      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,
-      );
-    },
+    useInfiniteQuery: (method, path, init, options, queryClient) =>
+      useInfiniteQuery(infiniteQueryOptions(method, path, init, options), queryClient),
     useMutation: (method, path, options, queryClient) =>
       useMutation(
         {
diff --git a/packages/openapi-react-query/test/index.test.tsx b/packages/openapi-react-query/test/index.test.tsx
@@ -1,7 +1,7 @@
-import { afterAll, beforeAll, describe, expect, it } from "vitest";
-import { server, baseUrl, useMockRequestHandler } from "./fixtures/mock-server.js";
-import type { paths } from "./fixtures/api.js";
-import createClient, { type MethodResponse } from "../src/index.js";
+import { afterAll, afterEach, beforeAll, describe, expect, it, expectTypeOf, vi } from "vitest";
+import { server, baseUrl, useMockRequestHandler } from "./fixtures/mock-server";
+import type { paths } from "./fixtures/api";
+import createClient, { type MethodResponse } from "../src/api/index";
 import createFetchClient from "openapi-fetch";
 import { fireEvent, render, renderHook, screen, waitFor, act } from "@testing-library/react";
 import {
@@ -11,6 +11,7 @@ import {
   useQuery,
   useSuspenseQuery,
   skipToken,
+  useInfiniteQuery,
 } from "@tanstack/react-query";
 import { Suspense, type ReactNode } from "react";
 import { ErrorBoundary } from "react-error-boundary";
@@ -75,9 +76,91 @@ describe("client", () => {
     expect(client).toHaveProperty("useQuery");
     expect(client).toHaveProperty("useSuspenseQuery");
     expect(client).toHaveProperty("useMutation");
+    if ("infiniteQueryOptions" in client) {
+      expect(client).toHaveProperty("infiniteQueryOptions");
+    }
   });
 
   describe("queryOptions", () => {
+    describe("infiniteQueryOptions", () => {
+      it("returns infinite query options that can be passed to useInfiniteQuery", async () => {
+        const fetchClient = createFetchClient<paths>({ baseUrl });
+        const client = createClient(fetchClient);
+
+        if (!("infiniteQueryOptions" in client)) return;
+
+        const options = client.infiniteQueryOptions(
+          "get",
+          "/paginated-data",
+          {
+            params: {
+              query: {
+                limit: 3,
+              },
+            },
+          },
+          {
+            getNextPageParam: (lastPage) => lastPage.nextPage,
+            initialPageParam: 0,
+          },
+        );
+
+        expect(options).toHaveProperty("queryKey");
+        expect(options).toHaveProperty("queryFn");
+        expect(Array.isArray(options.queryKey)).toBe(true);
+        expectTypeOf(options.queryFn).toBeFunction();
+
+        useMockRequestHandler({
+          baseUrl,
+          method: "get",
+          path: "/paginated-data",
+          status: 200,
+          body: { items: [1, 2, 3], nextPage: 1 },
+        });
+
+        const { result } = renderHook(() => useInfiniteQuery(options), { wrapper });
+
+        await waitFor(() => expect(result.current.isSuccess).toBe(true));
+        expect(result.current.data?.pages[0].items).toEqual([1, 2, 3]);
+      });
+
+      it("returns infinite query options with custom pageParamName", async () => {
+        const fetchClient = createFetchClient<paths>({ baseUrl });
+        const client = createClient(fetchClient);
+
+        if (!("infiniteQueryOptions" in client)) return;
+
+        const options = client.infiniteQueryOptions(
+          "get",
+          "/paginated-data",
+          {
+            params: {
+              query: {
+                limit: 3,
+              },
+            },
+          },
+          {
+            getNextPageParam: (lastPage) => lastPage.nextPage,
+            initialPageParam: 0,
+            pageParamName: "follow_cursor",
+          },
+        );
+
+        useMockRequestHandler({
+          baseUrl,
+          method: "get",
+          path: "/paginated-data",
+          status: 200,
+          body: { items: [1, 2, 3], nextPage: 1 },
+        });
+
+        const { result } = renderHook(() => useInfiniteQuery(options), { wrapper });
+
+        await waitFor(() => expect(result.current.isSuccess).toBe(true));
+        expect(result.current.data?.pages[0].items).toEqual([1, 2, 3]);
+      });
+    });
     it("has correct parameter types", async () => {
       const fetchClient = createFetchClient<paths>({ baseUrl });
       const client = createClient(fetchClient);
@@ -158,7 +241,10 @@ describe("client", () => {
       );
 
       expectTypeOf(result.current[0].data).toEqualTypeOf<string[] | undefined>();
-      expectTypeOf(result.current[0].error).toEqualTypeOf<{ code: number; message: string } | null>();
+      expectTypeOf(result.current[0].error).toEqualTypeOf<{
+        code: number;
+        message: string;
+      } | null>();
 
       expectTypeOf(result.current[1]).toEqualTypeOf<(typeof result.current)[0]>();
 
@@ -170,7 +256,10 @@ describe("client", () => {
           }
         | undefined
       >();
-      expectTypeOf(result.current[2].error).toEqualTypeOf<{ code: number; message: string } | null>();
+      expectTypeOf(result.current[2].error).toEqualTypeOf<{
+        code: number;
+        message: string;
+      } | null>();
 
       expectTypeOf(result.current[3]).toEqualTypeOf<(typeof result.current)[2]>();
 
@@ -811,7 +900,9 @@ describe("client", () => {
           wrapper,
         });
 
-        const data = await result.current.mutateAsync({ body: { message: "Hello", replied_at: 0 } });
+        const data = await result.current.mutateAsync({
+          body: { message: "Hello", replied_at: 0 },
+        });
 
         expect(data.message).toBe("Hello");
       });
