Add grouped object exports for query functions and query hooks in generated -components file

Open
#307 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Assessment

Difficulty
4/5
Estimated time
3-5 days
Newbie friendliness
38/100
Issue type
Feature
Clarity
Mostly clear
Activity status
Stale
Tech stack
openapi, typescript
Domain
tooling

Research direction

Locate the generator entry point that produces the generated -components file and inspect how fetch functions, query hooks, and queryOptions exports are assembled. Add the Fetches, Queries, and QueryOptions grouped exports while retaining the existing flat exports, then verify the generated output against the proposal’s apiClient.ts usage pattern.

Written by the indexing model from the issue text.

Description

Right now , the generated -components file exports a flat list of types, query functions, and query hooks.
While this is simple and works fine for small schemas, it becomes difficult to work with when:

  • The schema is large and includes many endpoints
  • Multiple schemas are used across the project

In these cases, it’s hard to discover or autocomplete the correct function or hook by name.

Proposal

In addition to the current flat exports, introduce grouped object exports:

  1. Fetches – an object that groups all fetch functions
  2. Queries – an object that groups all query/mutation hooks
  3. QueryOptions - an object that groups all queryOptions objects used by query hooks

Example:

export const getPets = ...
export const useGetPets = ...
export const getPetsQueryOptions = ...

export const createPet = ...
export const useCreatePet = ...
export const createPetMutationOptions = ...

// Grouped exports

export const Fetches = { getPets, createPet };
export const Queries = { useGetPets, useCreatePet };
export const QueryOptions = {
  getPets: getPetsQueryOptions,
  createPet: createPetMutationOptions,
};
Usage

With the proposed grouped exports, it’s easy to build a single client entry point that aggregates all schemas:

// apiClient.ts
import * as Petstore from './api/petstoreComponents';
import * as Payments from '.api/paymentsComponents';
import * as Admin from './api/adminComponents';

export const API = { Petstore, Payments, Admin };

Then throughout your application, you can access everything in a clear and organized way:

API.Petstore.Queries.useGetPets();
API.Payments.Fetches.getPaymentDetails();
API.Admin.QueryOptions.getAdminUsers();

I believe this makes working with large or multi-schema APIs intuitive and reduces the cognitive load of searching for auto-generated names or digging through individual files.

Dominant language
TypeScript
Stars
634
Forks
83
PR merge metrics
No merged PRs in 30d

Contributor guide

No contributing guide indexed for this repository

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from fabien0102/openapi-codegen

All issues in fabien0102/openapi-codegen

Similar issues

More TypeScript issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.