Skip to content

useInfiniteQueryParam should only be added to hooks with that query parameter present #3101

@the-inconvenience-store

Description

Description

Orval will generate a react query useInfinite hook with the useInfiniteQueryParam for every endpoint that has query parameters, even if useInfiniteQueryParam is not present in the query parameters for a certain endpoint. This will cause type error: Property 'page' does not exist on type 'GetFloorplanImageParams', as GetFloorplanImage query parameters do not include page. You could use endpoint specific overrides to prevent this, but it does not seem like an optimal solution, particularly for large OpenAPI specs.

Configuration (orval.config)

import { defineConfig } from 'orval'

export default defineConfig({
  backendQuery: {
    input: {
      target: 'my_swagger_here.json',
    },
    output: {
      workspace: '.',
      target: 'gen/apis',
      schemas: 'gen/models',
      client: 'react-query',
      httpClient: 'fetch',
      mode: 'tags-split',
      mock: true,
      urlEncodeParameters: true,
      override: {
        mutator: {
          path: 'src/custom-fetch.ts',
          name: 'customFetch',
        },
        query: {
          useQuery: true,
          useMutation: true,
          useInfinite: true,
          useInfiniteQueryParam: 'page',
          useSuspenseQuery: false,
          useSuspenseInfiniteQuery: false,
          usePrefetch: true,
          useInvalidate: true,
        },
      },
      prettier: true,
    },
  },
})

Environment

  System:
    OS: macOS 26.3.1
    CPU: (12) arm64 Apple M4 Pro
    Memory: 419.77 MB / 64.00 GB
    Shell: 5.9 - /bin/zsh
  npmPackages:
    msw: 2.10.4 => 2.10.4 
    zod: ^4.0.10 => 4.0.10 
orval: ^8.4.2 => 8.4.2
@tanstack/react-query: ^5.84.2 => 5.84.2

Expected behavior

When generating useInfinite hooks for an endpoint with useInfiniteQueryParam present in the config, disqualify endpoints without the useInfiniteQueryParam value in their real query parameters from generating with the useInfiniteQueryParam.

Actual behavior

Orval will generate a react query useInfinite hook with the useInfiniteQueryParam for every endpoint that has query parameters, even if useInfiniteQueryParam is not present in the query parameters for a certain endpoint.

OpenAPI document (minimal, if applicable)

openapi: 3.0.3
info:
  title: Seraphim Minimal Repro
  version: 1.0.0
paths:
  /api/facility/floors/{id}/image:
    get:
      operationId: getFloorplanImage
      summary: Get floorplan image by floor id
      parameters:
        - name: id
          in: path
          required: true
          schema:
            type: string
            format: uuid
        - name: variant
          in: query
          required: false
          schema:
            type: string
            enum:
              - cropped
              - original
      responses:
        '200':
          description: Image file
          content:
            image/png:
              schema:
                type: string
                format: binary
        '404':
          description: Not found

  /api/dashboard/dashboard:
    get:
      operationId: listDashboards
      summary: List dashboards with pagination
      parameters:
        - name: page
          in: query
          required: false
          schema:
            type: integer
            minimum: 1
            default: 1
        - name: pageSize
          in: query
          required: false
          schema:
            type: integer
            minimum: 1
            maximum: 200
            default: 20
      responses:
        '200':
          description: Paged dashboard list
          content:
            application/json:
              schema:
                $ref: '#/components/schemas/DashboardPageDto'

components:
  schemas:
    DashboardPageDto:
      type: object
      properties:
        page:
          type: integer
        pageSize:
          type: integer
        items:
          type: array
          items:
            type: object
            additionalProperties: true

Additional context

See packages/query/src/frameworks/index.ts:85-93, packages/query/src/query-generator.ts:629-640, packages/query/src/query-generator.ts:202-210, and packages/query/src/query-generator.ts:384-412.

This behaviour is also mirrored in other framework specific adapaters for angular and vue, respectively: packages/query/src/frameworks/angular.ts:85-96 and packages/query/src/frameworks/vue.ts:72-80.

I activate useInfinite for all endpoints in our spec as we have a very large spec, and individually pulling and updating only paginated GET endpoints into the orval config to specifically override them with useInfinite would be a hassle. So i rely on tree shaking at build time to ensure those extra useInfinite hooks for non-paginated GET requests arent packed into the build. I realise its a little bit backwards in relation to orvals ethos.

Metadata

Metadata

Labels

tanstack-queryTanStack Query related issue

Type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions