Skip to content

Commit e5ff024

Browse files
mrlubosmrlubos
committed
docs: update tanstack query documentation
1 parent d0c4690 commit e5ff024

File tree

4 files changed

+96
-57
lines changed

4 files changed

+96
-57
lines changed

‎.changeset/polite-pots-watch.md

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
---
2+
'@hey-api/openapi-ts': minor
3+
---
4+
5+
feat(tanstack-query): add name and case options
6+
7+
### Updated TanStack Query options
8+
9+
The TanStack Query plugin options have been expanded to support more naming and casing patterns. As a result, the following options have been renamed.
10+
11+
- `queryOptionsNameBuilder` renamed to `queryOptions`
12+
- `infiniteQueryOptionsNameBuilder` renamed to `infiniteQueryOptions`
13+
- `mutationOptionsNameBuilder` renamed to `mutationOptions`
14+
- `queryKeyNameBuilder` renamed to `queryKeys`
15+
- `infiniteQueryKeyNameBuilder` renamed to `infiniteQueryKeys`

‎docs/openapi-ts/migrating.md

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,16 @@ This config option is deprecated and will be removed.
2929

3030
## v0.75.0
3131

32+
### Updated TanStack Query options
33+
34+
The TanStack Query plugin options have been expanded to support more naming and casing patterns. As a result, the following options have been renamed.
35+
36+
- `queryOptionsNameBuilder` renamed to `queryOptions`
37+
- `infiniteQueryOptionsNameBuilder` renamed to `infiniteQueryOptions`
38+
- `mutationOptionsNameBuilder` renamed to `mutationOptions`
39+
- `queryKeyNameBuilder` renamed to `queryKeys`
40+
- `infiniteQueryKeyNameBuilder` renamed to `infiniteQueryKeys`
41+
3242
### Added `plugin.forEach()` method
3343

3444
This method replaces the `.subscribe()` method. Additionally, `.forEach()` is executed immediately, which means we don't need the `before` and `after` events – simply move your code before and after the `.forEach()` block.

‎docs/openapi-ts/plugins/tanstack-query.md

Lines changed: 54 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -37,65 +37,55 @@ In your [configuration](/openapi-ts/get-started), add TanStack Query to your plu
3737
::: code-group
3838

3939
```js [react]
40-
import { defaultPlugins } from '@hey-api/openapi-ts';
41-
4240
export default {
4341
input: 'https://get.heyapi.dev/hey-api/backend',
4442
output: 'src/client',
4543
plugins: [
46-
...defaultPlugins,
44+
// ...other plugins
4745
'@tanstack/react-query', // [!code ++]
4846
],
4947
};
5048
```
5149

5250
```js [vue]
53-
import { defaultPlugins } from '@hey-api/openapi-ts';
54-
5551
export default {
5652
input: 'https://get.heyapi.dev/hey-api/backend',
5753
output: 'src/client',
5854
plugins: [
59-
...defaultPlugins,
55+
// ...other plugins
6056
'@tanstack/vue-query', // [!code ++]
6157
],
6258
};
6359
```
6460

6561
```js [angular]
66-
import { defaultPlugins } from '@hey-api/openapi-ts';
67-
6862
export default {
6963
input: 'https://get.heyapi.dev/hey-api/backend',
7064
output: 'src/client',
7165
plugins: [
72-
...defaultPlugins,
66+
// ...other plugins
7367
'@tanstack/angular-query-experimental', // [!code ++]
7468
],
7569
};
7670
```
7771

7872
```js [svelte]
79-
import { defaultPlugins } from '@hey-api/openapi-ts';
80-
8173
export default {
8274
input: 'https://get.heyapi.dev/hey-api/backend',
8375
output: 'src/client',
8476
plugins: [
85-
...defaultPlugins,
77+
// ...other plugins
8678
'@tanstack/svelte-query', // [!code ++]
8779
],
8880
};
8981
```
9082

9183
```js [solid]
92-
import { defaultPlugins } from '@hey-api/openapi-ts';
93-
9484
export default {
9585
input: 'https://get.heyapi.dev/hey-api/backend',
9686
output: 'src/client',
9787
plugins: [
98-
...defaultPlugins,
88+
// ...other plugins
9989
'@tanstack/solid-query', // [!code ++]
10090
],
10191
};
@@ -121,7 +111,31 @@ const { data, error } = useQuery({
121111
});
122112
```
123113

124-
You can customize query function names using `queryOptionsNameBuilder`.
114+
You can customize the naming and casing pattern for query options functions using the `queryOptions.name` and `queryOptions.case` options.
115+
116+
## Query Keys
117+
118+
If you have access to the result of query options function, you can get the query key from the `queryKey` field.
119+
120+
```ts
121+
const { queryKey } = getPetByIdOptions({
122+
path: {
123+
petId: 1,
124+
},
125+
});
126+
```
127+
128+
Alternatively, you can access the same query key by calling query key functions. The generated query key functions follow the naming convention of SDK functions and by default append `QueryKey`, e.g. `getPetByIdQueryKey()`.
129+
130+
```ts
131+
const queryKey = getPetByIdQueryKey({
132+
path: {
133+
petId: 1,
134+
},
135+
});
136+
```
137+
138+
You can customize the naming and casing pattern for query key functions using the `queryKeys.name` and `queryKeys.case` options.
125139

