Axios interceptor

Author: nejcrogelsek

db.json

@@ -49,6 +49,11 @@
       "name": "hello",
       "alterEgo": "world",
       "id": 10
+    },
+    {
+      "name": "Updated",
+      "alterEgo": "axios interceptors",
+      "id": 11
     }
   ],
   "friends": [

src/api/Api.ts

@@ -0,0 +1,15 @@
+import axios from 'axios'
+
+const client = axios.create({ baseURL: 'http://localhost:4000' })
+
+export const request = ({ ...options }) => {
+  client.defaults.headers.common.Authorization = 'Bearer token'
+
+  const onSuccess = (response: any) => response
+  const onError = (error: Error) => {
+    // optionaly catch errors and add additional logging here
+    return error
+  }
+
+  return client(options).then(onSuccess).catch(onError)
+}

src/lib/hooks/useSuperHeroesData.tsx

@@ -1,18 +1,18 @@
 import { useQuery, useMutation, useQueryClient } from 'react-query'
 import axios from 'axios'
-import { SuperHero } from 'interfaces'
+import { request } from 'api/Api'
 
 interface Props {
   onSuccess: (response: any) => void
   onError: (error: Error) => void
 }
 
 const fetchSuperHeroes = () => {
-  return axios.get('http://localhost:4000/superheroes')
+  return request({ url: '/superheroes' })
 }
 
 const addSuperHero = (hero: { name: string; alterEgo: string }) => {
-  return axios.post('http://localhost:4000/superheroes', hero)
+  return request({ url: '/superheroes', method: 'post', data: hero })
 }
 
 export const useSuperHeroesData = ({ onSuccess, onError }: Props) => {