Merge pull request #2308 from payloadcms/fix/#2265

fix: cancels existing fetches if new fetches are started

src/admin/api.ts

@@ -12,7 +12,7 @@ export const requests = {
     }
     return fetch(`${url}${query}`, {
       credentials: 'include',
-      headers: options.headers,
+      ...options,
     });
   },
 

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,
           },
@@ -62,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);
+        }
       }
     };
 
@@ -73,6 +78,10 @@ const usePayloadAPI: UsePayloadAPI = (url, options = {}) => {
       setIsError(false);
       setIsLoading(false);
     }
+
+    return () => {
+      abortController.abort();
+    };
   }, [url, locale, search, i18n.language]);
 
   return [{ data, isLoading, isError }, { setParams }];