refactor: deprecate axios plugin and use upstream axios directly

2024-10-07 03:23:37 +00:00 · 2022-04-11 21:29:23 +02:00 · 2022-04-11 21:29:23 +02:00 · a85523881a
commit a85523881a
parent a2ae09cecb
7 changed files with 99 additions and 165 deletions
--- a/frontend/nuxt.config.ts
+++ b/frontend/nuxt.config.ts
@ -98,17 +98,17 @@ const config: NuxtConfig = {
    /**
     * Axios plugins
     *
-     * Load first our custom interceptors and the, the API
+     * Load first our custom axios instance and, afterwards, the API
     */
-    'plugins/nuxt/axiosInterceptors.ts',
+    'plugins/nuxt/axios.ts',
    'plugins/nuxt/apiPlugin.ts',
    /**
     * Rest of Nuxt plugins
     */
+    'plugins/nuxt/browserDetectionPlugin.ts',
    'plugins/nuxt/appInit.ts',
    'plugins/nuxt/axe.ts',
    'plugins/nuxt/veeValidate.ts',
-    'plugins/nuxt/browserDetectionPlugin.ts',
    'plugins/nuxt/playbackProfilePlugin.ts',
    'plugins/nuxt/supportedFeaturesPlugin.ts',
    /*
@ -135,7 +135,7 @@ const config: NuxtConfig = {
  /*
   ** Nuxt.js modules
   */
-  modules: ['@nuxtjs/i18n', '@nuxtjs/axios', '@nuxtjs/pwa'],
+  modules: ['@nuxtjs/i18n', '@nuxtjs/pwa'],
  /*
   ** Router configuration
   */
@ -153,13 +153,6 @@ const config: NuxtConfig = {
    },
    mode: process.env.HISTORY_ROUTER_MODE === '1' ? 'history' : 'hash'
  },
