Skip to content

OpenAPI React Query Codegen is a code generator for creating React Query (also known as TanStack Query) hooks based on your OpenAPI schema.

License

Notifications You must be signed in to change notification settings

7nohe/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 

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 -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

OpenAPI React Query Codegen is a code generator for creating React Query (also known as TanStack Query) hooks based on your OpenAPI schema.

Topics

Resources

License

Stars

Watchers

Forks

Sponsor this project

 

Packages

No packages published

Contributors 16