You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
- seamless integration with `@hey-api/openapi-ts` ecosystem
32
32
- create query keys following the best practices
33
-
- type-safe query options (using `defineQueryOptions`) and mutation options
33
+
- type-safe query options and mutation options
34
34
- minimal learning curve thanks to extending the underlying technology
35
35
36
36
## Installation
@@ -62,9 +62,17 @@ The Pinia Colada plugin will generate the following artifacts, depending on the
62
62
63
63
Queries are generated from [query operations](/openapi-ts/configuration/parser#hooks-query-operations). The generated query functions follow the naming convention of SDK functions and by default append `Query`, e.g. `getPetByIdQuery()`.
64
64
65
-
Each generated function is a [`defineQueryOptions`](https://pinia-colada.esm.dev/api/@pinia/colada/functions/defineQueryOptions.html) factory.
65
+
::: code-group
66
66
67
-
```js
67
+
```ts [example]
68
+
const query =useQuery(getPetByIdQuery, () => ({
69
+
path: {
70
+
petId: 1,
71
+
},
72
+
}));
73
+
```
74
+
75
+
```js [config]
68
76
exportdefault {
69
77
input:'hey-api/backend', // sign up at app.heyapi.dev
70
78
output:'src/client',
@@ -78,46 +86,9 @@ export default {
78
86
};
79
87
```
80
88
81
-
You can customize the naming and casing pattern for `queryOptions` functions using the `.name` and `.case` options.
82
-
83
-
### Usage
84
-
85
-
No params — pass the function directly to `useQuery`:
86
-
87
-
```ts
88
-
useQuery(getPetsQuery);
89
-
```
90
-
91
-
With parameters (constant values), use the two‑argument form:
92
-
93
-
```ts
94
-
useQuery(getPetByIdQuery, () => ({
95
-
path: { petId: 1 },
96
-
}));
97
-
```
98
-
99
-
For reactive parameters, pass the generated function and compute options in the callback:
100
-
101
-
```ts
102
-
const petId =ref<number|null>(1);
103
-
104
-
useQuery(getPetByIdQuery, () => ({
105
-
path: { petId: petId.value },
106
-
}));
107
-
```
108
-
109
-
To pass `useQuery`[properties](https://pinia-colada.esm.dev/api/@pinia/colada/interfaces/UseQueryOptions.html#Properties):
110
-
111
-
```ts
112
-
const petId =ref<number|null>(null);
89
+
:::
113
90
114
-
useQuery(() => ({
115
-
...getPetByIdQuery({
116
-
path: { petId: petId.valueasnumber },
117
-
}),
118
-
enabled: () =>petId.value!=null,
119
-
}));
120
-
```
91
+
You can customize the naming and casing pattern for `queryOptions` functions using the `.name` and `.case` options.
0 commit comments