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

[Sujeet Agrahari]

This is my axios-hoook.js

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

axios.defaults.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 useAxios;

This is the Course.jsx where it is being used.

const Course = () => {
const [{ data: courses = [] }, refetchCourse] = axiosHook(ApiConfig.COURSE.GET_COURSES.url);

return (
  <Datatable
    entity={entity}
    columns={courseColumns}
    rows={courses}
    deleteRow={handleDeactivate}
    viewRow={handleView}
  />
 )
}

Image

[Simone Busoli]

Please provide a repro in a codesandbox, see examples in the readme

[Sujeet Agrahari]

Here is what happening I guess. It's not possible to create a sandbox.

When an api calls fails on an expired access token, it makes a call to refresh token and gets new access token.

After getting access token a follow up call is made to previous api. I think on success of this api, axios-hook doesn't update the data of the response. That's why component doesn't re-render.

You can see in the image.

1. api call to courses fail
2. refresh token /auth/refresh-token called
3. course fetched successfully `/courses

Still table shows no data. When I refresh again, it renders rows.

[Simone Busoli]

There's an example specifically about this in the examples section of the docs https://github.com/simoneb/axios-hooks#examples

[Sujeet Agrahari]

I used the same example. Please have look at the code.
Link to file and the repo:
Course.jsx: https://github.com/sujeet-agrahari/nitt-frontend/blob/react-hooks/src/pages/course/Course.jsx
axios-hook.js https://github.com/sujeet-agrahari/nitt-frontend/blob/react-hooks/src/api/axios-hook.js

[Simone Busoli]

Your code is doing nothing because you're using axios and axios-hooks independently. If you need to tell axios-hooks to use your axios instance. See https://github.com/simoneb/axios-hooks#configure-cache-axios-defaultoptions-