Skip to content

Node.js library that generates React Query (also called TanStack Query) hooks based on an OpenAPI specification file.

Notifications You must be signed in to change notification settings

feinblat/openapi-react-query-codegen

 
 

Repository files navigation

OpenAPI React Query Codegen

Node.js library that generates React Query (also called TanStack Query) hooks based on an OpenAPI specification file.

Features

  • Supports generation of custom react hooks that use React Query's useQuery and useMutation hooks
  • Supports generation of query keys for query caching
  • Supports the option to use pure TypeScript clients generated by OpenAPI Typescript Codegen

Install

$ npm install -D @7nohe/openapi-react-query-codegen

Register the command to the scripts property in your package.json file.

{
  "scripts": {
    "codegen": "openapi-rq -i ./petstore.yaml -c axios"
  }
}

You can also run the command without installing it in your project using the npx command.

$ npx --package @7nohe/openapi-react-query-codegen openapi-rq -i ./petstore.yaml -c axios

Usage

$ openapi-rq --help

Usage: openapi-rq [options]

Generate React Query code based on OpenAPI

Options:
  -V, --version              output the version number
  -i, --input <value>        OpenAPI specification, can be a path, url or string content (required)
  -o, --output <value>       Output directory (default: "openapi")
  -c, --client <value>       HTTP client to generate [fetch, xhr, node, axios, angular] (default: "fetch")
  --useUnionTypes            Use union types (default: false)
  --exportSchemas <value>    Write schemas to disk (default: false)
  --indent <value>           Indentation options [4, 2, tabs] (default: "4")
  --postfixServices <value>  Service name postfix (default: "Service")
  --postfixModels <value>    Modal name postfix
  --request <value>          Path to custom request file
  -h, --help                 display help for command

Example Usage

Command

$ openapi-rq -i ./petstore.yaml

Output directory structure

- openapi
  - queries
    - index.ts <- custom react hooks
  - requests <- output code generated by OpenAPI Typescript Codegen

In your app

// App.tsx
import {
  usePetServiceFindPetsByStatus,
} from "../openapi/queries";
function App() {
  const { data } = usePetServiceFindPetsByStatus({ status: ["available"] });

  return (
    <div className="App">
      <h1>Pet List</h1>
      <ul>
        {data?.map((pet) => (
          <li key={pet.id}>{pet.name}</li>
        ))}
      </ul>
    </div>
  );
}

export default App;

You can also use pure TS clients.

import { useQuery } from "@tanstack/react-query";
import { PetService } from '../openapi/requests/services/PetService';
import {
  usePetServiceFindPetsByStatusKey,
} from "../openapi/queries";

function App() {
  // You can still use the auto-generated query key
  const { data } = useQuery([usePetServiceFindPetsByStatusKey], () => {
    // Do something here
    
    return PetService.findPetsByStatus(['available']);
  });

  return (
    <div className="App">
      {/* .... */}
    </div>
  );
}

export default App;

License

MIT

About

Node.js library that generates React Query (also called TanStack Query) hooks based on an OpenAPI specification file.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • TypeScript 95.0%
  • JavaScript 5.0%