Skip to content

Commit bf9bf32

Browse files
committed
feat(createClient): Pass the queryClient as argument
1 parent 6baf966 commit bf9bf32

File tree

4 files changed

+45
-5
lines changed

4 files changed

+45
-5
lines changed

.changeset/sharp-wasps-trade.md

Lines changed: 5 additions & 0 deletions
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 argument of `createClient`

docs/openapi-react-query/index.md

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -102,6 +102,25 @@ const MyComponent = () => {
102102
};
103103
```
104104

105+
## Custom query client
106+
107+
You can provide your own query client to the createClient
108+
109+
::: code-group
110+
111+
```tsx [src/my-component.ts]
112+
import createFetchClient from "openapi-fetch";
113+
import createClient from "openapi-react-query";
114+
import { useQueryClient } from "@tanstack/react-query";
115+
import type { paths } from "./my-openapi-3-schema"; // generated by openapi-typescript
116+
117+
const fetchClient = createFetchClient<paths>({
118+
baseUrl: "https://myapi.dev/v1/",
119+
});
120+
const queryClient = useQueryClient(); // you can also use the client you provided to QueryClientProvider
121+
const $api = createClient(fetchClient, queryClient);
122+
```
123+
105124
:::
106125

107126
::: tip

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

Lines changed: 11 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -184,9 +184,9 @@ export type MethodResponse<
184184
? NonNullable<FetchResponse<Paths[Path][Method], Options, Media>["data"]>
185185
: never;
186186

187-
// TODO: Add the ability to bring queryClient as argument
188187
export default function createClient<Paths extends {}, Media extends MediaType = MediaType>(
189188
client: FetchClient<Paths, Media>,
189+
initialQueryClient?: QueryClient,
190190
): OpenapiQueryClient<Paths, Media> {
191191
const queryFn = async <Method extends HttpMethod, Path extends PathsWithMethod<Paths, Method>>({
192192
queryKey: [method, path, init],
@@ -215,9 +215,15 @@ export default function createClient<Paths extends {}, Media extends MediaType =
215215
return {
216216
queryOptions,
217217
useQuery: (method, path, ...[init, options, queryClient]) =>
218-
useQuery(queryOptions(method, path, init as InitWithUnknowns<typeof init>, options), queryClient),
218+
useQuery(
219+
queryOptions(method, path, init as InitWithUnknowns<typeof init>, options),
220+
queryClient ?? initialQueryClient,
221+
),
219222
useSuspenseQuery: (method, path, ...[init, options, queryClient]) =>
220-
useSuspenseQuery(queryOptions(method, path, init as InitWithUnknowns<typeof init>, options), queryClient),
223+
useSuspenseQuery(
224+
queryOptions(method, path, init as InitWithUnknowns<typeof init>, options),
225+
queryClient ?? initialQueryClient,
226+
),
221227
useInfiniteQuery: (method, path, init, options, queryClient) => {
222228
const { pageParamName = "cursor", ...restOptions } = options;
223229
const { queryKey } = queryOptions(method, path, init);
@@ -247,7 +253,7 @@ export default function createClient<Paths extends {}, Media extends MediaType =
247253
},
248254
...restOptions,
249255
},
250-
queryClient,
256+
queryClient ?? initialQueryClient,
251257
);
252258
},
253259
useMutation: (method, path, options, queryClient) =>
@@ -266,7 +272,7 @@ export default function createClient<Paths extends {}, Media extends MediaType =
266272
},
267273
...options,
268274
},
269-
queryClient,
275+
queryClient ?? initialQueryClient,
270276
),
271277
};
272278
}

packages/openapi-react-query/test/index.test.tsx

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -77,6 +77,16 @@ describe("client", () => {
7777
expect(client).toHaveProperty("useMutation");
7878
});
7979

80+
it("accepts a queryClient as second parameter", () => {
81+
const customQueryClient = new QueryClient({});
82+
const fetchClient = createFetchClient<paths>({ baseUrl });
83+
const client = createClient<paths>(fetchClient, customQueryClient);
84+
expect(client).toHaveProperty("queryOptions");
85+
expect(client).toHaveProperty("useQuery");
86+
expect(client).toHaveProperty("useSuspenseQuery");
87+
expect(client).toHaveProperty("useMutation");
88+
});
89+
8090
describe("queryOptions", () => {
8191
it("has correct parameter types", async () => {
8292
const fetchClient = createFetchClient<paths>({ baseUrl });

0 commit comments

Comments
 (0)