react-native cookies and cache issue?

Question

I'm working on the app in react native and when I get a response from API It's not returning correct headers because of app cookies and cache as it stores the previous ones. when I clear the app cache by using this command in the project folder in terminal

react-native start --reset-cache

then it works fine.

Here is the updated code

export const logInAction =
  (email: any, password: any, successCall: any, failedCall: any) =>
  async (dispatch: (arg0: {type: any; payload: any}) => void) => {
    console.log('Data in Login Action ', email, password);
    try {
      await axios
        .post(`${config.REACT_APP_API_BASE_URL}/auth/sign_in`, {
          email: email,
          password: password,
          headers: {
            'Cache-Control': 'no-cache, no-store, must-revalidate',
            Pragma: 'no-cache',
            Expires: 0,
          },
        })
        .then(response => {
          console.log('headers received in login api ==>', response.headers);
          try {
            const newHeaders: any = {
              'access-token': '',
              client: '',
              expiry: '',
              'token-type': '',
              uid: '',
              'Access-Control-Allow-Origin': '*',
              Accept: 'application/json',
              'Content-Type': 'application/json',
              'Accept-Language': 'en/US',
            };
            Object.keys(response.headers).forEach(function (
              key: any,
              index: any,
            ) {
              switch (key) {
                case 'access-token':
                case 'client':
                case 'expiry':
                case 'token-type':
                case 'uid':
                  newHeaders[key] = response.headers[key];
                  break;
                default:
                  break;
              }
            });

            AsyncStorage.setItem('headers', JSON.stringify(newHeaders));
            if (response.data?.data?.user?.first_name) {
              response.data.data.user.first_name =
                response.data.data.user.first_name?.trim();
            }
            AsyncStorage.setItem(
              'user',
              JSON.stringify(response?.data?.data?.user),
            );
            AsyncStorage.setItem(
              'company',
              JSON.stringify(response?.data?.data?.company),
            );
          } catch (e) {
            console.log('error', e);
          }
          successCall && successCall();
          console.log('Response from Login Api', response);
          dispatch({
            type: SIGNIN,
            payload: response?.data,
          });
        });
      console.log('Login complete');
      RootNavigation.navigate('Menu');
      showToast('Login Successful', 2000);
    } catch (error) {
      console.log('respose check ==> ', error);
      failedCall && failedCall();
      showToast('Login Failed, Invalid Credentials', 3000);
    }
  };

Now the problem is, I cannot clear cache again and again. Any Suggestions?? If need more detail about the query, please ask me in the comment section.

user_17820485 · Answer

answer is here. Try if it usable for your case.

You can reset Cache-Control like this:

return fetch(url, {
  headers: {
    'Cache-Control': 'no-cache, no-store, must-revalidate',
    'Pragma': 'no-cache',
    'Expires': 0
  }
}).then(function (res) {
  return res.json();
}).catch(function(error) {
  console.warn('Request Failed: ', error);
});

react-native cookies and cache issue?

1 Answers