126140
## Infinite Queries
127141

@@ -139,52 +153,52 @@ const { data, error } = useInfiniteQuery({
139153
});
140154
```
141155

142-
You can customize infinite query function names using `infiniteQueryOptionsNameBuilder`.
156+
You can customize the naming and casing pattern for infinite query options functions using the `infiniteQueryOptions.name` and `infiniteQueryOptions.case` options.
143157

144-
## Mutations
158+
## Infinite Query Keys
145159

146-
Mutations are generated from DELETE, PATCH, POST, and PUT endpoints. The generated mutation functions follow the naming convention of SDK functions and by default append `Mutation`, e.g. `addPetMutation()`.
160+
If you have access to the result of infinite query options function, you can get the query key from the `queryKey` field.
147161

148162
```ts
149-
const addPet = useMutation({
150-
...addPetMutation(),
151-
onError: (error) => {
152-
console.log(error);
153-
},
154-
});
155-
156-
addPet.mutate({
157-
body: {
158-
name: 'Kitty',
163+
const { queryKey } = getPetByIdInfiniteOptions({
164+
path: {
165+
petId: 1,
159166
},
160167
});
161168
```
162169

163-
You can customize mutation function names using `mutationOptionsNameBuilder`.
164-
165-
## Query Keys
166-
167-
Query keys are generated for both queries and infinite queries. If you have access to the result of query or infinite query options function, you can get the query key from the `queryKey` field.
170+
Alternatively, you can access the same query key by calling query key functions. The generated query key functions follow the naming convention of SDK functions and by default append `InfiniteQueryKey`, e.g. `getPetByIdInfiniteQueryKey()`.
168171

169172
```ts
170-
const { queryKey } = getPetByIdOptions({
173+
const queryKey = getPetByIdInfiniteQueryKey({
171174
path: {
172175
petId: 1,
173176
},
174177
});
175178
```
176179

177-
Alternatively, you can access the same query key by calling query key functions. The generated query key functions follow the naming convention of SDK functions and by default append `QueryKey` or `InfiniteQueryKey`, e.g. `getPetByIdQueryKey()` or `getPetByIdInfiniteQueryKey()`.
180+
You can customize the naming and casing pattern for infinite query key functions using the `infiniteQueryKeys.name` and `infiniteQueryKeys.case` options.
181+
182+
## Mutations
183+
184+
Mutations are generated from DELETE, PATCH, POST, and PUT endpoints. The generated mutation functions follow the naming convention of SDK functions and by default append `Mutation`, e.g. `addPetMutation()`.
178185

179186
```ts
180-
const queryKey = getPetByIdQueryKey({
181-
path: {
182-
petId: 1,
187+
const addPet = useMutation({
188+
...addPetMutation(),
189+
onError: (error) => {
190+
console.log(error);
191+
},
192+
});
193+
194+
addPet.mutate({
195+
body: {
196+
name: 'Kitty',
183197
},
184198
});
185199
```
186200

187-
You can customize query key function names using `queryKeyNameBuilder` and `infiniteQueryKeyNameBuilder`.
201+
You can customize the naming and casing pattern for mutation options functions using the `mutationOptions.name` and `mutationOptions.case` options.
188202

189203
<!--@include: ../../examples.md-->
190204
<!--@include: ../../sponsors.md-->

‎packages/openapi-ts-tests/test/openapi-ts.config.ts

Lines changed: 17 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -150,25 +150,25 @@ export default defineConfig(() => {
150150
// name: 'fastify',
151151
},
152152
{
153-
case: 'SCREAMING_SNAKE_CASE',
154-
comments: false,
153+
// case: 'SCREAMING_SNAKE_CASE',
154+
// comments: false,
155155
exportFromIndex: true,
156-
infiniteQueryKeys: {
157-
name: '{{name}}IQK',
158-
},
159-
infiniteQueryOptions: {
160-
name: '{{name}}IQO',
161-
},
162-
mutationOptions: {
163-
name: '{{name}}MO',
164-
},
156+
// infiniteQueryKeys: {
157+
// name: '{{name}}IQK',
158+
// },
159+
// infiniteQueryOptions: {
160+
// name: '{{name}}IQO',
161+
// },
162+
// mutationOptions: {
163+
// name: '{{name}}MO',
164+
// },
165165
name: '@tanstack/react-query',
166-
queryKeys: {
167-
name: '{{name}}QK',
168-
},
169-
queryOptions: {
170-
name: '{{name}}QO',
171-
},
166+
// queryKeys: {
167+
// name: '{{name}}QK',
168+
// },
169+
// queryOptions: {
170+
// name: '{{name}}QO',
171+
// },
172172
},
173173
{
174174
// comments: false,

0 commit comments

Comments
 (0)