7nohe / openapi-react-query-codegen

Node.js library that generates React Query (also called TanStack Query) hooks based on an OpenAPI specification file.
253 stars 25 forks source link

Issues with generating custom pagination infinite queries #139

Open hanahem opened 1 month ago

hanahem commented 1 month ago

Describe the bug The codegen tool works wonder. I've been just having a hard time generating working infinite queries.

Am I missing something on how I'm naming my pageParam and nextPageParam?

Expected behavior From the OpenAPI spec I'd expect to have such an infinite query:

    useInfiniteQuery({
      queryKey: [useGetStuffKey],
      queryFn: ({ pageParam }) =>
        getStuff({ page: pageParam as number, size: PAGE_SIZE }),
      initialPageParam: 1,
      getNextPageParam: (lastPage) =>
        lastPage.items.length === 0 ? undefined : lastPage.pagination.nextPage,
    });

But I get this from the codegen:

export const useGetStuffInfinite = <
  TData = InfiniteData<Common.GetStuffDefaultResponse>,
  TError = unknown,
  TQueryKey extends Array<unknown> = unknown[],
>({ size }: { size: number; },
  queryKey?: TQueryKey,
  options?: Omit<UseInfiniteQueryOptions<TData, TError>, "queryKey" | "queryFn">
) =>
  useInfiniteQuery({
    queryKey: Common.UseGetStuffKeyFn({ size }, queryKey),
    queryFn: ({ pageParam }) =>
      getStuff({ page: pageParam as number, size }) as TData,
    initialPageParam: 1,
    getNextPageParam: (response) => (response as { nextPage: number }).nextPage,
    ...options,
  });

OpenAPI spec file Here are bits of my openapi spec file, I'm trying to use the /stuff endpoint, I only kept what's necessary here.

/stuff:
    get:
      tags:
        - My Stuff
      operationId: get_stuff
      parameters:
        - name: page
          in: query
          description: The page number
          required: true
          schema:
            type: integer
            format: int32
            minimum: 0
        - name: size
          in: query
          description: The page size
          required: true
          schema:
            type: integer
            format: int32
            minimum: 0
      responses:
        '200':
          description: The Stuff I Need
          content:
            application/json:
              schema:
                $ref: '#/components/schemas/PaginatedStuff'
        '500':
          description: Internal server error
          content:
            text/plain:
              schema:
                type: string

# ....

 PaginatedStuff:
      type: object
      required:
        - items
        - pagination
      properties:
        items:
          type: array
          items:
            $ref: '#/components/schemas/Stuff'
        pagination:
          $ref: '#/components/schemas/PaginationInfo'

#....

PaginationInfo:
      type: object
      required:
        - size
        - nextPage
      properties:
        nextPage:
          type: integer
          format: int32
          minimum: 0
        size:
          type: integer
          format: int32
          minimum: 0

Additional info If the issue is related to how the API and schema are constructed and isn't fixable through the codegen tool, is there a way to customize the generation of infinite queries to my custom-cut situation?

7nohe commented 1 week ago

@hanahem

It seems that the error occurs when the parameter specified in pageParam is set as required. As a temporary workaround, you can avoid the issue by setting required: false. I will also look into a fix.

    parameters:
        - name: page
          in: query
          description: The page number
          required: false # <- change here
          schema:
            type: integer
            format: int32
            minimum: 0