QueryCache error handling and axios headers refresh

[michailozdemir]

Hello there. I have a some sort of issue in my project.
I use some public API and a token in order to use the API requests.

There's a certain possibility where the token can be outdated or stored inside the session storage, but the corresponding tool on the server side could disable it and etc. There's no refresh token request, so I have created a certain workaround inside my QueryClient provider.

...
    queryCache: new QueryCache({
      onError: async (error, query) => {
        if (error.response.data.code === 419 || error.response.data.code === 403) {
          axiosInstance.defaults.headers.common["X-Token"] = null;
          axiosInstance.defaults.headers.common["X-Company-Login"] = null;

          setStoredValue(null);
          queryClient.setQueryData(["token"], null);
          queryClient.setQueryData(["client_details"], null);

          if (!reAuthPromise) {
            reAuthPromise = axiosInstance({
              method: "post",
              url: "/public/auth/token",
              data: {
                company: companyName,
                key: companyKey,
              },
            });
          }

          try {
            const tokenRefresh = await reAuthPromise;
            reAuthPromise = null;

            axiosInstance.defaults.headers.common["X-Token"] = tokenRefresh.data.token;
            axiosInstance.defaults.headers.common["X-Company-Login"] = companyName;

            queryClient.setQueryData(["token"], tokenRefresh.data.token);

            await queryClient.invalidateQueries();

            axiosInstance.defaults.headers.common["X-Token"] = tokenRefresh.data.token;
            axiosInstance.defaults.headers.common["X-Company-Login"] = companyName;
          } catch (refreshError) {
            console.error("Failed to refresh token:", refreshError);
          }
        }
      },
    })
...

But as you see, there's a weird thing I have to do. I have to set the headers to my axios instance twice and I'll explain why.
Once a certain batch of requests are being failed, we get into this piece of a code, where we re-fetch the token. Once it is done, we set a new headers and do the invalidateQueries(). Once that's done, my application goes further and on the next request the query still has old token value. Then we again get inside this error handling part and re-fetch the token again (though we shouldnt) and so on.

If I do the redundancy with the headers setting up after invalidation - everything works as expected. Could someone provide an explanation on to fix that without a weird hacky solutions? Thank you!