feat(openapi-react-query): Add query client to create client

.changeset/sharp-wasps-trade.md

@@ -0,0 +1,5 @@
+---
+"openapi-react-query": minor
+---
+
+feat: Allow passing a queryClient as argument of `createClient`

docs/openapi-react-query/index.md

@@ -102,6 +102,25 @@ const MyComponent = () => {
 };
 ```
 
+## Custom query client
+
+You can provide your own query client to the createClient
+
+::: code-group
+
+```tsx [src/my-component.ts]
+import createFetchClient from "openapi-fetch";
+import createClient from "openapi-react-query";
+import { useQueryClient } from "@tanstack/react-query";
+import type { paths } from "./my-openapi-3-schema"; // generated by openapi-typescript
+
+const fetchClient = createFetchClient<paths>({
+  baseUrl: "https://myapi.dev/v1/",
+});
+const queryClient = useQueryClient(); // you can also use the client you provided to QueryClientProvider
+const $api = createClient(fetchClient, queryClient);
+```
+
 :::
 
 ::: tip

docs/scripts/update-contributors.js

@@ -193,6 +193,7 @@ const CONTRIBUTORS = new Set([
   "lukasedw",
   "ViktorPontinen",
   "kevmo314",
+  "arnaud9145",
 ]);
 
 const ONE_WEEK = 1000 * 60 * 60 * 24;

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

@@ -184,9 +184,9 @@ export type MethodResponse<
   ? NonNullable<FetchResponse<Paths[Path][Method], Options, Media>["data"]>
   : never;
 
-// TODO: Add the ability to bring queryClient as argument
 export default function createClient<Paths extends {}, Media extends MediaType = MediaType>(
   client: FetchClient<Paths, Media>,
+  initialQueryClient?: QueryClient,
 ): OpenapiQueryClient<Paths, Media> {
   const queryFn = async <Method extends HttpMethod, Path extends PathsWithMethod<Paths, Method>>({
     queryKey: [method, path, init],
@@ -215,9 +215,15 @@ export default function createClient<Paths extends {}, Media extends MediaType =
   return {
     queryOptions,
     useQuery: (method, path, ...[init, options, queryClient]) =>
-      useQuery(queryOptions(method, path, init as InitWithUnknowns<typeof init>, options), queryClient),
+      useQuery(
+        queryOptions(method, path, init as InitWithUnknowns<typeof init>, options),
+        queryClient ?? initialQueryClient,
+      ),
     useSuspenseQuery: (method, path, ...[init, options, queryClient]) =>
-      useSuspenseQuery(queryOptions(method, path, init as InitWithUnknowns<typeof init>, options), queryClient),
+      useSuspenseQuery(
+        queryOptions(method, path, init as InitWithUnknowns<typeof init>, options),
+        queryClient ?? initialQueryClient,
+      ),
     useInfiniteQuery: (method, path, init, options, queryClient) => {
       const { pageParamName = "cursor", ...restOptions } = options;
       const { queryKey } = queryOptions(method, path, init);
@@ -247,7 +253,7 @@ export default function createClient<Paths extends {}, Media extends MediaType =
           },
           ...restOptions,
         },
-        queryClient,
+        queryClient ?? initialQueryClient,
       );
     },
     useMutation: (method, path, options, queryClient) =>
@@ -266,7 +272,7 @@ export default function createClient<Paths extends {}, Media extends MediaType =
           },
           ...options,
         },
-        queryClient,
+        queryClient ?? initialQueryClient,
       ),
   };
 }

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

@@ -77,6 +77,16 @@ describe("client", () => {
     expect(client).toHaveProperty("useMutation");
   });
 
+  it("accepts a queryClient as second parameter", () => {
+    const customQueryClient = new QueryClient({});
+    const fetchClient = createFetchClient<paths>({ baseUrl });
+    const client = createClient<paths>(fetchClient, customQueryClient);
+    expect(client).toHaveProperty("queryOptions");
+    expect(client).toHaveProperty("useQuery");
+    expect(client).toHaveProperty("useSuspenseQuery");
+    expect(client).toHaveProperty("useMutation");
+  });
+
   describe("queryOptions", () => {
     it("has correct parameter types", async () => {
       const fetchClient = createFetchClient<paths>({ baseUrl });