T
TanStack•3y ago
absent-sapphire

IsLoading not updating when using axios with interceptor

Hey guys, I'm using axios with interceptor, to rerun the request after getting access token. Here is my code: 
import axios from "axios";
import createAuthRefreshInterceptor from "axios-auth-refresh";

const axiosInstance = axios.create({
  baseURL: process.env.NEXT_PUBLIC_API_URI,
  withCredentials: true,
});

createAuthRefreshInterceptor(axiosInstance, (failedRequest) =>
  axiosInstance.get("/auth/access-token").then((res) => {
    return Promise.resolve();
  })
);

export const getData = async (url: string, withCredentials?: boolean) => {
  return await axiosInstance.get(process.env.NEXT_PUBLIC_API_URI + url, {
    withCredentials: withCredentials ? true : false,
  });
};
import axios from "axios";
import createAuthRefreshInterceptor from "axios-auth-refresh";

const axiosInstance = axios.create({
  baseURL: process.env.NEXT_PUBLIC_API_URI,
  withCredentials: true,
});

createAuthRefreshInterceptor(axiosInstance, (failedRequest) =>
  axiosInstance.get("/auth/access-token").then((res) => {
    return Promise.resolve();
  })
);

export const getData = async (url: string, withCredentials?: boolean) => {
  return await axiosInstance.get(process.env.NEXT_PUBLIC_API_URI + url, {
    withCredentials: withCredentials ? true : false,
  });
};
And this is how i use it using react-query 
  const { data: userData, isLoading } = useQuery({
    queryKey: ["balance"],
    queryFn: () => getData("/users/me", true),
  });
  const { data: userData, isLoading } = useQuery({
    queryKey: ["balance"],
    queryFn: () => getData("/users/me", true),
  });
When request fails ( even after rerunning it after trying to get access-token ) , isLoading does not change to false, it forever stays on true. Am I doing something wrong here?
2 Replies
absent-sapphire
absent-sapphireOP•3y ago
Is there any other way to do this? I need to get new access token if first request got 401 error.
sensitive-blue
sensitive-blue•3y ago
This might be of use: https://github.com/Flyrell/axios-auth-refresh/issues/258#issuecomment-1780345545
GitHub
Problem using axios-auth-refresh with react-query · Issue #258 · Fl...
So if the Function that calls the refresh authorization fails, React-query isLoading will always be true. Here is my code: import axios from "axios"; import createAuthRefreshInterceptor f...

Did you find this page helpful?