parent e50dae5

author Juan Patricio Marroquin <juan.marroquin1@unmsm.edu.pe> 1696515102 -0500
committer ItsANameToo <itsanametoo@protonmail.com> 1696926888 +0200

refactor: use abortController for axios instead of axios-cancel (#186)

package.json

@@ -45,7 +45,6 @@
         "@testing-library/react-hooks": "^8.0.1",
         "@testing-library/user-event": "^14.5.1",
         "@tippyjs/react": "^4.2.6",
-        "@types/axios-cancel": "^0.2.2",
         "@types/body-scroll-lock": "^3.1.0",
         "@types/file-saver": "^2.0.5",
         "@types/lodash": "^4.14.199",
@@ -125,7 +124,6 @@
         "@testing-library/jest-dom": "^6.1.3",
         "@types/string-hash": "^1.1.1",
         "assert": "^2.1.0",
-        "axios-cancel": "^0.2.2",
         "body-scroll-lock": "4.0.0-beta.0",
         "browser-fs-access": "^0.35.0",
         "chart.js": "^4.4.0",

resources/js/app.tsx

@@ -6,7 +6,6 @@ import "../css/app.css";
 import { createInertiaApp } from "@inertiajs/react";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import axios, { type AxiosError } from "axios";
-import axiosCancel from "axios-cancel";
 import {
     ArcElement,
     CategoryScale,
@@ -20,7 +19,6 @@ import {
     Tooltip,
 } from "chart.js";
 import { resolvePageComponent } from "laravel-vite-plugin/inertia-helpers";
-import get from "lodash/get";
 import { createRoot } from "react-dom/client";
 import { I18nextProvider } from "react-i18next";
 import DarkModeContextProvider from "./Contexts/DarkModeContex";
@@ -34,16 +32,24 @@ 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;
 
-// eslint-disable-next-line @typescript-eslint/no-unsafe-argument, @typescript-eslint/no-explicit-any
-axiosCancel(axios as any);
+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 = get(error, "response.status");
+        const { status } = error.response ?? {};
 
         if (status === 419) {
-            await axios.get(route("refresh-csrf-token"));
+            abortController.abort();
+            await axios.get(route("refresh-csrf-token"), {
+                signal,
+            });
 
             if (error.response != null) {
                 return await axios(error.response.config);