-  /*
-   ** Axios module configuration
-   ** See https://axios.nuxtjs.org/options
-   */
-  axios: {
-    baseURL: ''
-  },
  i18n: {
    locales: [
      { code: 'am', iso: 'am', name: 'አማርኛ', file: 'am.json' },
--- a/frontend/package.json
+++ b/frontend/package.json
@ -27,13 +27,13 @@
  "dependencies": {
    "@jellyfin/client-axios": "10.7.8",
    "@mdi/font": "6.5.95",
-    "@nuxtjs/axios": "5.13.6",
    "@nuxtjs/composition-api": "0.32.0",
    "@nuxtjs/date-fns": "1.5.0",
    "@nuxtjs/i18n": "7.2.0",
    "@nuxtjs/pwa": "3.3.5",
    "@nuxtjs/vuetify": "1.12.3",
    "@pinia/nuxt": "0.1.8",
+    "axios": "0.26.1",
    "blurhash": "1.1.5",
    "core-js": "3.21.1",
    "date-fns": "2.28.0",
--- a/frontend/plugins/nuxt/apiPlugin.ts
+++ b/frontend/plugins/nuxt/apiPlugin.ts
@ -1,5 +1,5 @@
+// @ts-nocheck
 import { Plugin } from '@nuxt/types';
-import { AxiosInstance } from 'axios';
 import {
  ActivityLogApi,
  ApiKeyApi,
@ -145,7 +145,7 @@ declare module 'vue/types/vue' {

 const apiPlugin: Plugin = (context, inject) => {
  const config = new Configuration();
-  const contextAxios = context.$axios as AxiosInstance;
+  const contextAxios = context.$axios;

  const api: ApiPlugin = {
    activityLog: new ActivityLogApi(config, '', contextAxios),
--- a/frontend/plugins/nuxt/axios.ts
+++ b/frontend/plugins/nuxt/axios.ts
@ -0,0 +1,82 @@
+import { Context, Plugin } from '@nuxt/types/app';
+import axios, { AxiosResponse, AxiosError, AxiosInstance } from 'axios';
+import { BaseItemDto } from '@jellyfin/client-axios';
+import { itemsStore, authStore, snackbarStore } from '~/store';
+
+declare module '@nuxt/types' {
+  interface Context {
+    $axios: AxiosInstance;
+  }
+
+  interface NuxtAppOptions {
+    $axios: AxiosInstance;
+  }
+}
+
+declare module 'vue/types/vue' {
+  interface Vue {
+    $axios: AxiosInstance;
+  }
+}
+
+/**
+ * TODO:
+ * - Add proper progress bar handling back (@nuxtjs/axios didn't handle some cases correctly either)
+ * - Switch to https://github.com/thornbill/jellyfin-sdk-typescript
+ * - Fix reactivity of items (reactive items are used everywhere now, as they have the _ob property added by Vue, but no changes are detected
+ * by components)
+ */
+
+const axiosPlugin: Plugin = (ctx: Context, inject): void => {
+  const axiosInstance = axios.create();
+
+  /**
+   * Function to run on every successful response
+   *
+   * @param response
+   */
+  const onResponse = (response: AxiosResponse): AxiosResponse => {
+    const items = itemsStore();
+    const auth = authStore();
+    const data = response.data;
+
+    if (data) {
+      if (data.Items && Array.isArray(data.Items)) {
+        response.data.Items = items.add(data.Items as BaseItemDto[]);
+      } else if (
+        auth.currentUser &&
+        response.config.url?.includes(`/Users/${auth.currentUserId}/Items/`)
+      ) {
+        response.data = items.add(data);
+      }
+    }
+
+    return response;
+  };
+
+  /**
+   * Function to run on every failed request
+   *
+   * @param error
+   */
+  const onResponseError = async (error: AxiosError): Promise<never | void> => {
+    const auth = authStore();
+    const snackbar = snackbarStore();
+
+    if (error.response?.status === 401 && auth.currentUser) {
+      await auth.logoutUser(true, true);
+      snackbar.push(ctx.i18n.t('login.kickedOut'), 'error');
+    } else {
+      /**
+       * Pass the error so it's handled in try/catch blocks afterwards
+       */
+      throw error;
+    }
+  };
+
+  axiosInstance.interceptors.response.use(onResponse, onResponseError);
+
+  inject('axios', axiosInstance);
+};
+
+export default axiosPlugin;
--- a/frontend/plugins/nuxt/axiosInterceptors.ts
+++ b/frontend/plugins/nuxt/axiosInterceptors.ts
@ -1,57 +0,0 @@
-import { Context, Plugin } from '@nuxt/types/app';
-import { itemsStore, authStore, snackbarStore } from '~/store';
-import { AxiosResponse } from 'axios';
-import { BaseItemDto } from '@jellyfin/client-axios';
-
-/**
- * TODO: Add all the item fields to every request related to items
- */
-
-const authPlugin: Plugin = (ctx: Context) => {
-  /**
-   * Function to run on every successful response
-   */
-  const onRequestResponse = (response: AxiosResponse<any>) => {
-    const items = itemsStore();
-    const auth = authStore();
-    const data = response.data;
-
-    if (data) {
-      if (data.Items && Array.isArray(data.Items)) {
-        response.data = items.add(data.Items as BaseItemDto[]);
-      } else if (
-        auth.currentUser &&
-        response.config.url?.includes(`/Users/${auth.currentUserId}/Items/`)
-      ) {
-        response.data = items.add(data);
-      }
-    }
-
-    return response;
-  };
-  /**
-   * Function to run on every failed request
-   */
-  const onRequestError = async (error: any) => {
-    const auth = authStore();
-    const snackbar = snackbarStore();
-
-    if (error.response.status === 401 && auth.currentUser) {
-      try {
-        await ctx.$api.user.getCurrentUser();
-      } catch {
-        await auth.logoutUser(true, true);
-        snackbar.push(ctx.i18n.t('login.kickedOut'), 'error');
-      }
-    }
-
-    /**
-     * Pass the error so it's handled in try/catch blocks afterwards
-     */
-    throw error;
-  };
-
-  ctx.$axios.interceptors.response.use(onRequestResponse, onRequestError);
-};
-
-export default authPlugin;
--- a/frontend/tsconfig.json
+++ b/frontend/tsconfig.json
@ -19,12 +19,12 @@
    "types": [
      "@types/node",
      "@nuxt/types",
-      "@nuxtjs/axios",
      "@nuxtjs/vuetify",
      "@nuxtjs/date-fns",
      "@nuxtjs/i18n",
      "@types/wicg-mediasession",
      "jest",
+      "axios",
      "@types/tizen-tv-webapis",
      "@pinia/nuxt"
    ]
--- a/package-lock.json
+++ b/package-lock.json
@ -23,13 +23,13 @@
      "dependencies": {
        "@jellyfin/client-axios": "10.7.8",
        "@mdi/font": "6.5.95",
-        "@nuxtjs/axios": "5.13.6",
        "@nuxtjs/composition-api": "0.32.0",
        "@nuxtjs/date-fns": "1.5.0",
        "@nuxtjs/i18n": "7.2.0",
        "@nuxtjs/pwa": "3.3.5",
        "@nuxtjs/vuetify": "1.12.3",
        "@pinia/nuxt": "0.1.8",
+        "axios": "0.26.1",
        "blurhash": "1.1.5",
        "core-js": "3.21.1",
        "date-fns": "2.28.0",
@ -113,6 +113,14 @@
        "yarn": "Yarn is not supported. Please use NPM."
      }
    },
+    "frontend/node_modules/axios": {
+      "version": "0.26.1",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-0.26.1.tgz",
+      "integrity": "sha512-fPwcX4EvnSHuInCMItEhAGnaSEXRBjtzh9fOtsE6E1G6p7vl7edEeZe11QHf18+6+9gR5PbKV/sGKNaD8YaMeA==",
+      "dependencies": {
+        "follow-redirects": "^1.14.8"
+      }
+    },
    "node_modules/@ampproject/remapping": {
      "version": "2.1.2",
      "resolved": "https://registry.npmjs.org/@ampproject/remapping/-/remapping-2.1.2.tgz",
@ -3708,18 +3716,6 @@
      "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
      "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A=="
    },
-    "node_modules/@nuxtjs/axios": {
-      "version": "5.13.6",
-      "resolved": "https://registry.npmjs.org/@nuxtjs/axios/-/axios-5.13.6.tgz",
-      "integrity": "sha512-XS+pOE0xsDODs1zAIbo95A0LKlilvJi8YW0NoXYuq3/jjxGgWDxizZ6Yx0AIIjZOoGsXJOPc0/BcnSEUQ2mFBA==",
-      "dependencies": {
-        "@nuxtjs/proxy": "^2.1.0",
-        "axios": "^0.21.1",
-        "axios-retry": "^3.1.9",
-        "consola": "^2.15.3",
-        "defu": "^5.0.0"
-      }
-    },
    "node_modules/@nuxtjs/composition-api": {
      "version": "0.32.0",
      "resolved": "https://registry.npmjs.org/@nuxtjs/composition-api/-/composition-api-0.32.0.tgz",
@ -3878,14 +3874,6 @@
        "vue-i18n": "^8.26.7"
      }
    },
-    "node_modules/@nuxtjs/proxy": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/@nuxtjs/proxy/-/proxy-2.1.0.tgz",
-      "integrity": "sha512-/qtoeqXgZ4Mg6LRg/gDUZQrFpOlOdHrol/vQYMnKu3aN3bP90UfOUB3QSDghUUK7OISAJ0xp8Ld78aHyCTcKCQ==",
-      "dependencies": {
-        "http-proxy-middleware": "^1.0.6"
-      }
-    },
    "node_modules/@nuxtjs/pwa": {
      "version": "3.3.5",
      "resolved": "https://registry.npmjs.org/@nuxtjs/pwa/-/pwa-3.3.5.tgz",
@ -4663,14 +4651,6 @@
      "resolved": "https://registry.npmjs.org/@types/html-minifier-terser/-/html-minifier-terser-5.1.2.tgz",
      "integrity": "sha512-h4lTMgMJctJybDp8CQrxTUiiYmedihHWkjnF/8Pxseu2S6Nlfcy8kwboQ8yejh456rP2yWoEVm1sS/FVsfM48w=="
    },
-    "node_modules/@types/http-proxy": {
-      "version": "1.17.8",
-      "resolved": "https://registry.npmjs.org/@types/http-proxy/-/http-proxy-1.17.8.tgz",
-      "integrity": "sha512-5kPLG5BKpWYkw/LVOGWpiq3nEVqxiN32rTgI53Sk12/xHFQ2rG3ehI9IO+O3W2QoKeyB92dJkoka8SUm6BX1pA==",
-      "dependencies": {
-        "@types/node": "*"
-      }
-    },
    "node_modules/@types/istanbul-lib-coverage": {
      "version": "2.0.4",
      "resolved": "https://registry.npmjs.org/@types/istanbul-lib-coverage/-/istanbul-lib-coverage-2.0.4.tgz",
@ -6344,15 +6324,6 @@
        "follow-redirects": "^1.14.0"
      }
    },
-    "node_modules/axios-retry": {
-      "version": "3.2.4",
-      "resolved": "https://registry.npmjs.org/axios-retry/-/axios-retry-3.2.4.tgz",
-      "integrity": "sha512-Co3UXiv4npi6lM963mfnuH90/YFLKWWDmoBYfxkHT5xtkSSWNqK9zdG3fw5/CP/dsoKB5aMMJCsgab+tp1OxLQ==",
-      "dependencies": {
-        "@babel/runtime": "^7.15.4",
-        "is-retry-allowed": "^2.2.0"
-      }
-    },
    "node_modules/babel-jest": {
      "version": "27.5.1",
      "resolved": "https://registry.npmjs.org/babel-jest/-/babel-jest-27.5.1.tgz",
@ -12103,19 +12074,6 @@
        "node": ">= 0.6"
      }
    },
-    "node_modules/http-proxy": {
-      "version": "1.18.1",
-      "resolved": "https://registry.npmjs.org/http-proxy/-/http-proxy-1.18.1.tgz",
-      "integrity": "sha512-7mz/721AbnJwIVbnaSv1Cz3Am0ZLT/UBwkC92VlxhXv/k/BBQfM2fXElQNC27BVGr0uwUpplYPQM9LnaBMR5NQ==",
-      "dependencies": {
-        "eventemitter3": "^4.0.0",
-        "follow-redirects": "^1.0.0",
-        "requires-port": "^1.0.0"
-      },
-      "engines": {
-        "node": ">=8.0.0"
-      }
-    },
    "node_modules/http-proxy-agent": {
      "version": "4.0.1",
      "resolved": "https://registry.npmjs.org/http-proxy-agent/-/http-proxy-agent-4.0.1.tgz",
@ -12130,21 +12088,6 @@
        "node": ">= 6"
      }
    },
-    "node_modules/http-proxy-middleware": {
-      "version": "1.3.1",
-      "resolved": "https://registry.npmjs.org/http-proxy-middleware/-/http-proxy-middleware-1.3.1.tgz",
-      "integrity": "sha512-13eVVDYS4z79w7f1+NPllJtOQFx/FdUW4btIvVRMaRlUY9VGstAbo5MOhLEuUgZFRHn3x50ufn25zkj/boZnEg==",
-      "dependencies": {
-        "@types/http-proxy": "^1.17.5",
-        "http-proxy": "^1.18.1",
-        "is-glob": "^4.0.1",
-        "is-plain-obj": "^3.0.0",
-        "micromatch": "^4.0.2"
-      },
-      "engines": {
-        "node": ">=8.0.0"
-      }
-    },
    "node_modules/https-browserify": {
      "version": "1.0.0",
      "resolved": "https://registry.npmjs.org/https-browserify/-/https-browserify-1.0.0.tgz",
@ -12773,17 +12716,6 @@
        "node": ">=8"
      }
    },
