22
33> Node.js library that generates [ React Query (also called TanStack Query)] ( https://tanstack.com/query ) hooks based on an OpenAPI specification file.
44
5+ [ ![ npm version] ( https://badge.fury.io/js/%407nohe%2Fopenapi-react-query-codegen.svg )] ( https://badge.fury.io/js/%407nohe%2Fopenapi-react-query-codegen )
6+
57## Features
68
7- - Supports generation of custom react hooks that use React Query's ` useQuery ` and ` useMutation ` hooks
8- - Supports generation of query keys for query caching
9- - Supports the option to use pure TypeScript clients generated by [ @hey-api/openapi-ts ] ( https://github.com/hey-api/openapi-ts )
9+ - Generates custom react hooks that use React Query's ` useQuery ` , ` useSuspenseQuery ` and ` useMutation ` hooks
10+ - Generates query keys and functions for query caching
11+ - Generates pure TypeScript clients generated by [ @hey-api/openapi-ts ] ( https://github.com/hey-api/openapi-ts )
1012
11- ## Install
13+ ## Installation
1214
1315```
1416$ npm install -D @7nohe/openapi-react-query-codegen
@@ -58,15 +60,15 @@ Options:
5860 -h, --help display help for command
5961```
6062
61- ## Example Usage
63+ ### Example Usage
6264
63- ### Command
65+ #### Command
6466
6567```
6668$ openapi-rq -i ./petstore.yaml
6769```
6870
69- ### Output directory structure
71+ #### Output directory structure
7072
7173```
7274- openapi
@@ -81,9 +83,9 @@ $ openapi-rq -i ./petstore.yaml
8183
8284- [ Prefetching docs] ( https://tanstack.com/query/latest/docs/framework/react/guides/advanced-ssr#prefetching-and-dehydrating-data )
8385
84- ### In your app
86+ #### In your app
8587
86- #### Using the generated hooks
88+ ##### Using the generated hooks
8789
8890``` tsx
8991// App.tsx
@@ -102,7 +104,7 @@ function App() {
102104export default App ;
103105```
104106
105- #### Using the generated typescript client
107+ ##### Using the generated typescript client
106108
107109``` tsx
108110import { useQuery } from " @tanstack/react-query" ;
@@ -125,7 +127,7 @@ function App() {
125127export default App ;
126128```
127129
128- #### Using Suspense Hooks
130+ ##### Using Suspense Hooks
129131
130132``` tsx
131133// App.tsx
@@ -158,7 +160,7 @@ function App() {
158160export default App ;
159161```
160162
161- #### Runtime Configuration
163+ ##### Runtime Configuration
162164
163165You can modify the default values used by the generated service calls by modifying the OpenAPI configuration singleton object.
164166
0 commit comments