openapi-react-query-codegen
openapi-react-query-codegen copied to clipboard
Node.js library that generates React Query (also called TanStack Query) hooks based on an OpenAPI specification file.
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
anduseMutation
hooks - Supports generation of query keys for query caching
- Supports the option to use pure TypeScript clients generated by @hey-api/openapi-ts
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")
--request <value> Path to custom request file
--useDateType Use Date type instead of string for date types for models, this will not convert the data to a Date object
--enums <value> Generate JavaScript objects from enum definitions? ['javascript', 'typescript']
--base <value> Manually set base in OpenAPI config instead of inferring from server value
--serviceResponse <value> Define shape of returned value from service calls ['body', 'generics', 'response']
--operationId Use operation ID to generate operation names?
--lint Process output folder with linter?
--format Process output folder with formatter?
-h, --help display help for command
Example Usage
Command
$ openapi-rq -i ./petstore.yaml
Output directory structure
- openapi
- queries
- index.ts <- main file that exports common types, variables, and hooks
- common.ts <- common types
- queries.ts <- generated query hooks
- suspenses.ts <- generated suspense hooks
- requests <- output code generated by @hey-api/openapi-ts
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";
import { usePetServiceFindPetsByStatusKey } from "../openapi/queries";
function App() {
// You can still use the auto-generated query key
const { data } = useQuery({
queryKey: [usePetServiceFindPetsByStatusKey],
queryFn: () => {
// Do something here
return PetService.findPetsByStatus(["available"]);
},
});
return <div className="App">{/* .... */}</div>;
}
export default App;
You can also use suspense hooks.
// App.tsx
import { useDefaultClientFindPetsSuspense } from "../openapi/queries/suspense";
function ChildComponent() {
const { data } = useDefaultClientFindPetsSuspense({ tags: [], limit: 10 });
return (
<ul>
{data?.map((pet, index) => (
<li key={pet.id}>{pet.name}</li>
))}
</ul>
);
}
function ParentComponent() {
return (
<>
<Suspense fallback={<>loading...</>}>
<ChildComponent />
</Suspense>
</>
);
}
function App() {
return (
<div className="App">
<h1>Pet List</h1>
<ParentComponent />
</div>
);
}
export default App;
License
MIT