Component doesn't re-render on follow up request after token refresh

[Sujeet Agrahari]

This issue is linked to this issue

I did follow what you suggested, passing a new instance and using makeUseAxios. I also tried using configure().

1. Using configure()

import Axios from 'axios;

import useAxios, { configure} from 'axios-hooks';

const axios = Axios.create({
  baseURL: 'http://localhost:3000/api/v1',
});

configure({ axios, cache: false })

2. Using makeUseAxios()

import { makeUseAxios } from 'axios-hooks';
import Axios from 'axios';

import LocalStorageService from './services/local-storage.service';
import refreshToken from './refresh-token';

const axios = Axios.create({
  baseURL: 'http://localhost:3000/api/v1',
});

axios.defaults.transformResponse = [
  (responseData) => {
    const { data, error } = JSON.parse(responseData);
    return error || data;
  },
];

// request interceptor to add token to request headers
axios.interceptors.request.use(
  async (config) => {
    const token = LocalStorageService.getAccessToken();
    if (token) {
      config.headers = {
        authorization: token,
      };
    }
    return config;
  },
  (error) => Promise.reject(error)
);

// response interceptor intercepting 401 responses, refreshing token and retrying the request
axios.interceptors.response.use(
  (response) => response,
  (error) => {
    const { config } = error;
    if (error.response?.status === 401 && !config._retry) {
      config._retry = true;
      refreshToken(LocalStorageService.getRefreshToken())
        .then((res) => {
          const { accessToken } = res.data.data;
          LocalStorageService.setAccessToken(accessToken);
          return axios(config);
        })
        .catch((err) => {
          if (err.response.status === 401) {
            LocalStorageService.setUser(null);
            window.location.href = '/login';
          }
          return Promise.reject(err);
        });
    }
    return Promise.reject(error);
  }
);

export default makeUseAxios({
  axios,
});

It still doesn't update the courses state and still, the issue is the same: Once the refresh token API fails and gets courses fired after getting the new access token component does not re-render.

[Simone Busoli]

I'm warning you for the last time and then you'll be blocked from any other interactions on this repository. Provide a reproducible example or stop opening issues.

[Sujeet Agrahari]

Sorry, @simoneb. I have shared the whole repo link in the previous issue. I will share it here again.

https://github.com/sujeet-agrahari/nitt-frontend/tree/react-hooks

Also, I am not the only one facing the issue. Check the comment on the post
https://stackoverflow.com/questions/72420926/component-doesnt-re-render-on-follow-up-request-after-token-refresh?noredirect=1#comment127956674_72420926

Also, please don't block me. If you close this issue, I will not open any issues in future again.

[Simone Busoli]

This is not a reproducible example, this is your whole application and I'm not your personal debugger. Narrow down the issue to a minimal reproducible example which runs on codesanbox and I will have a look, but most likely you'll figure out you're doing something wrong, which is why you shouldn't expect me to figure it out for you. The example in the docs works, meaning that you are doing something wrong and you should figure it out.

https://codesandbox.io/s/axios-hooks-authentication-zyeyh

[Sujeet Agrahari]

The problem was with my code; It got fixed. It turned out I was not returning the promise.

Thanks for the awesome package ❤️

axios.interceptors.response.use(
 (response) => response,
 (error) => {
   const { config } = error;
   if (error.response?.status === 401 && !config._retry) {
     config._retry = true;
     return refreshToken(LocalStorageService.getRefreshToken()) // this line
       .then((res) => {
         const { accessToken } = res.data.data;
         LocalStorageService.setAccessToken(accessToken);
         return axios(config);
       })
       .catch((err) => {
         if (err.response.status === 401) {
           LocalStorageService.setUser(null);
           window.location.href = '/login';
         }
         return Promise.reject(err);
       });
   }
   return Promise.reject(error);
 }
);