React: axios useInterceptor hook

readme.md

Usage

import React from 'react'
import { useAuthUser } from '~/src/contexts/AuthUser'
import { useInterceptor } from './useInterceptor'

/**
 * Setup axios interceptors to work with auth
 */
const AxiosProvider: React.FC = ({ children }) => {
  const { token, logout } = useAuthUser()

  useInterceptor((config) => {
    if (token) {
      config.headers['Authorization'] = `Bearer ${token}`
    }

    return config
  })

  useInterceptor(null, (err) => {
    if (err.response.status === 401 && !err.config.url.includes('/oauth/token')) {
      logout()
    }

    return Promise.reject(err)
  })

  return <>{children}</>
}

export { AxiosProvider }

useInterceptor.ts

import { useEffect } from 'react'
import { useLatestValue } from '~/src/hooks'
import { AxiosRequestConfig, AxiosError } from 'axios'
import { axios } from './axios'

type RequestInterceptor = (config: AxiosRequestConfig) => AxiosRequestConfig

type ResponseInterceptor = (error: AxiosError) => Promise<AxiosError>

const useInterceptor = (req?: RequestInterceptor, res?: ResponseInterceptor) => {
  const reqRef = useLatestValue(req)

  const resRef = useLatestValue(res)

  useEffect(() => {
    const requestEject = axios.interceptors.request.use((config: AxiosRequestConfig) => {
      return reqRef.current ? reqRef.current(config) : config
    })

    const responseEject = axios.interceptors.response.use(null, (error: AxiosError) => {
      return resRef.current ? resRef.current.(error) : Promise.reject(error)
    })

    return () => {
      axios.interceptors.request.eject(requestEject)

      axios.interceptors.response.eject(responseEject)
    }
  }, [])
}

export { useInterceptor }