fix: 🐛 useInfiniteQuery type safe fix

Author: minchodang

packages/openapi-react-query/src/index.ts

@@ -15,20 +15,15 @@ import {
   useQuery,
   useSuspenseQuery,
   useInfiniteQuery,
-} from '@tanstack/react-query';
+} from "@tanstack/react-query";
 import type {
   ClientMethod,
   FetchResponse,
   MaybeOptionalInit,
   Client as FetchClient,
   DefaultParamsOption,
-} from 'openapi-fetch';
-import type {
-  HttpMethod,
-  MediaType,
-  PathsWithMethod,
-  RequiredKeysOf,
-} from 'openapi-typescript-helpers';
+} from "openapi-fetch";
+import type { HttpMethod, MediaType, PathsWithMethod, RequiredKeysOf } from "openapi-typescript-helpers";
 
 // Helper type to dynamically infer the type from the `select` property
 type InferSelectReturnType<TData, TSelect> = TSelect extends (data: TData) => infer R ? R : TData;
@@ -42,22 +37,19 @@ export type QueryKey<
   Init = MaybeOptionalInit<Paths[Path], Method>,
 > = Init extends undefined ? readonly [Method, Path] : readonly [Method, Path, Init];
 
-export type QueryOptionsFunction<
-  Paths extends Record<string, Record<HttpMethod, {}>>,
-  Media extends MediaType,
-> = <
+export type QueryOptionsFunction<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>>, // note: Required is used to avoid repeating NonNullable in UseQuery types
   Options extends Omit<
     UseQueryOptions<
-      Response['data'],
-      Response['error'],
-      InferSelectReturnType<Response['data'], Options['select']>,
+      Response["data"],
+      Response["error"],
+      InferSelectReturnType<Response["data"], Options["select"]>,
       QueryKey<Paths, Method, Path>
     >,
-    'queryKey' | 'queryFn'
+    "queryKey" | "queryFn"
   >,
 >(
   method: Method,
@@ -68,129 +60,113 @@ export type QueryOptionsFunction<
 ) => NoInfer<
   Omit<
     UseQueryOptions<
-      Response['data'],
-      Response['error'],
-      InferSelectReturnType<Response['data'], Options['select']>,
+      Response["data"],
+      Response["error"],
+      InferSelectReturnType<Response["data"], Options["select"]>,
       QueryKey<Paths, Method, Path>
     >,
-    'queryFn'
+    "queryFn"
   > & {
     queryFn: Exclude<
       UseQueryOptions<
-        Response['data'],
-        Response['error'],
-        InferSelectReturnType<Response['data'], Options['select']>,
+        Response["data"],
+        Response["error"],
+        InferSelectReturnType<Response["data"], Options["select"]>,
         QueryKey<Paths, Method, Path>
-      >['queryFn'],
+      >["queryFn"],
       SkipToken | undefined
     >;
   }
 >;
 
-export type UseQueryMethod<
-  Paths extends Record<string, Record<HttpMethod, {}>>,
-  Media extends MediaType,
-> = <
+export type UseQueryMethod<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>>, // note: Required is used to avoid repeating NonNullable in UseQuery types
   Options extends Omit<
     UseQueryOptions<
-      Response['data'],
-      Response['error'],
-      InferSelectReturnType<Response['data'], Options['select']>,
+      Response["data"],
+      Response["error"],
+      InferSelectReturnType<Response["data"], Options["select"]>,
       QueryKey<Paths, Method, Path>
     >,
-    'queryKey' | 'queryFn'
+    "queryKey" | "queryFn"
   >,
 >(
   method: Method,
   url: Path,
   ...[init, options, queryClient]: RequiredKeysOf<Init> extends never
     ? [InitWithUnknowns<Init>?, Options?, QueryClient?]
     : [InitWithUnknowns<Init>, Options?, QueryClient?]
-) => UseQueryResult<InferSelectReturnType<Response['data'], Options['select']>, Response['error']>;
+) => UseQueryResult<InferSelectReturnType<Response["data"], Options["select"]>, Response["error"]>;
 
-export type UseInfiniteQueryMethod<
-  Paths extends Record<string, Record<HttpMethod, {}>>,
-  Media extends MediaType,
-> = <
+// Helper type to infer TPageParam type
+type InferPageParamType<T> = T extends { initialPageParam: infer P } ? P : unknown;
+
+export type UseInfiniteQueryMethod<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>>,
-  Select = undefined,
   Options extends Omit<
     UseInfiniteQueryOptions<
-      Response['data'],
-      Response['error'],
-      InferSelectReturnType<InfiniteData<Response['data']>, Select>,
+      Response["data"],
+      Response["error"],
+      InferSelectReturnType<InfiniteData<Response["data"]>, Options["select"]>,
       QueryKey<Paths, Method, Path>,
-      unknown
+      InferPageParamType<Options>
     >,
-    'queryKey' | 'queryFn'
+    "queryKey" | "queryFn"
   > & {
     pageParamName?: string;
-    select?: Select;
-  } = any,
+    initialPageParam: InferPageParamType<Options>;
+  },
 >(
   method: Method,
   url: Path,
   init: InitWithUnknowns<Init>,
   options: Options,
-  queryClient?: QueryClient
+  queryClient?: QueryClient,
 ) => UseInfiniteQueryResult<
-  InferSelectReturnType<InfiniteData<Response['data']>, Select>,
-  Response['error']
+  InferSelectReturnType<InfiniteData<Response["data"]>, Options["select"]>,
+  Response["error"]
 >;
 
