Axios is caching somehow my get user request react native

Question

I'm using Axios ("axios": "^0.19.0") to do a GET request to my backend which works as I already tested it by sending the same token through Postman macOS app, and returns the correct user object.

But from my React Native app, whenever I do the get request and pass the same bearer token, I get the last user I logged in as a response.

This is how I'm sending the request:

getUserByToken: function(token) {
        var headers = [
            { key: 'Authorization', value: 'Bearer ' + token},
            { key: 'Content-Type', value: 'application/x-www-form-urlencoded'},
            { key: 'Cache-Control', value: 'no-cache'}
        ];

        setHeaders('get', headers);
        return AxiosInstance.get('/user');
    },

The setHeaders method is used to set the headers to the request, I reset all http methods to an empty object and set the proper key-values for the following request.

export const setHeaders = (type, props) => {
    AxiosInstance.interceptors.request.use(config => {
        config.headers[type] = {};

        props.forEach((prop) => {
            config.headers[type][prop.key] = prop.value;
        });
        return config;
    });
}

As you can see, I even attempted to use Cache-Control: no-cache but still, keeps caching for no reason.

This is how I'm calling this function from my AuthView.js

 UserServices.getUserByToken(loginData.access_token)
        .then(userResponse => {
   // here userResponse is the previous user! 
   // even though i'm passing the correct token
            this.props.onSetUserInfo(userResponse.data);
            this.setState({
                loading: false
            }, () => {
                startMainTabs();
            });
        });

Why could this be happening?

Thanks.

Answer 1

The issue appears to be that the request is being sent before the header has actually been set. The reason for that is because setHeader internally relies on a callback to fire before actually setting the header, and theres no hook to allow the calling code to wait for this code to finish before firing off the request.

It's fixable though, make setHeader return a Promise and resolve with the config object

export const setHeaders = (type, props) => {
  return new Promise(resolve => {
    AxiosInstance.interceptors.request.use(config => {
      config.headers[type] = {};
      props.forEach((prop) => {
        config.headers[type][prop.key] = prop.value;
      });
      return resolve(config);
    });
  });
}

Then in getUserByToken, await the header

getUserByToken: async function (token) {
  var headers = [
    { key: 'Authorization', value: 'Bearer ' + token},
    { key: 'Content-Type', value: 'application/x-www-form-urlencoded'},
    { key: 'Cache-Control', value: 'no-cache'}
  ];

  await setHeaders('get', headers);
  return AxiosInstance.get('/user');
}

Answer 2

Please check with below code i have already tested same on my project and it's working fine.

getUserByToken: function(token) {
        var headers = [
            { key: 'Authorization', value: 'Bearer ' + token},
            { key: 'Content-Type', value: 'application/x-www-form-urlencoded'},
            { key: 'Cache-Control', value: 'no-store'}
        ];

        setHeaders('get', headers);
        return AxiosInstance.get('/user');
    },

Use same above code it will solved your problem.