fix(react-client): added support for the --queryable-write-operations option for the useInfiniteQuery(), fetchQuery(), and other methods

Author: radist2s

packages/react-client/src/lib/callQueryClientFetchMethod.ts

@@ -50,11 +50,43 @@ export function callQueryClientMethodWithQueryKey<
     (requestFn
       ? // @ts-expect-error - Too complex union to type
         function ({ queryKey: [, queryParams], signal, meta, pageParam }) {
+          const { body, ...parameters } = queryParams as {
+            body: BodyInit;
+          } & typeof queryParams;
+
           return requestFn(schema, {
             parameters: infinite
-              ? (shelfMerge(2, queryParams, pageParam) as never)
-              : queryParams,
+              ? (shelfMerge(
+                  2,
+                  parameters,
+                  (function omitBodyFromParameters() {
+                    if (
+                      pageParam &&
+                      typeof pageParam === 'object' &&
+                      'body' in pageParam
+                    ) {
+                      const { body: _body, ...pageParameters } = pageParam;
+                      return pageParameters;
+                    }
+
+                    return pageParam;
+                  })()
+                ) as never)
+              : parameters,
             baseUrl,
+            body: infinite
+              ? (function shelfMergeBody() {
+                  if (
+                    pageParam &&
+                    typeof pageParam === 'object' &&
+                    'body' in pageParam
+                  ) {
+                    return shelfMerge(1, body, pageParam.body) as BodyInit;
+                  }
+
+                  return body;
+                })()
+              : body,
             signal,
             meta,
           }).then(requestFnResponseResolver, requestFnResponseRejecter);

packages/react-client/src/lib/useComposeUseQueryOptions.ts

@@ -34,10 +34,37 @@ export function useComposeUseQueryOptions(
         .requestFn(schema, {
           // @ts-expect-error - Too complex to type
           parameters: infinite
-            ? (shelfMerge(2, parameters, pageParam) as never)
+            ? (shelfMerge(
+                2,
+                parameters,
+                (function omitBodyFromParameters() {
+                  if (
+                    pageParam &&
+                    typeof pageParam === 'object' &&
+                    'body' in pageParam
+                  ) {
+                    const { body: _body, ...pageParameters } = pageParam;
+                    return pageParameters;
+                  }
+
+                  return pageParam;
+                })()
+              ) as never)
             : parameters,
           baseUrl: qraftOptions.baseUrl,
-          body,
+          body: infinite
+            ? (function shelfMergeBody() {
+                if (
+                  pageParam &&
+                  typeof pageParam === 'object' &&
+                  'body' in pageParam
+                ) {
+                  return shelfMerge(1, body, pageParam.body) as BodyInit;
+                }
+
+                return body;
+              })()
+            : body,
           signal,
           meta,
         })

packages/react-client/src/tests/msw/handlers.ts

@@ -69,6 +69,7 @@ export const handlers = [
         name: body.name!,
         description: body.description!,
         id: path.approval_policy_id,
+        trigger: body.trigger,
       });
     }
   ),

packages/react-client/src/tests/qraftAPIClient.queryable-write-operations.test.tsx

@@ -9,7 +9,7 @@ import { createAPIClient } from './fixtures/queryable-write-operations-api/index
 const baseUrl = 'https://api.sandbox.monite.com/v1';
 
 describe('Queryable write operations', () => {
-  it('queries writable operations with a specific body', async () => {
+  it('queries writable operations with a specific body for useQuery', async () => {
     const queryClient = new QueryClient();
     const qraft = createAPIClient({
       requestFn,
@@ -48,6 +48,85 @@ describe('Queryable write operations', () => {
     });
   });
 
+  it('queries writable operations with a specific body for fetchQuery', async () => {
+    const queryClient = new QueryClient();
+    const qraft = createAPIClient({
+      requestFn,
+      baseUrl,
+      queryClient,
+    });
+
+    const result =
+      await qraft.approvalPolicies.patchApprovalPoliciesId.fetchQuery({
+        parameters: {
+          header: {
+            'x-monite-version': '1',
+            'x-monite-entity-id': '2',
+          },
+          path: {
+            approval_policy_id: '2',
+          },
+          body: {
+            name: 'New Name',
+            description: 'New Description',
+          },
+        },
+      });
+
+    await waitFor(() => {
+      expect(result).toEqual({
+        id: '2',
+        name: 'New Name',
+        description: 'New Description',
+      });
+    });
+  });
+
+  it('queries writable operations with a specific body for fetchInfiniteQuery', async () => {
+    const queryClient = new QueryClient();
+    const qraft = createAPIClient({
+      requestFn,
+      baseUrl,
+      queryClient,
+    });
+
+    const result =
+      await qraft.approvalPolicies.patchApprovalPoliciesId.fetchInfiniteQuery({
+        parameters: {
+          header: {
+            'x-monite-version': '1',
+            'x-monite-entity-id': '2',
+          },
+          path: {
+            approval_policy_id: '2',
+          },
+          body: {
+            name: 'New Name',
+            description: 'New Description',
+          },
+        },
+        initialPageParam: {
+          body: {
+            trigger: true,
+          },
+        },
+      });
+
+    await waitFor(() => {
+      expect(result).toEqual({
+        pageParams: [{ body: { trigger: true } }],
+        pages: [
+          {
+            id: '2',
+            name: 'New Name',
+            description: 'New Description',
+            trigger: true,
+          },
+        ],
+      });
+    });
+  });
+
   it('queries writable operations without body', async () => {
     const queryClient = new QueryClient();
     const qraft = createAPIClient({