feat(openapi-react-query): Add the ability to bring queryClient as argument

.changeset/heavy-jobs-move.md

@@ -0,0 +1,5 @@
+---
+"openapi-react-query": minor
+---
+
+feat: Allow passing a queryClient as an argument to the `useQuery`, `useMutation`, and `useSuspenseQuery` methods

docs/README.md

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

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

@@ -47,7 +47,7 @@ export const $api = createClient(fetchClient);
 ## Api
 
 ```tsx
-const query = $api.useQuery(method, path, options, queryOptions);
+const query = $api.useQuery(method, path, options, queryOptions, queryClient);
 ```
 
 **Arguments**
@@ -62,4 +62,6 @@ const query = $api.useQuery(method, path, options, queryOptions);
 - `queryOptions`
   - The original `useMutation` options.
   - [See more information](https://tanstack.com/query/latest/docs/framework/react/reference/useMutation)
-
+- `queryClient`
+  - The original `queryClient` option.
+  - [See more information](https://tanstack.com/query/latest/docs/framework/react/reference/useMutation)

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

@@ -51,7 +51,7 @@ export const $api = createClient(fetchClient);
 ## Api
 
 ```tsx
-const query = $api.useQuery(method, path, options, queryOptions);
+const query = $api.useQuery(method, path, options, queryOptions, queryClient);
 ```
 
 **Arguments**
@@ -70,4 +70,6 @@ const query = $api.useQuery(method, path, options, queryOptions);
 - `queryOptions`
   - The original `useQuery` options.
   - [See more information](https://tanstack.com/query/latest/docs/framework/react/reference/useQuery)
-
+- `queryClient`
+  - The original `queryClient` option.
+  - [See more information](https://tanstack.com/query/latest/docs/framework/react/reference/useQuery)

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

@@ -57,7 +57,7 @@ export const $api = createClient(fetchClient);
 ## Api
 
 ```tsx
-const query = $api.useSuspenseQuery(method, path, options, queryOptions);
+const query = $api.useSuspenseQuery(method, path, options, queryOptions, queryClient);
 ```
 
 **Arguments**
@@ -76,4 +76,6 @@ const query = $api.useSuspenseQuery(method, path, options, queryOptions);
 - `queryOptions`
   - The original `useSuspenseQuery` options.
   - [See more information](https://tanstack.com/query/latest/docs/framework/react/reference/useSuspenseQuery)
-
+- `queryClient`
+  - The original `queryClient` option.
+  - [See more information](https://tanstack.com/query/latest/docs/framework/react/reference/useSuspenseQuery)

docs/scripts/update-contributors.js

@@ -164,7 +164,7 @@ const CONTRIBUTORS = {
     "armandabric",
     "illright",
   ]),
-  "openapi-react-query": new Set(["drwpow", "kerwanp"]),
+  "openapi-react-query": new Set(["drwpow", "kerwanp", "yoshi2no"]),
 };
 
 async function main() {

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

@@ -5,6 +5,7 @@ import {
   type UseQueryResult,
   type UseSuspenseQueryOptions,
   type UseSuspenseQueryResult,
+  type QueryClient,
   useMutation,
   useQuery,
   useSuspenseQuery,
@@ -21,9 +22,9 @@ export type UseQueryMethod<Paths extends Record<string, Record<HttpMethod, {}>>,
 >(
   method: Method,
   url: Path,
-  ...[init, options]: HasRequiredKeys<Init> extends never
-    ? [(Init & { [key: string]: unknown })?, Options?]
-    : [Init & { [key: string]: unknown }, Options?]
+  ...[init, options, queryClient]: HasRequiredKeys<Init> extends never
+    ? [(Init & { [key: string]: unknown })?, Options?, QueryClient?]
+    : [Init & { [key: string]: unknown }, Options?, QueryClient?]
 ) => UseQueryResult<Response["data"], Response["error"]>;
 
 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
 >(
   method: Method,
   url: Path,
-  ...[init, options]: HasRequiredKeys<Init> extends never
-    ? [(Init & { [key: string]: unknown })?, Options?]
-    : [Init & { [key: string]: unknown }, Options?]
+  ...[init, options, queryClient]: HasRequiredKeys<Init> extends never
+    ? [(Init & { [key: string]: unknown })?, Options?, QueryClient?]
+    : [Init & { [key: string]: unknown }, Options?, QueryClient?]
 ) => UseSuspenseQueryResult<Response["data"], Response["error"]>;
 
 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, {}
   method: Method,
   url: Path,
   options?: Options,
+  queryClient?: QueryClient,
 ) => UseMutationResult<Response["data"], Response["error"], Init>;
 
 export interface OpenapiQueryClient<Paths extends {}, Media extends MediaType = MediaType> {
@@ -64,51 +66,60 @@ export default function createClient<Paths extends {}, Media extends MediaType =
   client: FetchClient<Paths, Media>,
 ): OpenapiQueryClient<Paths, Media> {
   return {
-    useQuery: (method, path, ...[init, options]) => {
-      return useQuery({
-        queryKey: [method, path, init],
-        queryFn: async () => {
-          const mth = method.toUpperCase() as keyof typeof client;
-          const fn = client[mth] as ClientMethod<Paths, typeof method, Media>;
-          const { data, error } = await fn(path, init as any); // TODO: find a way to avoid as any
-          if (error || !data) {
-            throw error;
-          }
-          return data;
+    useQuery: (method, path, ...[init, options, queryClient]) => {
+      return useQuery(
+        {
+          queryKey: [method, path, init],
+          queryFn: async () => {
+            const mth = method.toUpperCase() as keyof typeof client;
+            const fn = client[mth] as ClientMethod<Paths, typeof method, Media>;
+            const { data, error } = await fn(path, init as any); // TODO: find a way to avoid as any
+            if (error || !data) {
+              throw error;
+            }
+            return data;
+          },
+          ...options,
         },
-        ...options,
-      });
+        queryClient,
+      );
     },
-    useSuspenseQuery: (method, path, ...[init, options]) => {
-      return useSuspenseQuery({
-        queryKey: [method, path, init],
-        queryFn: async () => {
-          const mth = method.toUpperCase() as keyof typeof client;
-          const fn = client[mth] as ClientMethod<Paths, typeof method, Media>;
-          const { data, error } = await fn(path, init as any); // TODO: find a way to avoid as any
-          if (error || !data) {
-            throw error;
-          }
-          return data;
+    useSuspenseQuery: (method, path, ...[init, options, queryClient]) => {
+      return useSuspenseQuery(
+        {
+          queryKey: [method, path, init],
+          queryFn: async () => {
+            const mth = method.toUpperCase() as keyof typeof client;
+            const fn = client[mth] as ClientMethod<Paths, typeof method, Media>;
+            const { data, error } = await fn(path, init as any); // TODO: find a way to avoid as any
+            if (error || !data) {
+              throw error;
+            }
+            return data;
+          },
+          ...options,
         },
-        ...options,
-      });
+        queryClient,
+      );
     },
-    useMutation: (method, path, options) => {
-      return useMutation({
-        mutationKey: [method, path],
-        mutationFn: async (init) => {
-          // TODO: Put in external fn for reusability
-          const mth = method.toUpperCase() as keyof typeof client;
-          const fn = client[mth] as ClientMethod<Paths, typeof method, Media>;
-          const { data, error } = await fn(path, init as any); // TODO: find a way to avoid as any
-          if (error || !data) {
-            throw error;
-          }
-          return data;
+    useMutation: (method, path, options, queryClient) => {
+      return useMutation(
+        {
+          mutationKey: [method, path],
+          mutationFn: async (init) => {
+            // TODO: Put in external fn for reusability
+            const mth = method.toUpperCase() as keyof typeof client;
+            const fn = client[mth] as ClientMethod<Paths, typeof method, Media>;
+            const { data, error } = await fn(path, init as any); // TODO: find a way to avoid as any
+            if (error || !data) {
+              throw error;
+            }
+            return data;
+          },
+          ...options,
         },
-        ...options,
-      });
+        queryClient,
+      );
     },
   };
 }