Using queryCache and mutationCache instead of axios interceptor

[dexterarmy]

So i needed to implement a functionality where if the token is expired then i will make a refresh token call and after that again make the same api call which resulted in expired token error.
So for this instead of using axios intercepter i used queryCache and mutationCache from react-query.

CODE ->

queryCache: new QueryCache({
  onError: (error, query) => {

    if (error instanceof AxiosError) {
      if (error?.response?.status && error?.response?.status == 401 && error?.response?.data?.status?.statusCode == *) {

        getRefreshToken('')
          .then((res) => {

            updateSessionToken(res);
              axios({ ...error?.config });

            }


          })
      }

    }



  }

}),

Is this the correct way to do this functionality , or i should use axios inspector instead of queryCache and mutationCache ??

[TkDodo]

I would rather use an interceptor on the API layer for that.

[dexterarmy]

ok thanks, i am going to use axios interceptor for this functionality.
Is it because queryCache and mutationCache method is unreliable for this like there can be race conditions or token getting refreshed again and again if multiple call fails ? am i correct ?
Are more reasons there to use interceptor instead of queryCache and mutationCache ?