Add infinite query support for pet retrieval by tags

Enhance the OpenAPI configuration to include pagination options and update the App component to utilize both infinite and suspense infinite queries for fetching pets by tags. Introduce new utility functions for infinite query handling in the generated client code.

Author: manudeli

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', 'limit', 'offset', 'cursor', 'after', 'before'],
+    },
+  },
   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));
   }
 }