From ccc92fdb7519e14ff1092f19ae4e7060fa413aab Mon Sep 17 00:00:00 2001
From: James <james@trbl.design>
Date: Mon, 13 Mar 2023 11:22:10 -0400
Subject: [PATCH 1/2] fix: cancels existing fetches if new fetches are started

---
 src/admin/api.ts                  | 2 +-
 src/admin/hooks/usePayloadAPI.tsx | 7 +++++++
 2 files changed, 8 insertions(+), 1 deletion(-)

diff --git a/src/admin/api.ts b/src/admin/api.ts
index 6e0a5ad54a..3c6b3ff2e0 100644
--- a/src/admin/api.ts
+++ b/src/admin/api.ts
@@ -12,7 +12,7 @@ export const requests = {
     }
     return fetch(`${url}${query}`, {
       credentials: 'include',
-      headers: options.headers,
+      ...options,
     });
   },
 
diff --git a/src/admin/hooks/usePayloadAPI.tsx b/src/admin/hooks/usePayloadAPI.tsx
index f5f1aae2b5..e281934d5c 100644
--- a/src/admin/hooks/usePayloadAPI.tsx
+++ b/src/admin/hooks/usePayloadAPI.tsx
@@ -43,12 +43,15 @@ const usePayloadAPI: UsePayloadAPI = (url, options = {}) => {
   });
 
   useEffect(() => {
+    const abortController = new AbortController();
+
     const fetchData = async () => {
       setIsError(false);
       setIsLoading(true);
 
       try {
         const response = await requests.get(`${url}${search}`, {
+          signal: abortController.signal,
           headers: {
             'Accept-Language': i18n.language,
           },
@@ -73,6 +76,10 @@ const usePayloadAPI: UsePayloadAPI = (url, options = {}) => {
       setIsError(false);
       setIsLoading(false);
     }
+
+    return () => {
+      abortController.abort();
+    };
   }, [url, locale, search, i18n.language]);
 
   return [{ data, isLoading, isError }, { setParams }];

From d5bf957c8e87fccdd7ed4ebb0cc4cbdaf06ac3a3 Mon Sep 17 00:00:00 2001
From: James <james@trbl.design>
Date: Mon, 13 Mar 2023 13:54:58 -0400
Subject: [PATCH 2/2] chore: only throws errors in usePayloadAPI if signal is
 not aborted

---
 src/admin/hooks/usePayloadAPI.tsx | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/admin/hooks/usePayloadAPI.tsx b/src/admin/hooks/usePayloadAPI.tsx
index e281934d5c..28663c1c0e 100644
--- a/src/admin/hooks/usePayloadAPI.tsx
+++ b/src/admin/hooks/usePayloadAPI.tsx
@@ -65,8 +65,10 @@ const usePayloadAPI: UsePayloadAPI = (url, options = {}) => {
         setData(json);
         setIsLoading(false);
       } catch (error) {
-        setIsError(true);
-        setIsLoading(false);
+        if (!abortController.signal.aborted) {
+          setIsError(true);
+          setIsLoading(false);
+        }
       }
     };