DEV Community

React hooks in Axios interceptors

Arian Hamdi on March 29, 2022

As you know, you can not use React hooks in a place other than React component or custom hooks. In this article, you will learn how to use hooks i...

Read full post

Yoki • Jun 27 '22

useEffect is asynchronous to children's effect, so request call might be at the same time with interceptor setup and even sooner, in that case the interceptor might not work as we expected.
So the solution is set a state as false initially, and set it to true after interceptor setup complete, then we return the children

function AxiosIntercetor({children}) {
  const [isSet, setIsSet] = useState(false)

  useEffect(()=>{
    ...
    setIsSet(true)
  })

  return isSet && children
}

Galih indra • Feb 8 '23

Damn you save my life, I'd been searching this issue for a full day. You are my hero

Edison Devadoss • Nov 15 '23 • Edited

import axios, {
  AxiosError,
  AxiosRequestConfig,
  AxiosRequestHeaders,
  AxiosResponse
} from 'axios';
import environment from '../config/environment';
import { toast } from 'react-toastify';
import 'react-toastify/dist/ReactToastify.min.css';

import { useSelector, useDispatch } from 'react-redux';
import { useEffect, useState } from 'react';
import { useNavigate } from 'react-router-dom';

const toastId: string = 'interceptor';

interface ErrorData {
  errors: string[];
}

const http = axios.create({
  baseURL: environment.baseURL
});

const parseErrorMessage = (errResponse: AxiosResponse<ErrorData>): string => {
  console.log('errResoponse', errResponse);
  return errResponse?.data ? errResponse.data?.errors[0] : '';
};

const AxiosInstance = ({ children }: any) => {
  const navigate = useNavigate();
  const [isSet, setIsSet] = useState(false);
  const token = useSelector((state: any) => state.auth.token);

  useEffect(() => {
    // needs to fix
    const reqInterceptor = (config: any) => {
      if (token) {
        if (config.headers) {
          config.headers['Authorization'] = `Bearer ${token}`;
        }
      }
      return config;
    };

    const resInterceptor = (response: AxiosResponse) => {
      return response.data;
    };

    const errInterceptor = (error: AxiosError) => {
      const message = parseErrorMessage(
        error.response as AxiosResponse<ErrorData>
      );
      if (message) {
        error.message = message;
      }
      const currentPath = window.location.pathname;
      if (error.response?.status === 401 && !currentPath.includes('login')) {
        console.log('in side', currentPath.includes('login'));
        if (!toast.isActive(toastId)) {
          toast.error(message, { toastId });
        }
        setTimeout(() => {
          // Clear token form db
          navigate('/login');
        }, 3000);
      }
      return Promise.reject(error);
    };

    const interceptorReq = http.interceptors.request.use(
      reqInterceptor,
      (error) => {
        console.log('interceptor req error', error);
      }
    );

    const interceptorRes = http.interceptors.response.use(
      resInterceptor,
      errInterceptor
    );

    setIsSet(true);
    return () => {
      http.interceptors.request.eject(interceptorReq);
      http.interceptors.response.eject(interceptorRes);
    };
  }, [isSet, navigate, token]);
  return isSet && children;
};

export default http;
export { AxiosInstance };

This is my code. In the request interceptor is not call all the time. After login, useEffect of the next screen it makes an API call in that call it should set header from redux. But it is not working. Where is the mistake I make?

clefayomide • Aug 1 '22 • Edited

i think a better approach is to prevent the request from running on initial render. this helped me, stackoverflow

Andrianarisoa Daniel • Aug 5 '22

@iamyoki 's answer is workin for me!! And rather simpler to understand.
I indeed tried preventing the request from running on initial render as you suggested but the interceptor stayed unsed for the following renders too.

Saharak • Feb 7

You are my hero, Thank you very much

mohaymen_rafi • Jan 8 '23

yes, i got the same issue and tried your solution to return isSet && children, however typescirpt does not allow to do that.
How can I fix in that case?

Seyed Sina • Jan 14 '23 • Edited

@mohaymenrafi
try to wrap children in empty tag (i.e: or <></>) and it will work

SOONG-E • Jun 13 '22

Thanks for this post! what does "Adding an interceptor in a component is a side effect, so we get help from useEffect hook." mean? i followed this post just same. but in my case there is some problem. so i deleted 'return () => instance.interceptors.response.eject(interceptor);' <- this line.
it's works but little weird.. it runs always twice because of and first is always fail, only second one works. once i delete the then it doesn't work.. so! i deleted useEffect() then it works very well. i tried that using only without useEffect(). then interceptor runs 4 times............i don't know why, but i wanna know...

Arian Hamdi • Jun 16 '22

Thanks for the comment.
Adding an interceptor in a component is a side effect because we are manipulating something that is out of our scope of component.

you should eject previous interceptor in the clean up function and in the case you didn't, each time the useEffect is executed, one interceptor will be added to interceptors stack and this not the expected behaviour.

And be aware of new behaviour of strict mode in React 18 that execute effect twice in development mode. you can read more about that in this link Adding Reusable State to StrictMode

I created a codesandbox for the post react 18 codesandbox and a react 17 codesandbox

you can find out that the effects run twice in React 18.

SOONG-E • Jun 19 '22

Thanks to your explanation, I totally understand! Your writing saved me, and the comments helped me a lot!
I put eject code back because I thought I needed it and It works well! and also your explanation about strict mode in React 18 helped me! it much better! Thank you! 😊

Seda Hayrapetyan • Feb 16 '23

Thank you ☺️

aly3n • Jun 27 '22

Great post. Thanks for sharing😍

Gagik • Oct 8 '23

Thanks, this really helped me!
I inspired for this post and created a stand-alone hook for the interceptors here.
I had a lot of providers and I wanted to avoid that.

mohaymen_rafi • Nov 7 '22

Great post. It really helped me a lot.
One question here, why we are passing children here or what is the reason for making the Interceptor component as a provider?
Answering the question would clear my concept more on interceptors.
Thanks again.

Polly Plantar • Sep 1 '22

I didn't know how to use react to make a unified error interception jump for api before seeing your post, thank you so much, it's literally helpful ! (๑•̀ㅂ•́)و✧

Ivan • Apr 4 '23

Thank you very much!

Carlos Queiroz • Oct 26 '22

Thanks for sharing!
In my case, using with useEffect does not work. Maybe I could use with a state to control if the useEffect finished it, but I really don't understand why I need useEffect

shally-oaknorth • Jul 25 '22

Thanks for this post. I also need to write UTC for it. Can you please assist