Node.js library that generates React Query (also called TanStack Query) hooks based on an OpenAPI specification file.
- Supports generation of custom react hooks that use React Query's
useQueryanduseMutationhooks - Supports the option to use pure TypeScript clients generated by OpenAPI Typescript Codegen
$ npm install -D @7nohe/openapi-react-query-codegen $ openapi-rq --help Usage: openapi-rq [options] Generate React Query code based on OpenAPI Options: -V, --version output the version number -p, --path <path> Path to OpenAPI file -o, --output-dir [directory] Directory to output the generated package (default: "openapi") -h, --help display help for command $ openapi-rq -p ./petstore.yaml - openapi - queries - index.ts <- custom react hooks - requests <- output code generated by OpenAPI Typescript Codegen // 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'; function App() { const { data } = useQuery(['MyKey'], () => { // Do something here return PetService.findPetsByStatus(['available']); }); return ( <div className="App"> {/* .... */} </div> ); } export default App;MIT