-    "node_modules/is-plain-obj": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/is-plain-obj/-/is-plain-obj-3.0.0.tgz",
-      "integrity": "sha512-gwsOE28k+23GP1B6vFl1oVh/WOzmawBrKwo5Ev6wMKzPkaXaCDIQKzLnvsA42DRlbVTWorkgTKIviAKCWkfUwA==",
-      "engines": {
-        "node": ">=10"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
    "node_modules/is-plain-object": {
      "version": "2.0.4",
      "resolved": "https://registry.npmjs.org/is-plain-object/-/is-plain-object-2.0.4.tgz",
@ -12836,17 +12768,6 @@
      "resolved": "https://registry.npmjs.org/is-resolvable/-/is-resolvable-1.1.0.tgz",
      "integrity": "sha512-qgDYXFSR5WvEfuS5dMj6oTMEbrrSaM0CrFk2Yiq/gXnBvD9pMa2jGXxyhGLfvhZpuMZe18CJpFxAt3CRs42NMg=="
    },
-    "node_modules/is-retry-allowed": {
-      "version": "2.2.0",
-      "resolved": "https://registry.npmjs.org/is-retry-allowed/-/is-retry-allowed-2.2.0.tgz",
-      "integrity": "sha512-XVm7LOeLpTW4jV19QSH38vkswxoLud8sQ57YwJVTPWdiaI9I8keEhGFpBlslyVsgdQy4Opg8QOLb8YRgsyZiQg==",
-      "engines": {
-        "node": ">=10"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
    "node_modules/is-shared-array-buffer": {
      "version": "1.0.1",
      "resolved": "https://registry.npmjs.org/is-shared-array-buffer/-/is-shared-array-buffer-1.0.1.tgz",
@ -19280,11 +19201,6 @@
        "node": ">=0.10.0"
      }
    },
-    "node_modules/requires-port": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/requires-port/-/requires-port-1.0.0.tgz",
-      "integrity": "sha1-kl0mAdOaxIXgkc8NpcbmlNw9yv8="
-    },
    "node_modules/resolve": {
      "version": "1.22.0",
      "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.0.tgz",