Merge pull request #403 from OpenAPI-Qraft/fix/use-queries-body

fix(react-client): `@openapi-qraft/react` for the `--queryable-write-operations` option

Author: radist2s

.changeset/vast-rules-relax.md

@@ -0,0 +1,5 @@
+---
+'@openapi-qraft/react': patch
+---
+
+Fix `body` handling for queryable write operations in `useQueries` and `useSuspenseQueries`.

packages/react-client/src/callbacks/useQueries.ts

@@ -8,6 +8,7 @@ import type { DefaultError, QueriesResults } from '@tanstack/react-query';
 import type { CreateAPIQueryClientOptions } from '../qraftAPIClient.js';
 import { useQueries as useQueriesTanstack } from '@tanstack/react-query';
 import { composeQueryKey } from '../lib/composeQueryKey.js';
+import { prepareRequestFnParameters } from '../lib/prepareRequestFnParameters.js';
 import { requestFnResponseRejecter } from '../lib/requestFnResponseRejecter.js';
 import { requestFnResponseResolver } from '../lib/requestFnResponseResolver.js';
 
@@ -48,10 +49,17 @@ export const useQueries: (
           queryFn:
             optionsWithQueryKey.queryFn ??
             function ({ queryKey: [, queryParams], signal, meta }) {
+              const { parameters, body } = prepareRequestFnParameters(
+                queryParams,
+                undefined,
+                false
+              );
+
               return qraftOptions
                 .requestFn(schema, {
-                  parameters: queryParams as never,
+                  parameters: parameters as never,
                   baseUrl: qraftOptions.baseUrl,
+                  body,
                   signal,
                   meta,
                 })

packages/react-client/src/callbacks/useSuspenseQueries.ts

@@ -11,6 +11,7 @@ import type {
 import type { CreateAPIQueryClientOptions } from '../qraftAPIClient.js';
 import { useSuspenseQueries as useSuspenseQueriesTanstack } from '@tanstack/react-query';
 import { composeQueryKey } from '../lib/composeQueryKey.js';
+import { prepareRequestFnParameters } from '../lib/prepareRequestFnParameters.js';
 import { requestFnResponseRejecter } from '../lib/requestFnResponseRejecter.js';
 import { requestFnResponseResolver } from '../lib/requestFnResponseResolver.js';
 
@@ -52,10 +53,17 @@ export const useSuspenseQueries: (
           queryFn:
             optionsWithQueryKey.queryFn ??
             function ({ queryKey: [, queryParams], signal, meta }) {
+              const { parameters, body } = prepareRequestFnParameters(
+                queryParams,
+                undefined,
+                false
+              );
+
               return qraftOptions
                 .requestFn(schema, {
-                  parameters: queryParams as never,
+                  parameters: parameters as never,
                   baseUrl: qraftOptions.baseUrl,
+                  body,
                   signal,
                   meta,
                 })

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

@@ -48,6 +48,145 @@ describe('Queryable write operations', () => {
     });
   });
 
+  it('queries writable operations with a specific body for useQueries', async () => {
+    const queryClient = new QueryClient();
+    const qraft = createAPIClient({
+      requestFn,
+      baseUrl,
+      queryClient,
+    });
+
+    const parameters = {
+      header: {
+        'x-monite-version': '1',
+        'x-monite-entity-id': '2',
+      },
+      path: {
+        approval_policy_id: '2',
+      },
+      body: {
+        name: 'New Name',
+        description: 'New Description',
+      },
+    };
+
+    const queryKeyParameters = {
+      ...parameters,
+      body: {
+        name: 'Another Name',
+        description: 'Another Description',
+      },
+    };
+
+    const queryKey =
+      qraft.approvalPolicies.patchApprovalPoliciesId.getQueryKey(
+        queryKeyParameters
+      );
+
+    const { result } = renderHook(
+      () =>
+        qraft.approvalPolicies.patchApprovalPoliciesId.useQueries({
+          queries: [{ parameters }, { queryKey }],
+        }),
+      {
+        wrapper: (props) => (
+          <QueryClientProvider client={queryClient} {...props} />
+        ),
+      }
+    );
+
+    await waitFor(() => {
+      expect(result.current[0]?.data).toEqual({
+        id: '2',
+        name: 'New Name',
+        description: 'New Description',
+      });
+      expect(result.current[1]?.data).toEqual({
+        id: '2',
+        name: 'Another Name',
+        description: 'Another Description',
+      });
+    });
+  });
+
+  it('queries writable operations with a specific body for useSuspenseQueries', async () => {
+    const queryClient = new QueryClient();
+    const qraft = createAPIClient({
+      requestFn,
+      baseUrl,
+      queryClient,
+    });
+
+    const parameters = {
+      header: {
+        'x-monite-version': '1',
+        'x-monite-entity-id': '2',
+      },
+      path: {
+        approval_policy_id: '2',
+      },
+      body: {
+        name: 'New Name',
+        description: 'New Description',
+      },
+    };
+
+    const queryKeyParameters = {
+      ...parameters,
+      body: {
+        name: 'Another Name',
+        description: 'Another Description',
+      },
+    };
+
+    const queryKey =
+      qraft.approvalPolicies.patchApprovalPoliciesId.getQueryKey(
+        queryKeyParameters
+      );
+
+    const hook = () => {
+      try {
+        return qraft.approvalPolicies.patchApprovalPoliciesId.useSuspenseQueries(
+          {
+            queries: [{ parameters }, { queryKey }],
+          }
+        );
+      } catch (error) {
+        return error as Promise<void>;
+      }
+    };
+
+    const { result: resultWithErrorPromise } = renderHook(hook, {
+      wrapper: (props) => (
+        <QueryClientProvider client={queryClient} {...props} />
+      ),
+    });
+
+    expect(resultWithErrorPromise.current).toBeInstanceOf(Promise);
+    await resultWithErrorPromise.current;
+
+    const { result: resultWithData } = renderHook(hook, {
+      wrapper: (props) => (
+        <QueryClientProvider client={queryClient} {...props} />
+      ),
+    });
+
+    if (resultWithData.current instanceof Promise) {
+      throw new Error('Promise should be resolved');
+    }
+
+    expect(resultWithData.current[0].data).toEqual({
+      id: '2',
+      name: 'New Name',
+      description: 'New Description',
+    });
+    expect(resultWithData.current[1].data).toEqual({
+      id: '2',
+      name: 'Another Name',
+      description: 'Another Description',
+    });
+  });
+
   it('queries writable operations with a specific body for fetchQuery', async () => {
     const queryClient = new QueryClient();
     const qraft = createAPIClient({