2
2
3
3
> Node.js library that generates [ React Query (also called TanStack Query)] ( https://tanstack.com/query ) hooks based on an OpenAPI specification file.
4
4
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
+
5
7
## Features
6
8
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 )
10
12
11
- ## Install
13
+ ## Installation
12
14
13
15
```
14
16
$ npm install -D @7nohe/openapi-react-query-codegen
@@ -58,15 +60,15 @@ Options:
58
60
-h, --help display help for command
59
61
```
60
62
61
- ## Example Usage
63
+ ### Example Usage
62
64
63
- ### Command
65
+ #### Command
64
66
65
67
```
66
68
$ openapi-rq -i ./petstore.yaml
67
69
```
68
70
69
- ### Output directory structure
71
+ #### Output directory structure
70
72
71
73
```
72
74
- openapi
@@ -81,9 +83,9 @@ $ openapi-rq -i ./petstore.yaml
81
83
82
84
- [ Prefetching docs] ( https://tanstack.com/query/latest/docs/framework/react/guides/advanced-ssr#prefetching-and-dehydrating-data )
83
85
84
- ### In your app
86
+ #### In your app
85
87
86
- #### Using the generated hooks
88
+ ##### Using the generated hooks
87
89
88
90
``` tsx
89
91
// App.tsx
@@ -102,7 +104,7 @@ function App() {
102
104
export default App ;
103
105
```
104
106
105
- #### Using the generated typescript client
107
+ ##### Using the generated typescript client
106
108
107
109
``` tsx
108
110
import { useQuery } from " @tanstack/react-query" ;
@@ -125,7 +127,7 @@ function App() {
125
127
export default App ;
126
128
```
127
129
128
- #### Using Suspense Hooks
130
+ ##### Using Suspense Hooks
129
131
130
132
``` tsx
131
133
// App.tsx
@@ -158,7 +160,7 @@ function App() {
158
160
export default App ;
159
161
```
160
162
161
- #### Runtime Configuration
163
+ ##### Runtime Configuration
162
164
163
165
You can modify the default values used by the generated service calls by modifying the OpenAPI configuration singleton object.
164
166
0 commit comments