Skip to content

Commit 2a044d0

Browse files
yoshi2noyoshi2no
authored
feat(openapi-react-query): Add the ability to bring queryClient as argument (#1814)
* pass the queryClient as an argument * docs: `queryClient` option * fix: typo * docs: add `queryClient` option to Api example * chore(test): add test case, useQuery, `should use provided custom queryClient` * chore(test): add test case, useMutation, `should use provided custom queryClient` * chore(test): add test case, useSuspenseQuery, `should use provided custom queryClient` * chore: changeset * chore: update contributors
1 parent 3694a3e commit 2a044d0

File tree

9 files changed

+242
-56
lines changed

9 files changed

+242
-56
lines changed

‎.changeset/heavy-jobs-move.md

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
"openapi-react-query": minor
3+
---
4+
5+
feat: Allow passing a queryClient as an argument to the `useQuery`, `useMutation`, and `useSuspenseQuery` methods

‎docs/README.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ Lives at [https://openapi-ts.dev](https://openapi-ts.dev).
99
Setup requires the latest version of [Node.js](https://nodejs.org/en) and [pnpm](https://pnpm.io/). With both installed, run:
1010

1111
```
12-
pnpm 1
12+
pnpm i
1313
pnpm run dev
1414
```
1515

‎docs/data/contributors.json

+1-1
Large diffs are not rendered by default.

‎docs/openapi-react-query/use-mutation.md

+4-2
Original file line numberDiff line numberDiff line change
@@ -47,7 +47,7 @@ export const $api = createClient(fetchClient);
4747
## Api
4848

4949
```tsx
50-
const query = $api.useQuery(method, path, options, queryOptions);
50+
const query = $api.useQuery(method, path, options, queryOptions, queryClient);
5151
```
5252

5353
**Arguments**
@@ -62,4 +62,6 @@ const query = $api.useQuery(method, path, options, queryOptions);
6262
- `queryOptions`
6363
- The original `useMutation` options.
6464
- [See more information](https://tanstack.com/query/latest/docs/framework/react/reference/useMutation)
65-
65+
- `queryClient`
66+
- The original `queryClient` option.
67+
- [See more information](https://tanstack.com/query/latest/docs/framework/react/reference/useMutation)

‎docs/openapi-react-query/use-query.md

+4-2
Original file line numberDiff line numberDiff line change
@@ -51,7 +51,7 @@ export const $api = createClient(fetchClient);
5151
## Api
5252

5353
```tsx
54-
const query = $api.useQuery(method, path, options, queryOptions);
54+
const query = $api.useQuery(method, path, options, queryOptions, queryClient);
5555
```
5656

5757
**Arguments**
@@ -70,4 +70,6 @@ const query = $api.useQuery(method, path, options, queryOptions);
7070
- `queryOptions`
7171
- The original `useQuery` options.
7272
- [See more information](https://tanstack.com/query/latest/docs/framework/react/reference/useQuery)
73-
73+
- `queryClient`
74+
- The original `queryClient` option.
75+
- [See more information](https://tanstack.com/query/latest/docs/framework/react/reference/useQuery)

‎docs/openapi-react-query/use-suspense-query.md

+4-2
Original file line numberDiff line numberDiff line change
@@ -57,7 +57,7 @@ export const $api = createClient(fetchClient);
5757
## Api
5858

5959
```tsx
60-
const query = $api.useSuspenseQuery(method, path, options, queryOptions);
60+
const query = $api.useSuspenseQuery(method, path, options, queryOptions, queryClient);
6161
```
6262

6363
**Arguments**
@@ -76,4 +76,6 @@ const query = $api.useSuspenseQuery(method, path, options, queryOptions);
7676
- `queryOptions`
7777
- The original `useSuspenseQuery` options.
7878
- [See more information](https://tanstack.com/query/latest/docs/framework/react/reference/useSuspenseQuery)
79-
79+
- `queryClient`
80+
- The original `queryClient` option.
81+
- [See more information](https://tanstack.com/query/latest/docs/framework/react/reference/useSuspenseQuery)

‎docs/scripts/update-contributors.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -164,7 +164,7 @@ const CONTRIBUTORS = {
164164
"armandabric",
165165
"illright",
166166
]),
167-
"openapi-react-query": new Set(["drwpow", "kerwanp"]),
167+
"openapi-react-query": new Set(["drwpow", "kerwanp", "yoshi2no"]),
168168
};
169169

170170
async function main() {

‎packages/openapi-react-query/src/index.ts

+57-46
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import {
55
type UseQueryResult,
66
type UseSuspenseQueryOptions,
77
type UseSuspenseQueryResult,
8+
type QueryClient,
89
useMutation,
910
useQuery,
1011
useSuspenseQuery,
@@ -21,9 +22,9 @@ export type UseQueryMethod<Paths extends Record<string, Record<HttpMethod, {}>>,
2122
>(
2223
method: Method,
2324
url: Path,
24-
...[init, options]: HasRequiredKeys<Init> extends never
25-
? [(Init & { [key: string]: unknown })?, Options?]
26-
: [Init & { [key: string]: unknown }, Options?]
25+
...[init, options, queryClient]: HasRequiredKeys<Init> extends never
26+
? [(Init & { [key: string]: unknown })?, Options?, QueryClient?]
27+
: [Init & { [key: string]: unknown }, Options?, QueryClient?]
2728
) => UseQueryResult<Response["data"], Response["error"]>;
2829

2930
export type UseSuspenseQueryMethod<Paths extends Record<string, Record<HttpMethod, {}>>, Media extends MediaType> = <
@@ -35,9 +36,9 @@ export type UseSuspenseQueryMethod<Paths extends Record<string, Record<HttpMetho
3536
>(
3637
method: Method,
3738
url: Path,
38-
...[init, options]: HasRequiredKeys<Init> extends never
39-
? [(Init & { [key: string]: unknown })?, Options?]
40-
: [Init & { [key: string]: unknown }, Options?]
39+
...[init, options, queryClient]: HasRequiredKeys<Init> extends never
40+
? [(Init & { [key: string]: unknown })?, Options?, QueryClient?]
41+
: [Init & { [key: string]: unknown }, Options?, QueryClient?]
4142
) => UseSuspenseQueryResult<Response["data"], Response["error"]>;
4243

4344
export type UseMutationMethod<Paths extends Record<string, Record<HttpMethod, {}>>, Media extends MediaType> = <
@@ -50,6 +51,7 @@ export type UseMutationMethod<Paths extends Record<string, Record<HttpMethod, {}
5051
method: Method,
5152
url: Path,
5253
options?: Options,
54+
queryClient?: QueryClient,
5355
) => UseMutationResult<Response["data"], Response["error"], Init>;
5456

5557
export interface OpenapiQueryClient<Paths extends {}, Media extends MediaType = MediaType> {
@@ -64,51 +66,60 @@ export default function createClient<Paths extends {}, Media extends MediaType =
6466
client: FetchClient<Paths, Media>,
6567
): OpenapiQueryClient<Paths, Media> {
6668
return {
67-
useQuery: (method, path, ...[init, options]) => {
68-
return useQuery({
69-
queryKey: [method, path, init],
70-
queryFn: async () => {
71-
const mth = method.toUpperCase() as keyof typeof client;
72-
const fn = client[mth] as ClientMethod<Paths, typeof method, Media>;
73-
const { data, error } = await fn(path, init as any); // TODO: find a way to avoid as any
74-
if (error || !data) {
75-
throw error;
76-
}
77-
return data;
69+
useQuery: (method, path, ...[init, options, queryClient]) => {
70+
return useQuery(
71+
{
72+
queryKey: [method, path, init],
73+
queryFn: async () => {
74+
const mth = method.toUpperCase() as keyof typeof client;
75+
const fn = client[mth] as ClientMethod<Paths, typeof method, Media>;
76+
const { data, error } = await fn(path, init as any); // TODO: find a way to avoid as any
77+
if (error || !data) {
78+
throw error;
79+
}
80+
return data;
81+
},
82+
...options,
7883
},
79-
...options,
80-
});
84+
queryClient,
85+
);
8186
},
82-
useSuspenseQuery: (method, path, ...[init, options]) => {
83-
return useSuspenseQuery({
84-
queryKey: [method, path, init],
85-
queryFn: async () => {
86-
const mth = method.toUpperCase() as keyof typeof client;
87-
const fn = client[mth] as ClientMethod<Paths, typeof method, Media>;
88-
const { data, error } = await fn(path, init as any); // TODO: find a way to avoid as any
89-
if (error || !data) {
90-
throw error;
91-
}
92-
return data;
87+
useSuspenseQuery: (method, path, ...[init, options, queryClient]) => {
88+
return useSuspenseQuery(
89+
{
90+
queryKey: [method, path, init],
91+
queryFn: async () => {
92+
const mth = method.toUpperCase() as keyof typeof client;
93+
const fn = client[mth] as ClientMethod<Paths, typeof method, Media>;
94+
const { data, error } = await fn(path, init as any); // TODO: find a way to avoid as any
95+
if (error || !data) {
96+
throw error;
97+
}
98+
return data;
99+
},
100+
...options,
93101
},
94-
...options,
95-
});
102+
queryClient,
103+
);
96104
},
97-
useMutation: (method, path, options) => {
98-
return useMutation({
99-
mutationKey: [method, path],
100-
mutationFn: async (init) => {
101-
// TODO: Put in external fn for reusability
102-
const mth = method.toUpperCase() as keyof typeof client;
103-
const fn = client[mth] as ClientMethod<Paths, typeof method, Media>;
104-
const { data, error } = await fn(path, init as any); // TODO: find a way to avoid as any
105-
if (error || !data) {
106-
throw error;
107-
}
108-
return data;
105+
useMutation: (method, path, options, queryClient) => {
106+
return useMutation(
107+
{
108+
mutationKey: [method, path],
109+
mutationFn: async (init) => {
110+
// TODO: Put in external fn for reusability
111+
const mth = method.toUpperCase() as keyof typeof client;
112+
const fn = client[mth] as ClientMethod<Paths, typeof method, Media>;
113+
const { data, error } = await fn(path, init as any); // TODO: find a way to avoid as any
114+
if (error || !data) {
115+
throw error;
116+
}
117+
return data;
118+
},
119+
...options,
109120
},
110-
...options,
111-
});
121+
queryClient,
122+
);
112123
},
113124
};
114125
}

0 commit comments

Comments
 (0)