refactor: switch from Axios for Fetch API (#840)

* refactor: switch ExternalAPI to Fetch API

* fix: add missing auth token in Plex request

* fix: send proper URL params

* ci: try to fix format checker

* ci: ci: try to fix format checker

* ci: try to fix format checker

* refactor: make tautulli use the ExternalAPI class

* refactor: add rate limit to fetch api

* refactor: add rate limit to fetch api

* refactor: switch server from axios to fetch api

* refactor: switch frontend from axios to fetch api

* fix: switch from URL objects to strings

* fix: use the right search params for ExternalAPI

* fix: better log for ExternalAPI errors

* feat: add retry to external API requests

* fix: try to fix network errors with IPv6

* fix: imageProxy rate limit

* revert: remove retry to external API requests

* feat: set IPv4 first as an option

* fix(jellyfinapi): add missing argument in JellyfinAPI constructor

* refactor: clean the rate limit utility

src/pages/_app.tsx

@@ -15,7 +15,6 @@ import '@app/styles/globals.css';
 import { polyfillIntl } from '@app/utils/polyfillIntl';
 import { MediaServerType } from '@server/constants/server';
 import type { PublicSettingsResponse } from '@server/interfaces/api/settingsInterfaces';
-import axios from 'axios';
 import type { AppInitialProps, AppProps } from 'next/app';
 import App from 'next/app';
 import Head from 'next/head';
@@ -139,7 +138,11 @@ const CoreApp: Omit<NextAppComponentType, 'origGetInitialProps'> = ({
   return (
     <SWRConfig
       value={{
-        fetcher: (url) => axios.get(url).then((res) => res.data),
+        fetcher: async (resource, init) => {
+          const res = await fetch(resource, init);
+          if (!res.ok) throw new Error();
+          return await res.json();
+        },
         fallback: {
           '/api/v1/auth/me': user,
         },
@@ -202,13 +205,13 @@ CoreApp.getInitialProps = async (initialProps) => {
 
   if (ctx.res) {
     // Check if app is initialized and redirect if necessary
-    const response = await axios.get<PublicSettingsResponse>(
+    const res = await fetch(
       `http://localhost:${process.env.PORT || 5055}/api/v1/settings/public`
     );
+    if (!res.ok) throw new Error();
+    currentSettings = await res.json();
 
-    currentSettings = response.data;
-
-    const initialized = response.data.initialized;
+    const initialized = currentSettings.initialized;
 
     if (!initialized) {
       if (!router.pathname.match(/(setup|login\/plex)/)) {
@@ -220,7 +223,7 @@ CoreApp.getInitialProps = async (initialProps) => {
     } else {
       try {
         // Attempt to get the user by running a request to the local api
-        const response = await axios.get<User>(
+        const res = await fetch(
           `http://localhost:${process.env.PORT || 5055}/api/v1/auth/me`,
           {
             headers:
@@ -229,7 +232,8 @@ CoreApp.getInitialProps = async (initialProps) => {
                 : undefined,
           }
         );
-        user = response.data;
+        if (!res.ok) throw new Error();
+        user = await res.json();
 
         if (router.pathname.match(/(setup|login)/)) {
           ctx.res.writeHead(307, {

src/pages/collection/[collectionId]/index.tsx

@@ -1,6 +1,5 @@
 import CollectionDetails from '@app/components/CollectionDetails';
 import type { Collection } from '@server/models/Collection';
-import axios from 'axios';
 import type { GetServerSideProps, NextPage } from 'next';
 
 interface CollectionPageProps {
@@ -14,7 +13,7 @@ const CollectionPage: NextPage<CollectionPageProps> = ({ collection }) => {
 export const getServerSideProps: GetServerSideProps<
   CollectionPageProps
 > = async (ctx) => {
-  const response = await axios.get<Collection>(
+  const res = await fetch(
     `http://localhost:${process.env.PORT || 5055}/api/v1/collection/${
       ctx.query.collectionId
     }`,
@@ -24,10 +23,12 @@ export const getServerSideProps: GetServerSideProps<
         : undefined,
     }
   );
+  if (!res.ok) throw new Error();
+  const collection: Collection = await res.json();
 
   return {
     props: {
-      collection: response.data,
+      collection,
     },
   };
 };

src/pages/movie/[movieId]/index.tsx

@@ -1,6 +1,5 @@
 import MovieDetails from '@app/components/MovieDetails';
 import type { MovieDetails as MovieDetailsType } from '@server/models/Movie';
-import axios from 'axios';
 import type { GetServerSideProps, NextPage } from 'next';
 
 interface MoviePageProps {
@@ -14,7 +13,7 @@ const MoviePage: NextPage<MoviePageProps> = ({ movie }) => {
 export const getServerSideProps: GetServerSideProps<MoviePageProps> = async (
   ctx
 ) => {
-  const response = await axios.get<MovieDetailsType>(
+  const res = await fetch(
     `http://localhost:${process.env.PORT || 5055}/api/v1/movie/${
       ctx.query.movieId
     }`,
@@ -24,10 +23,12 @@ export const getServerSideProps: GetServerSideProps<MoviePageProps> = async (
         : undefined,
     }
   );
+  if (!res.ok) throw new Error();
+  const movie: MovieDetailsType = await res.json();
 
   return {
     props: {
-      movie: response.data,
+      movie,
     },
   };
 };

src/pages/tv/[tvId]/index.tsx

@@ -1,6 +1,5 @@
 import TvDetails from '@app/components/TvDetails';
 import type { TvDetails as TvDetailsType } from '@server/models/Tv';
-import axios from 'axios';
 import type { GetServerSideProps, NextPage } from 'next';
 
 interface TvPageProps {
@@ -14,7 +13,7 @@ const TvPage: NextPage<TvPageProps> = ({ tv }) => {
 export const getServerSideProps: GetServerSideProps<TvPageProps> = async (
   ctx
 ) => {
-  const response = await axios.get<TvDetailsType>(
+  const res = await fetch(
     `http://localhost:${process.env.PORT || 5055}/api/v1/tv/${ctx.query.tvId}`,
     {
       headers: ctx.req?.headers?.cookie
@@ -22,10 +21,12 @@ export const getServerSideProps: GetServerSideProps<TvPageProps> = async (
         : undefined,
     }
   );
+  if (!res.ok) throw new Error();
+  const tv: TvDetailsType = await res.json();
 
   return {
     props: {
-      tv: response.data,
+      tv,
     },
   };
 };