Merge pull request #336 from OpenAPI-Qraft/fix/react-client-secure

chore: simplify `requestFn` type usage

Author: radist2s

.changeset/petite-games-occur.md

@@ -0,0 +1,5 @@
+---
+'@openapi-qraft/react': patch
+---
+
+Make the type of the input `requestFn` parameter more flexible.

.changeset/poor-forks-roll.md

@@ -0,0 +1,5 @@
+---
+'@openapi-qraft/react': patch
+---
+
+Fix the handling of the external abort signal for the `requestInfo` in the `createSecureRequest()` function.

packages/react-client/src/Unstable_QraftSecureRequestFn.ts

@@ -12,31 +12,29 @@ import { QueryClient, useQueries } from '@tanstack/react-query';
 import { createElement, Fragment, useEffect, useMemo } from 'react';
 import { jwtDecode } from './lib/jwt-decode/index.js';
 
-interface QraftSecureRequestFnBaseProps {
-  requestFn<TData, TError>(
-    schema: OperationSchema,
-    requestInfo: RequestFnInfo,
-    options?: RequestFnOptions
-  ): Promise<RequestFnResponse<TData, TError>>;
+type RequestFn = <TData, TError>(
+  schema: OperationSchema,
+  requestInfo: RequestFnInfo,
+  options?: RequestFnOptions
+) => Promise<RequestFnResponse<TData, TError>>;
+
+interface QraftSecureRequestFnBaseProps<TRequestFn extends RequestFn> {
+  requestFn: TRequestFn;
   securitySchemes: SecuritySchemeHandlers<string>;
 }
 
-type RequestFn = QraftSecureRequestFnBaseProps['requestFn'];
-
-export interface QraftSecureRequestFnProps
-  extends QraftSecureRequestFnBaseProps {
-  children(
-    secureRequestFn: QraftSecureRequestFnBaseProps['requestFn']
-  ): ReactNode;
+export interface QraftSecureRequestFnProps<TRequestFn extends RequestFn>
+  extends QraftSecureRequestFnBaseProps<TRequestFn> {
+  children(secureRequestFn: TRequestFn): ReactNode;
   queryClient?: QueryClient;
 }
 
-export function QraftSecureRequestFn({
+export function QraftSecureRequestFn<TRequestFn extends RequestFn>({
   children,
   requestFn,
   securitySchemes,
   queryClient: inQueryClient,
-}: QraftSecureRequestFnProps) {
+}: QraftSecureRequestFnProps<TRequestFn>) {
   const queryClient = useMemo(
     () =>
       inQueryClient ??
@@ -72,13 +70,13 @@ export function QraftSecureRequestFn({
   });
 }
 
-export const useSecuritySchemeAuth = ({
+export const useSecuritySchemeAuth = <TRequestFn extends RequestFn>({
   securitySchemes,
   requestFn,
   queryClient,
-}: QraftSecureRequestFnBaseProps & {
+}: QraftSecureRequestFnBaseProps<TRequestFn> & {
   queryClient: QueryClient;
-}): RequestFn => {
+}): TRequestFn => {
   useQueries(
     {
       queries: Object.entries(securitySchemes).map(([securitySchemeName]) => {
@@ -101,7 +99,7 @@ export const useSecuritySchemeAuth = ({
   return useMemo(
     () => createSecureRequestFn(securitySchemes, requestFn, queryClient),
     [securitySchemes, requestFn, queryClient]
-  );
+  ) as TRequestFn;
 };
 
 /**
@@ -113,11 +111,11 @@ export const useSecuritySchemeAuth = ({
  * @param requestFn Qraft `requestFn`
  * @param queryClient QueryClient instance.
  */
-export function createSecureRequestFn(
+export function createSecureRequestFn<TRequestFn extends RequestFn>(
   securitySchemes: SecuritySchemeHandlers<string>,
-  requestFn: RequestFn,
+  requestFn: TRequestFn,
   queryClient: QueryClient
-): RequestFn {
+): TRequestFn {
   return async function secureRequestFn(
     schema: OperationSchema,
     requestInfo: RequestFnInfo,
@@ -147,7 +145,7 @@ export function createSecureRequestFn(
       ),
       options
     );
-  };
+  } as TRequestFn;
 }
 
 /**
@@ -174,14 +172,25 @@ async function createSecureRequestInfo(
 ): Promise<RequestFnInfo> {
   const prevSecurityResult = queryClient.getQueryData<SecurityScheme>(queryKey);
 
-  const securityResult = await queryClient.fetchQuery({
-    queryKey,
-    queryFn: ({ signal }) =>
-      handler({
-        signal,
-        isRefreshing: Boolean(prevSecurityResult),
-      }),
-  });
+  const abortQuery = () => queryClient.cancelQueries({ queryKey, exact: true });
+
+  requestInfo.signal?.addEventListener('abort', abortQuery);
+
+  const securityResult = await queryClient
+    .fetchQuery({
+      queryKey,
+      queryFn: ({ signal }) =>
+        handler({
+          signal,
+          isRefreshing: Boolean(prevSecurityResult),
+        }),
+    })
+    .catch((error) => {
+      throw requestInfo.signal?.aborted ? requestInfo.signal.reason : error;
+    })
+    .finally(
+      () => void requestInfo.signal?.removeEventListener('abort', abortQuery)
+    );
 
   if (!shallowEqualObjects(securityResult, prevSecurityResult)) {
     const securityRefreshInterval = getSecurityRefreshInterval(securityResult);

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

@@ -59,7 +59,6 @@ export const useMutation: <
     {
       ...options,
       mutationKey,
-      // @ts-expect-error - Too complex to type
       mutationFn:
         options?.mutationFn ??
         (parameters

packages/react-client/src/qraftAPIClient.ts

@@ -10,10 +10,10 @@ import type {
 import { createRecursiveProxy } from './lib/createRecursiveProxy.js';
 
 export interface CreateAPIBasicClientOptions {
-  requestFn<TData, TError>(
+  requestFn: (
     schema: OperationSchema,
     requestInfo: RequestFnInfo
-  ): Promise<RequestFnResponse<TData, TError>>;
+  ) => Promise<RequestFnResponse<any, any>>;
   baseUrl: string;
 }
 

packages/react-client/src/tests/QraftSecureRequestFn.test.tsx

@@ -618,6 +618,84 @@ describe('QraftSecureRequestFn', { timeout: 10_000 }, () => {
       ],
     ]);
   });
+
+  it('should cancel token fetching when request is aborted', async () => {
+    const abortController = new AbortController();
+
+    const fetchPartnerToken = vi
+      .fn()
+      .mockImplementation(() => new Promise(() => {}));
+
+    const queryClient = new QueryClient();
+
+    const { result } = renderHook(
+      () =>
+        useQraft().entities.postEntitiesIdDocuments({
+          signal: abortController.signal,
+          parameters: mutationParams,
+          body: { verification_document_front: '' },
+        }),
+      {
+        wrapper: (props) => (
+          <QraftSecureRequestFn
+            requestFn={requestFn}
+            queryClient={queryClient}
+            securitySchemes={{
+              partnerToken: fetchPartnerToken,
+            }}
+          >
+            {(secureRequestFn) => (
+              <Providers {...props} requestFn={secureRequestFn} />
+            )}
+          </QraftSecureRequestFn>
+        ),
+      }
+    );
+
+    await vi.advanceTimersByTimeAsync(100);
+    await queryClient.cancelQueries();
+
+    await expect(result.current).rejects.toThrow('CancelledError');
+  });
+
+  it('should cancel token fetching when externally aborted', async () => {
+    const abortController = new AbortController();
+
+    const fetchPartnerToken = vi
+      .fn()
+      .mockImplementation(() => new Promise(() => {}));
+
+    const queryClient = new QueryClient();
+
+    const { result } = renderHook(
+      () =>
+        useQraft().entities.postEntitiesIdDocuments({
+          signal: abortController.signal,
+          parameters: mutationParams,
+          body: { verification_document_front: '' },
+        }),
+      {
+        wrapper: (props) => (
+          <QraftSecureRequestFn
+            requestFn={requestFn}
+            queryClient={queryClient}
+            securitySchemes={{
+              partnerToken: fetchPartnerToken,
+            }}
+          >
+            {(secureRequestFn) => (
+              <Providers {...props} requestFn={secureRequestFn} />
+            )}
+          </QraftSecureRequestFn>
+        ),
+      }
+    );
+
+    await vi.advanceTimersByTimeAsync(100);
+    abortController.abort(new Error('My Custom Abort Error'));
+
+    await expect(result.current).rejects.toThrow('My Custom Abort Error');
+  });
 });
 
 function Providers({

packages/react-client/src/tests/qraftAPIClient.test.tsx

@@ -1920,7 +1920,6 @@ describe('Qraft uses "fetchQuery(...) & "prefetchQuery(...)" & "ensureQueryData(
     const requestFnSpy = vi.fn(requestFn);
 
     const { qraft } = createClient({
-      // @ts-expect-error - vi.fn types are not correct
       requestFn: requestFnSpy,
     });