Replace axios with native fetch API

package.json

@@ -27,7 +27,6 @@
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.4.0",
     "autoprefixer": "^10.4.13",
-    "axios": "^1.1.3",
     "jest": "^29.3.1",
     "jest-environment-jsdom": "^29.3.1",
     "next-auth": "^4.16.4",

pages/api/addTracks.ts

@@ -1,5 +1,4 @@
 import type { NextApiRequest, NextApiResponse } from 'next'
-import axios from 'axios'
 
 const Handler = async (req: NextApiRequest, res: NextApiResponse) => {
   const body = req.body
@@ -25,15 +24,10 @@ const Handler = async (req: NextApiRequest, res: NextApiResponse) => {
 }
 
 const addTracks = async(headers: {[key: string]: string}, playListId: string, uris: string[]) => {
-  const data = {
-    uris: uris,
-  }
-
-  const response = await axios({
+  const response = await fetch(`https://api.spotify.com/v1/playlists/${playListId}/tracks`, {
     method: 'POST',
-    url: `https://api.spotify.com/v1/playlists/${playListId}/tracks`,
     headers: headers,
-    data: data
+    body: JSON.stringify({ uris: uris }),
   })
 
   return response

pages/api/eachTrack.ts

@@ -1,5 +1,4 @@
 import type { NextApiRequest, NextApiResponse } from 'next'
-import axios from 'axios'
 
 const EachTrack = async (req: NextApiRequest, res: NextApiResponse) => {
   const body = req.body
@@ -20,16 +19,18 @@ const getTrackId = async (token: any, ids: any, artistId: string) => {
 
   for (const id of ids) {
     const severalId = id.join(',')
-    const response = await axios.get(`https://api.spotify.com/v1/albums`, {
-      params: {
-          'ids': severalId,
-      },
+    const params = new URLSearchParams({
+      'ids': severalId,
+    })
+
+    const response = await fetch(`https://api.spotify.com/v1/albums?${params}`, {
       headers: {
-          Authorization: `Bearer ${token}`
-        }
-      })
+        Authorization: `Bearer ${token}`
+      }
+    })
 
-    albums = albums.concat(response.data.albums)
+    const data = await response.json()
+    albums = albums.concat(data.albums)
     if (response.status != 200) {
       status = response.status
       break

pages/api/playList.ts

@@ -1,30 +1,25 @@
 import type { NextApiRequest, NextApiResponse } from 'next'
-import axios from 'axios'
 
 const Playlist = async (req: NextApiRequest, res: NextApiResponse) => {
   const body = req.body
   const id = body.id
   const playlistName = body.name
 
-  const headers = {
-    Authorization: `Bearer ${body.token}`,
-    'Content-Type': 'application/json; charset=utf-8',
-  }
-
-  const data = {
-    name: playlistName,
-    description: 'Playlist created by Srive',
-    public: false,
-  }
-
-  const response = await axios({
+  const response = await fetch(`https://api.spotify.com/v1/users/${id}/playlists`, {
     method: 'POST',
-    url: `https://api.spotify.com/v1/users/${id}/playlists`,
-    headers: headers,
-    data: data
+    headers: {
+      Authorization: `Bearer ${body.token}`,
+      'Content-Type': 'application/json; charset=utf-8',
+    },
+    body: JSON.stringify({
+      name: playlistName,
+      description: 'Playlist created by Srive',
+      public: false,
+    }),
   })
 
-  res.status(response.status).json({ data: response.data })
+  const data = await response.json()
+  res.status(response.status).json({ data: data })
 }
 
 export default Playlist

pages/api/search.ts

@@ -1,5 +1,4 @@
 import type { NextApiRequest, NextApiResponse } from 'next'
-import axios from 'axios'
 
 export default async function handler(req: NextApiRequest, res: NextApiResponse) {
   const body = req.body
@@ -8,16 +7,17 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse)
 }
 
 async function searchSpotify(token: string, artistName: string) {
-  const response = await axios.get('https://api.spotify.com/v1/search', {
-    params: {
-        'query': artistName,
-        'type': 'artist',
-        'locale': 'ja'
-    },
+  const params = new URLSearchParams({
+    'query': artistName,
+    'type': 'artist',
+    'locale': 'ja'
+  })
+
+  const response = await fetch(`https://api.spotify.com/v1/search?${params}`, {
     headers: {
-        Authorization: `Bearer ${token}`
-      }
-    })
+      Authorization: `Bearer ${token}`
+    }
+  })
 
-  return response
+  return { status: response.status, data: await response.json() }
 }

pages/api/tracks.ts

@@ -1,5 +1,4 @@
 import type { NextApiRequest, NextApiResponse } from 'next'
-import axios from 'axios'
 
 export default async function handler(req: NextApiRequest, res: NextApiResponse) {
   const body = req.body
@@ -18,15 +17,16 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse)
 }
 
 async function getTracks(token: string, id: string, groups: string = 'album,single') {
-  const response = await axios.get(`https://api.spotify.com/v1/artists/${id}/albums`, {
-    params: {
-        'include_groups': groups,
-        'limit': 50,
-    },
+  const params = new URLSearchParams({
+    'include_groups': groups,
+    'limit': '50',
+  })
+
+  const response = await fetch(`https://api.spotify.com/v1/artists/${id}/albums?${params}`, {
     headers: {
-        Authorization: `Bearer ${token}`
-      }
-    })
+      Authorization: `Bearer ${token}`
+    }
+  })
 
-  return response
+  return { status: response.status, data: await response.json() }
 }