fix: axios cancel alternative not working (#236)

ArdentHQ · Oct 17, 2023 · a10d997 · a10d997
1 parent 28010ba
commit a10d997
Show file tree

Hide file tree

Showing 10 changed files with 166 additions and 158 deletions.
diff --git a/package.json b/package.json
@@ -141,6 +141,7 @@
         "react-resize-detector": "^8.1.0",
         "react-sortablejs": "^6.1.4",
         "react-table": "^7.8.0",
+        "react-use-cancel-token": "^1.0.3",
         "sortablejs": "^1.15.0",
         "string-hash": "^1.1.3",
         "tailwind-merge": "^1.14.0",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/resources/js/Components/Galleries/Hooks/useGalleryNtfs.tsx b/resources/js/Components/Galleries/Hooks/useGalleryNtfs.tsx
@@ -1,6 +1,7 @@
 import { groupBy } from "@ardenthq/sdk-helpers";
 import axios from "axios";
 import { useMemo, useState } from "react";
+import useAbortController from "react-use-cancel-token";
 import GalleryNftData = App.Data.Gallery.GalleryNftData;
 import { type CollectionsPageMeta, type GalleryNftsState } from "@/Components/Galleries/Hooks/useGalleryNftsContext";
 import { isTruthy } from "@/Utils/is-truthy";
@@ -47,6 +48,7 @@ export const useGalleryNtfs = ({
 }: GalleryNftsProperties): GalleryNftsState => {
     const [loadingCollections, setLoadingCollections] = useState(false);
     const [isSearchingCollections, setIsSearchingCollections] = useState(false);
+    const { newAbortSignal, cancelPreviousRequest, isCancel } = useAbortController();
 
     const [nfts, setNfts] = useState<GalleryNftData[]>(loadedNfts);
 
@@ -149,7 +151,9 @@ export const useGalleryNtfs = ({
         }
     };
 
-    const fetchCollections = async (nextPageUrl: string, query?: string): Promise<CollectionsResponse> => {
+    const fetchCollections = async (nextPageUrl: string, query?: string): Promise<void> => {
+        cancelPreviousRequest();
+
         setLoadingCollections(true);
 
         // let url = new URLSearchParams(nextPageUrl);
@@ -159,9 +163,23 @@ export const useGalleryNtfs = ({
             url.searchParams.append("query", query);
         }
 
-        const { data } = await axios.get<CollectionsResponse>(decodeURIComponent(url.toString()), {
-            requestId: "gallery-page",
-        });
+        let data: CollectionsResponse;
+
+        try {
+            const response = await axios.get<CollectionsResponse>(decodeURIComponent(url.toString()), {
+                signal: newAbortSignal(),
+            });
+
+            data = response.data;
+        } catch (error) {
+            /* istanbul ignore next -- @preserve */
+            if (isCancel(error)) {
+                return;
+            }
+
+            /* istanbul ignore next -- @preserve */
+            throw error;
+        }
 
         setPageMeta(data.collections.paginated.meta);
 
@@ -179,8 +197,6 @@ export const useGalleryNtfs = ({
         setNfts([...existingNfts, ...data.nfts]);
 
         setLoadingCollections(false);
-
-        return data;
     };
 
     const searchNfts = async (query?: string): Promise<void> => {

diff --git a/resources/js/Components/TransactionFormSlider/Hooks/useAssets.ts b/resources/js/Components/TransactionFormSlider/Hooks/useAssets.ts
@@ -1,5 +1,6 @@
 import axios from "axios";
 import { useCallback, useState } from "react";
+import useAbortController from "react-use-cancel-token";
 import TokenListItemData = App.Data.TokenListItemData;
 import { useLiveSearch } from "@/Hooks/useLiveSearch";
 import { isTruthy } from "@/Utils/is-truthy";
@@ -19,9 +20,13 @@ interface UseAssetsProperties {
 export const useAssets = ({ initialAssets, onSearchError }: UseAssetsProperties): UseAssetsState => {
     const [assets, setAssets] = useState<TokenListItemData[]>(initialAssets);
 
+    const { newAbortSignal, cancelPreviousRequest } = useAbortController();
+
     const searchTokens = async (query: string): Promise<void> => {
+        cancelPreviousRequest();
+        // The `useAbortController@isCancel` exception handling is done on the `useLiveSearch` hook.
         const { data } = await axios.get<App.Data.TokenListItemData[]>(route("tokens.search", { query }), {
-            requestId: "search-tokens",
+            signal: newAbortSignal(),
         });
         setAssets(data);
     };

diff --git a/resources/js/Hooks/useLiveSearch.ts b/resources/js/Hooks/useLiveSearch.ts
@@ -1,5 +1,5 @@
-import axios from "axios";
 import { useCallback, useEffect, useState } from "react";
+import useAbortController from "react-use-cancel-token";
 import { replaceUrlQuery } from "@/Utils/replace-url-query";
 
 const THROTTLE_TIMEOUT = 500;
@@ -23,6 +23,7 @@ export const useLiveSearch = <T>({
     const [query, setQuery] = useState(queryParameter);
     const [throttledQuery, setThrottledQuery] = useState<string>(queryParameter);
     const [searchedQuery, setSearchedQuery] = useState<string>(queryParameter);
+    const { isCancel } = useAbortController();
 
     const doSearch = useCallback(
         async (searchQuery: string): Promise<void> => {
@@ -48,7 +49,7 @@ export const useLiveSearch = <T>({
                 // This is done to allow the component using this hook to assign the
                 // results to a state before changing the state to "not loading".
             } catch (error) {
-                if (!axios.isCancel(error)) {
+                if (!isCancel(error)) {
                     onError?.(error);
                 }
 

diff --git a/resources/js/Pages/Collections/Hooks/useCollections.ts b/resources/js/Pages/Collections/Hooks/useCollections.ts
@@ -1,6 +1,7 @@
 import { isNumber } from "@ardenthq/sdk-helpers";
 import axios from "axios";
 import { useCallback, useRef, useState } from "react";
+import useAbortController from "react-use-cancel-token";
 import { type PaginationData } from "@/Components/Pagination/Pagination.contracts";
 import { useInertiaHeader } from "@/Hooks/useInertiaHeader";
 import { useLiveSearch } from "@/Hooks/useLiveSearch";
@@ -72,6 +73,8 @@ export const useCollections = ({
     sortBy: string | null;
     onSearchError: (error: unknown) => void;
 }): CollectionsState => {
+    const { newAbortSignal, cancelPreviousRequest } = useAbortController();
+
     const [isLoading, setIsLoading] = useState(true);
     const isLoadingMore = useRef(false);
     const [collections, setCollections] = useState<App.Data.Collections.CollectionData[]>([]);
@@ -96,6 +99,7 @@ export const useCollections = ({
         showHidden = false,
         sort = null,
     }: QueryParameters = {}): Promise<CollectionsResponse> => {
+        cancelPreviousRequest();
         setIsLoading(true);
         isLoadingMore.current = true;
 
@@ -111,8 +115,9 @@ export const useCollections = ({
             pageUrlWithSearch += `&chain=${selectedChainIds.join(",")}`;
         }
 
+        // The `useAbortController@isCancel` exception handling is done on the `useLiveSearch` hook.
         const { data } = await axios.get<CollectionsResponse>(pageUrlWithSearch, {
-            requestId: "collections-page",
+            signal: newAbortSignal(),
             headers,
         });
 

diff --git a/resources/js/Pages/Collections/Index.tsx b/resources/js/Pages/Collections/Index.tsx
@@ -82,14 +82,6 @@ const CollectionsIndex = ({
         },
     });
 
-    useEffect(() => {
-        if (!auth.authenticated) {
-            return;
-        }
-
-        reload();
-    }, [auth.authenticated]);
-
     const selectDisplayTypeHandler = (displayType: CollectionDisplayType): void => {
         setDisplayType(displayType);
 
@@ -107,8 +99,12 @@ const CollectionsIndex = ({
     };
 
     useEffect(() => {
+        if (!auth.authenticated) {
+            return;
+        }
+
         reload({ selectedChainIds });
-    }, [selectedChainIds]);
+    }, [selectedChainIds, auth.authenticated]);
 
     return (
         <DefaultLayout toastMessage={props.toast}>

diff --git a/resources/js/Pages/Galleries/Components/GalleryPage/GalleryPage.tsx b/resources/js/Pages/Galleries/Components/GalleryPage/GalleryPage.tsx
@@ -2,6 +2,7 @@ import { Head, router } from "@inertiajs/react";
 import axios from "axios";
 import { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
+import useAbortController from "react-use-cancel-token";
 import { EmptyBlock } from "@/Components/EmptyBlock/EmptyBlock";
 import { SearchInput } from "@/Components/Form/SearchInput";
 import { Heading } from "@/Components/Heading";
@@ -27,6 +28,7 @@ export const GalleryPage = ({
 }): JSX.Element => {
     const { t } = useTranslation();
 
+    const { newAbortSignal, cancelPreviousRequest, isCancel } = useAbortController();
     const [loading, setLoading] = useState(true);
 
     const searchParameters = new URLSearchParams(window.location.search);
@@ -43,19 +45,35 @@ export const GalleryPage = ({
     const { headers } = useInertiaHeader();
 
     const fetchGalleries = async (): Promise<void> => {
+        cancelPreviousRequest();
+
         const pageUrlWithSearch = replaceUrlQuery({
             query: debouncedQuery,
             page: (debouncedQuery !== initialQuery ? 1 : currentPage).toString(),
         });
 
         setLoading(true);
 
-        const { data } = await axios.get<{
+        let data: {
             paginated: PaginationData<App.Data.Gallery.GalleryData>;
-        }>(pageUrlWithSearch, {
-            requestId: "gallery-page",
-            headers,
-        });
+        };
+
+        try {
+            const reponse = await axios.get<{
+                paginated: PaginationData<App.Data.Gallery.GalleryData>;
+            }>(pageUrlWithSearch, {
+                headers,
+                signal: newAbortSignal(),
+            });
+
+            data = reponse.data;
+        } catch (error) {
+            if (isCancel(error)) {
+                return;
+            }
+
+            throw error;
+        }
 
         // If the user is on a page that doesn't exist anymore, redirect them to the last page
         if (data.paginated.meta.current_page > data.paginated.meta.last_page) {
@@ -66,6 +84,7 @@ export const GalleryPage = ({
         }
 
         setGalleries(data.paginated);
+
         setLoading(false);
     };
 

diff --git a/resources/js/app.tsx b/resources/js/app.tsx
@@ -32,24 +32,13 @@ import { i18n } from "@/I18n";
 // eslint-disable-next-line @typescript-eslint/no-unsafe-argument, @typescript-eslint/no-explicit-any, @typescript-eslint/no-unsafe-member-access
 (window as any).CookieConsent = CookieConsent;
 
-const abortController = new AbortController();
-const { signal } = abortController;
-
-axios.interceptors.request.use((config) => {
-    config.signal = signal;
-    return config;
-});
-
 axios.interceptors.response.use(
     (response) => response,
     async (error: AxiosError) => {
         const { status } = error.response ?? {};
 
         if (status === 419) {
-            abortController.abort();
-            await axios.get(route("refresh-csrf-token"), {
-                signal,
-            });
+            await axios.get(route("refresh-csrf-token"));
 
             if (error.response != null) {
                 return await axios(error.response.config);

diff --git a/resources/types/globals.d.ts b/resources/types/globals.d.ts
@@ -2,11 +2,6 @@ import ziggyRoute from "ziggy-js";
 import { AxiosInstance, AxiosRequestConfig } from "axios";
 import { Ethereum } from "@/hooks/useMetaMask.contracts";
 
-declare module "axios" {
-    export interface AxiosRequestConfig {
-        requestId?: string;
-    }
-}
 declare global {
     const route: typeof ziggyRoute;