7nohe / openapi-react-query-codegen

OpenAPI React Query Codegen is a code generator for creating React Query (also known as TanStack Query) hooks based on your OpenAPI schema.
https://openapi-react-query-codegen.vercel.app
MIT License
298 stars 30 forks source link

feat: Add useInfiniteQuery support #122

Closed 7nohe closed 3 months ago

7nohe commented 5 months ago

117

This new feature will generate a function in infiniteQueries.ts when the name specified by the pageParam option exists in the query parameters and the name specified by the nextPageParam option exists in the response.

Input:

  /paginated-pets:
    get:
      description: |
        Returns paginated pets from the system that the user has access to
      operationId: findPaginatedPets
      parameters:
        - name: page
          in: query
          description: page number
          required: false
          schema:
            type: integer
            format: int32
        - name: tags
          in: query
          description: tags to filter by
          required: false
          style: form
          schema:
            type: array
            items:
              type: string
        - name: limit
          in: query
          description: maximum number of results to return
          required: false
          schema:
            type: integer
            format: int32
      responses:
        '200':
          description: pet response
          content:
            application/json:
              schema:
                type: object
                properties:
                  pets:
                    type: array
                    items:
                      $ref: '#/components/schemas/Pet'
                  nextPage: 
                    type: integer
                    format: int32
                    minimum: 1

Output:

export const useDefaultServiceFindPaginatedPetsInfinite = <
  TData = InfiniteData<Common.DefaultServiceFindPaginatedPetsDefaultResponse>,
  TError = unknown,
  TQueryKey extends Array<unknown> = unknown[]
>(
  {
    limit,
    tags,
  }: {
    limit?: number;
    tags?: string[];
  } = {},
  queryKey?: TQueryKey,
  options?: Omit<UseInfiniteQueryOptions<TData, TError>, "queryKey" | "queryFn">
) =>
  useInfiniteQuery({
    queryKey: Common.UseDefaultServiceFindPaginatedPetsKeyFn(
      { limit, tags },
      queryKey
    ),
    queryFn: ({ pageParam }) =>
      DefaultService.findPaginatedPets({
        limit,
        page: pageParam as number,
        tags,
      }) as TData,
    initialPageParam: 1,
    getNextPageParam: (response) => (response as { nextPage: number }).nextPage,
    ...options,
  });

This can be used as follows:

export default function PaginatedPets() {
  const { data, fetchNextPage } = useDefaultServiceFindPaginatedPetsInfinite({
    limit: 10,
    tags: [],
  });

  return ...
}
github-actions[bot] commented 5 months ago

Coverage Report

Status Category Percentage Covered / Total
🟢 Lines 99.01% (🎯 95%) 2014 / 2034
🟢 Statements 99.01% (🎯 95%) 2014 / 2034
🟢 Functions 100% (🎯 95%) 41 / 41
🟢 Branches 94.84% (🎯 85%) 184 / 194
File Coverage
File Stmts % Branch % Funcs % Lines Uncovered Lines
Changed Files
src/constants.mts 100% 100% 100% 100%
src/createExports.mts 100% 100% 100% 100%
src/createSource.mts 100% 100% 100% 100%
src/createUseQuery.mts 99.41% 97.05% 100% 99.41% 267-270
src/generate.mts 100% 100% 100% 100%
Generated in workflow #308
7nohe commented 5 months ago

npm publish

HJK181 commented 4 months ago

What's the state of the PR?