fix(openapi-ts): fix generated infiniteQueryOptions not work with useSuspenseInfiniteQuery

examples/openapi-ts-tanstack-react-query/openapi-ts.config.ts

@@ -8,6 +8,11 @@ export default defineConfig({
     lint: 'eslint',
     path: './src/client',
   },
+  parser: {
+    pagination: {
+      keywords: ['tags'],
+    },
+  },
   plugins: [
     '@hey-api/client-fetch',
     '@hey-api/schemas',
@@ -19,6 +24,9 @@ export default defineConfig({
       enums: 'javascript',
       name: '@hey-api/typescript',
     },
-    '@tanstack/react-query',
+    {
+      infiniteQueryOptions: true,
+      name: '@tanstack/react-query',
+    },
   ],
 });

examples/openapi-ts-tanstack-react-query/src/App.tsx

@@ -14,11 +14,17 @@ import {
   Text,
   TextField,
 } from '@radix-ui/themes';
-import { useMutation, useQuery } from '@tanstack/react-query';
+import {
+  useInfiniteQuery,
+  useMutation,
+  useQuery,
+  useSuspenseInfiniteQuery,
+} from '@tanstack/react-query';
 import { useEffect, useState } from 'react';
 
 import {
   addPetMutation,
+  findPetsByTagsInfiniteOptions,
   getPetByIdOptions,
   updatePetMutation,
 } from './client/@tanstack/react-query.gen';
@@ -90,6 +96,28 @@ function App() {
     enabled: Boolean(petId),
   });
 
+  useInfiniteQuery({
+    ...findPetsByTagsInfiniteOptions({
+      client: localClient,
+      query: {
+        tags: [],
+      },
+    }),
+    getNextPageParam: (lastPage) => lastPage.map(({ name }) => name),
+    initialPageParam: { query: { tags: [] } },
+  });
+
+  useSuspenseInfiniteQuery({
+    ...findPetsByTagsInfiniteOptions({
+      client: localClient,
+      query: {
+        tags: [],
+      },
+    }),
+    getNextPageParam: (lastPage) => lastPage.map(({ name }) => name),
+    initialPageParam: { query: { tags: [] } },
+  });
+
   const onAddPet = async (formData: FormData) => {
     // simple form field validation to demonstrate using schemas
     if (PetSchema.required.includes('name') && !formData.get('name')) {

examples/openapi-ts-tanstack-react-query/src/client/@tanstack/react-query.gen.ts

@@ -2,6 +2,8 @@
 
 import {
   type DefaultError,
+  type InfiniteData,
+  infiniteQueryOptions,
   queryOptions,
   type UseMutationOptions,
 } from '@tanstack/react-query';
@@ -195,6 +197,91 @@ export const findPetsByTagsOptions = (options: Options<FindPetsByTagsData>) =>
     queryKey: findPetsByTagsQueryKey(options),
   });
 
+const createInfiniteParams = <
+  K extends Pick<QueryKey<Options>[0], 'body' | 'headers' | 'path' | 'query'>,
+>(
+  queryKey: QueryKey<Options>,
+  page: K,
+) => {
+  const params = { ...queryKey[0] };
+  if (page.body) {
+    params.body = {
+      ...(queryKey[0].body as any),
+      ...(page.body as any),
+    };
+  }
+  if (page.headers) {
+    params.headers = {
+      ...queryKey[0].headers,
+      ...page.headers,
+    };
+  }
+  if (page.path) {
+    params.path = {
+      ...(queryKey[0].path as any),
+      ...(page.path as any),
+    };
+  }
+  if (page.query) {
+    params.query = {
+      ...(queryKey[0].query as any),
+      ...(page.query as any),
+    };
+  }
+  return params as unknown as typeof page;
+};
+
+export const findPetsByTagsInfiniteQueryKey = (
+  options: Options<FindPetsByTagsData>,
+): QueryKey<Options<FindPetsByTagsData>> =>
+  createQueryKey('findPetsByTags', options, true);
+
+/**
+ * Finds Pets by tags.
+ *
+ * Multiple tags can be provided with comma separated strings. Use tag1, tag2, tag3 for testing.
+ */
+export const findPetsByTagsInfiniteOptions = (
+  options: Options<FindPetsByTagsData>,
+) =>
+  infiniteQueryOptions<
+    FindPetsByTagsResponse,
+    DefaultError,
+    InfiniteData<FindPetsByTagsResponse>,
+    QueryKey<Options<FindPetsByTagsData>>,
+    | Array<string>
+    | Pick<
+        QueryKey<Options<FindPetsByTagsData>>[0],
+        'body' | 'headers' | 'path' | 'query'
+      >
+  >({
+    getNextPageParam: (() => {}) as any,
+    initialPageParam: {} as any,
+    queryFn: async ({ pageParam, queryKey, signal }) => {
+      // @ts-ignore
+      const page: Pick<
+        QueryKey<Options<FindPetsByTagsData>>[0],
+        'body' | 'headers' | 'path' | 'query'
+      > =
+        typeof pageParam === 'object'
+          ? pageParam
+          : {
+              query: {
+                tags: pageParam,
+              },
+            };
+      const params = createInfiniteParams(queryKey, page);
+      const { data } = await Sdk.__registry.get().findPetsByTags({
+        ...options,
+        ...params,
+        signal,
+        throwOnError: true,
+      });
+      return data;
+    },
+    queryKey: findPetsByTagsInfiniteQueryKey(options),
+  });
+
 /**
  * Deletes a pet.
  *

packages/openapi-ts/src/plugins/@tanstack/query-core/v5/infiniteQueryOptions.ts

@@ -260,7 +260,8 @@ export const createInfiniteQueryOptions = ({
               .call(
                 $.object()
                   .pretty()
-                  .hint('@ts-ignore')
+                  .prop('initialPageParam', $.object().pretty().as('any'))
+                  .prop('getNextPageParam', $.func().as('any'))
                   .prop(
                     'queryFn',
                     $.func()

packages/openapi-ts/src/ts-dsl/expr/as.ts

@@ -33,10 +33,14 @@ export class AsTsDsl extends Mixed {
   }
 
   override toAst() {
-    return ts.factory.createAsExpression(
-      this.$node(this.expr),
-      this.$type(this.type),
-    );
+    const exprNode = this.$node(this.expr);
+    // Wrap function expressions in parentheses to ensure correct precedence
+    // e.g., (() => {}) as any instead of () => {} as any
+    const wrappedExpr =
+      ts.isArrowFunction(exprNode) || ts.isFunctionExpression(exprNode)
+        ? ts.factory.createParenthesizedExpression(exprNode)
+        : exprNode;
+    return ts.factory.createAsExpression(wrappedExpr, this.$type(this.type));
   }
 }