What's the correct approach to use axios response interceptors with react-query having retries enabled

[adityawarrier]

Hey, I'm noticing a weird issue wherein I'm trying to implement a simple refresh token flow in a react-native application making use of react-query and an axios based API client.

The query,

useQuery(QueryKeys.FetchUserDetail, UserRepository.fetchUserDetails)

The Repository which makes the API call,

const fetchUserDetails = async (): Promise<UserInfo> => { const response = await BaseClient.get(ENDPOINTS.userDetail); return response.data; };

The above API fails as an expired token is being used as the Bearer, and ,as expected react-query does the job of retrying 3 times as per my configuration,
const queryClient = new QueryClient({ defaultOptions: { queries: { refetchOnWindowFocus: false, refetchOnReconnect: false, retry: 3, }, }, });

My initial idea was to write some refreshToken based logic in the BaseClient as a response interceptor, however what I'm noticing is that even though the API is being called a total of 4 times with the back-off delay, my response interceptor only fires off once corresponding to the initial API call. The retry calls never invoke the response interceptors even though they are also failing with a 401.

I'm a bit confused as to how to go about this, as my idea is to wait for all the retries to end and then ensure that my refresh token logic runs via the interceptor.

[TkDodo]

having the refresh token based logic in an axios intercepter seems like the right way to go. We've thought about adding async retries, but we've deemed that it is mainly out of scope for react-query and should be solved on the actual network interaction layer.

Not sure why it wouldn't work tbh - can you show your behaviour in a codesandbox reproduction please?

[adityawarrier]

Well, The issue is their order of execution.

If I write an axios response interceptor then by the time my async logic for fetching a new token executes, react-query will go through it's retries.

What I'd like to do is, for the specific case of token expiry, have an async function fetch and store my new set of tokens & then have react-query go through it's retry cycle. Would this be a possibility? I guess async-retries is something in this direction. Right now react-query and axios are being disjoint for this use case.

I'm unsure of being able to setup a codesandbox due to the fact that the code is private at this stage, I apologise for not being able to do this.

[TkDodo]

The way I understand response interceptors is that they should run before the response itself is retuned to react-query, if you handle the promise correctly. That is why I can't do anything without a reproduction. You don't have to use your private code to build one, there are plenty of public apis. You can also fork one of the examples and start from there. Honestly, if you don't want to at least provide an example showing the issue, then I certainly won't invest time looking into it.

[adityawarrier]

Thanks!

[xBajci]

@adityawarrier I have a good experience with RQ + axios + axios-auth-refresh.
The way it works is completely transparent to the RQ. So if the refresh token logic is successful, RQ doesn't do any retry. Only when it fails, the error is propagated to the RQ. At this moment you probably want some 401 handler to trigger and cancel retries (if that is possible).

[adityawarrier]

Hey @xBajci , Thanks for reaching out. You are right, the issue was with promises not being handled correctly as @TkDodo mentioned in his earlier reply. I had to correct that to get this flow working. Things are working perfect now!

Thanks! Appreciate it!
Cheers!