/openapi-react-query-codegen

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

Primary LanguageTypeScript

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

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")
  --exportSchemas <value>  Write schemas to disk (default: false)
  --indent <value>         Indentation options [4, 2, tabs] (default: "4")
  --postfix <value>        Service name postfix (default: "Service")
  --request <value>        Path to custom request file
  -h, --help               display help for command

Example Usage

Command

$ openapi-rq -p ./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