Fix loading state management in useQuery when requests are aborted (o…

…hcnetwork#9222)
SwanandBhuskute · Nov 27, 2024 · 5329457 · 5329457
1 parent 3e19607
commit 5329457
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 6 deletions.
diff --git a/src/Utils/request/request.ts b/src/Utils/request/request.ts
@@ -70,6 +70,9 @@ export default async function request<TData, TBody>(
       return result;
     } catch (error: any) {
       result = { error, res: undefined, data: undefined };
+      if (error.name === "AbortError") {
+        return result;
+      }
     }
   }
 

diff --git a/src/Utils/request/useMutation.ts b/src/Utils/request/useMutation.ts
@@ -10,15 +10,15 @@ import { mergeRequestOptions } from "@/Utils/request/utils";
 
 export default function useMutation<TData, TBody>(
   route: MutationRoute<TData, TBody>,
-  options: RequestOptions<TData>,
+  options: RequestOptions<TData, TBody>,
 ) {
   const [response, setResponse] = React.useState<RequestResult<TData>>();
   const [isProcessing, setIsProcessing] = React.useState(false);
 
   const controllerRef = React.useRef<AbortController>();
 
   const runQuery = React.useCallback(
-    async (overrides?: RequestOptions<TData>) => {
+    async (overrides?: RequestOptions<TData, TBody>) => {
       controllerRef.current?.abort();
 
       const controller = new AbortController();
@@ -31,8 +31,10 @@ export default function useMutation<TData, TBody>(
 
       setIsProcessing(true);
       const response = await request(route, { ...resolvedOptions, controller });
-      setResponse(response);
-      setIsProcessing(false);
+      if (response.error?.name !== "AbortError") {
+        setResponse(response);
+        setIsProcessing(false);
+      }
       return response;
     },
     [route, JSON.stringify(options)],

diff --git a/src/Utils/request/useQuery.ts b/src/Utils/request/useQuery.ts
@@ -37,8 +37,10 @@ export default function useQuery<TData>(
 
       setLoading(true);
       const response = await request(route, { ...resolvedOptions, controller });
-      setResponse(response);
-      setLoading(false);
+      if (response.error?.name !== "AbortError") {
+        setResponse(response);
+        setLoading(false);
+      }
       return response;
     },
     [route, JSON.stringify(options)],