-export type UseSuspenseQueryMethod<
-  Paths extends Record<string, Record<HttpMethod, {}>>,
-  Media extends MediaType,
-> = <
+export type UseSuspenseQueryMethod<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>>, // note: Required is used to avoid repeating NonNullable in UseQuery types
   Options extends Omit<
     UseSuspenseQueryOptions<
-      Response['data'],
-      Response['error'],
-      InferSelectReturnType<Response['data'], Options['select']>,
+      Response["data"],
+      Response["error"],
+      InferSelectReturnType<Response["data"], Options["select"]>,
       QueryKey<Paths, Method, Path>
     >,
-    'queryKey' | 'queryFn'
+    "queryKey" | "queryFn"
   >,
 >(
   method: Method,
   url: Path,
   ...[init, options, queryClient]: RequiredKeysOf<Init> extends never
     ? [InitWithUnknowns<Init>?, Options?, QueryClient?]
     : [InitWithUnknowns<Init>, Options?, QueryClient?]
-) => UseSuspenseQueryResult<
-  InferSelectReturnType<Response['data'], Options['select']>,
-  Response['error']
->;
+) => UseSuspenseQueryResult<InferSelectReturnType<Response["data"], Options["select"]>, Response["error"]>;
 
-export type UseMutationMethod<
-  Paths extends Record<string, Record<HttpMethod, {}>>,
-  Media extends MediaType,
-> = <
+export type UseMutationMethod<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>>, // note: Required is used to avoid repeating NonNullable in UseQuery types
-  Options extends Omit<
-    UseMutationOptions<Response['data'], Response['error'], Init>,
-    'mutationKey' | 'mutationFn'
-  >,
+  Options extends Omit<UseMutationOptions<Response["data"], Response["error"], Init>, "mutationKey" | "mutationFn">,
 >(
   method: Method,
   url: Path,
   options?: Options,
-  queryClient?: QueryClient
-) => UseMutationResult<Response['data'], Response['error'], Init>;
+  queryClient?: QueryClient,
+) => UseMutationResult<Response["data"], Response["error"], Init>;
 
 export interface OpenapiQueryClient<Paths extends {}, Media extends MediaType = MediaType> {
   queryOptions: QueryOptionsFunction<Paths, Media>;
@@ -207,62 +183,59 @@ export type MethodResponse<
     ? PathsWithMethod<Paths, Method>
     : never,
   Options = object,
-> =
-  CreatedClient extends OpenapiQueryClient<
-    infer Paths extends { [key: string]: any },
-    infer Media extends MediaType
-  >
-    ? NonNullable<FetchResponse<Paths[Path][Method], Options, Media>['data']>
-    : never;
+> = CreatedClient extends OpenapiQueryClient<infer Paths extends { [key: string]: any }, infer Media extends MediaType>
+  ? NonNullable<FetchResponse<Paths[Path][Method], Options, Media>["data"]>
+  : never;
 
 // TODO: Add the ability to bring queryClient as argument
 export default function createClient<Paths extends {}, Media extends MediaType = MediaType>(
-  client: FetchClient<Paths, Media>
+  client: FetchClient<Paths, Media>,
 ): OpenapiQueryClient<Paths, Media> {
   const queryFn = async <Method extends HttpMethod, Path extends PathsWithMethod<Paths, Method>>({
     queryKey: [method, path, init],
     signal,
   }: QueryFunctionContext<QueryKey<Paths, Method, Path>>) => {
     const mth = method.toUpperCase() as Uppercase<typeof method>;
     const fn = client[mth] as ClientMethod<Paths, typeof method, Media>;
-    const { data, error, response } = await fn(path, { signal, ...(init as any) }); // TODO: find a way to avoid as any
+    const { data, error, response } = await fn(path, {
+      signal,
+      ...(init as any),
+    }); // TODO: find a way to avoid as any
     if (error) {
       throw error;
     }
-    if (response.status === 204 || response.headers.get('Content-Length') === '0') {
+    if (response.status === 204 || response.headers.get("Content-Length") === "0") {
       return data ?? null;
     }
 
     return data;
   };
 
   const queryOptions: QueryOptionsFunction<Paths, Media> = (method, path, ...[init, options]) => ({
-    queryKey: (init === undefined
-      ? ([method, path] as const)
-      : ([method, path, init] as const)) as QueryKey<Paths, typeof method, typeof path>,
+    queryKey: (init === undefined ? ([method, path] as const) : ([method, path, init] as const)) as QueryKey<
+      Paths,
+      typeof method,
+      typeof path
+    >,
     queryFn,
     ...options,
   });
 
   return {
     queryOptions,
     useQuery: (method, path, ...[init, options, queryClient]) =>
-      useQuery(
-        queryOptions(method, path, init as InitWithUnknowns<typeof 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
-      ),
+      useSuspenseQuery(queryOptions(method, path, init as InitWithUnknowns<typeof init>, options), queryClient),
     useInfiniteQuery: (method, path, init, options, queryClient) => {
-      const { pageParamName = 'cursor', ...restOptions } = options;
+      const { pageParamName = "cursor", initialPageParam, ...restOptions } = options;
       const { queryKey } = queryOptions(method, path, init);
+
       return useInfiniteQuery(
         {
           queryKey,
-          queryFn: async ({ queryKey: [method, path, init], pageParam = 0, signal }) => {
+          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 = {
@@ -285,7 +258,7 @@ export default function createClient<Paths extends {}, Media extends MediaType =
           },
           ...restOptions,
         },
-        queryClient
+        queryClient,
       );
     },
     useMutation: (method, path, options, queryClient) =>
@@ -304,7 +277,7 @@ export default function createClient<Paths extends {}, Media extends MediaType =
           },
           ...options,
         },
-        queryClient
+        queryClient,
       ),
   };
 }