axios interceptor blocking api calls in redux saga-CodePudding

I have a react native project in which I'm calling some API's using redux-saga mechanism. Now when I added response interceptor for axios my saga api's are not working anymore. Does any knows how I can fix this?

here is the code for my axios instance class and response interceptor

const getLoggedInUser = async () => {
    const savedUser = JSON.parse(
        await getDataFromAsyncStorage(APP_CONSTANTS.SAVED_USER)
    )
    if (savedUser?.user_id != null) {
        return savedUser
    }
    return null
}

const baseapi = axios.create({
    baseURL: APP_CONSTANTS.BASE_URL,
    headers: {},
})

baseapi.interceptors.request.use(
    async (config) => {
        const token = await getLoggedInUser()
        const userId = token?.user_id
        const authToken = token?.token

        if (token) {
            baseapi.defaults.headers.common['userId'] = token
            baseapi.defaults.headers.common['token'] = authToken
        }
        return config
    },
    (error) => {
        return Promise.reject(error)
    }
)

// Response interceptor for API calls
baseapi.interceptors.response.use(
    (response) => {
        return response
    },
    async function (error) {
        const originalRequest = error.config
        if (error.response.status === 403 /* && !originalRequest._retry */) {
            return baseapi(originalRequest)
        }
        return Promise.reject(error)
    }
)

This is my saga class code and it fails directly when I add a response interceptor

function* getTopicList(action) {
    try {
        yield put({type: ACTION_TYPES.START_TOPIC_LIST})
        const {payload} = action
        const res = yield call(getAllTopicsOfBatch, payload)
        if (res?.status == APP_CONSTANTS.SUCCESS_STATUS) {
            yield put({
                type: ACTION_TYPES.SET_TOPIC_LIST,
                payload: {data: res?.data?.topics},
            })
        } else {
            alert('OOPS Something went wrong! Please try again')
            yield put({
                type: ACTION_TYPES.ERROR_TOPIC_LIST,
                payload: 'Something Went Wrong Please Try Again',
            })
        }
    } catch (error) {
        console.log('RESPONES error', error)
        alert('OOPS Something went wrong! Please try again')
        yield put({
            type: ACTION_TYPES.ERROR_TOPIC_LIST,
            payload: 'Something Went Wrong Please Try Again',
        })
    }
}

CodePudding user response：

The code looks mostly fine, the only two things I found that are likely causing problems are:

In the request interceptors you are likely wrongly passing the whole token as userId instead of userId

baseapi.defaults.headers.common['userId'] = token // 'token' should be 'userId'

In the response interceptors error handler, you are not guaranteed to have 'response' property on error.

if (error.response.status === 403) // use error?.response

If neither of these things will fix your problem my guess is you have a problem in your endpoint and so you should examine the response errors you get to guide you.