Should queryFn(fetcher) be independent of React life cycle?

I'm working on a Next.js 14 project (App Router) and need to set up a centralized axios instance as queryFn(fetcher) in order to use react-query, which should integrates seamlessly with:

1. useSession from next-auth
2. i18n from next-intl:
3. router from next/router
4. A React modal component

I have come up with two approaches:

1. A function returned from a custom React hook

const createAxiosInstance = ({ t, router, session }): AxiosInstance => {  
  const instance = axios.create({ baseURL: "/api" });  

  instance.interceptors.request.use((config) => {  
    const token = session.data?.token;  
    if (token) config.headers["Authorization"] = `Bearer ${token}`;  
    return config;  
  }, (error) => Promise.reject(error));  

  instance.interceptors.response.use((response) => response, (error) => {  
    if (error.response?.status === 401) router.push("/login");  
    return Promise.reject(error);  
  });  

  return instance;  
};  

const useRequest = () => {  
  const t = useTranslations("errorMessages");  
  const session = useSession();  
  const router = useRouter();  
  const instance = useMemo(() => createAxiosInstance({ t, session, router }), [t, session, router]);
 
  return instance;
};

const createAxiosInstance = ({ t, router, session }): AxiosInstance => {  
  const instance = axios.create({ baseURL: "/api" });  

  instance.interceptors.request.use((config) => {  
    const token = session.data?.token;  
    if (token) config.headers["Authorization"] = `Bearer ${token}`;  
    return config;  
  }, (error) => Promise.reject(error));  

  instance.interceptors.response.use((response) => response, (error) => {  
    if (error.response?.status === 401) router.push("/login");  
    return Promise.reject(error);  
  });  

  return instance;  
};  

const useRequest = () => {  
  const t = useTranslations("errorMessages");  
  const session = useSession();  
  const router = useRouter();  
  const instance = useMemo(() => createAxiosInstance({ t, session, router }), [t, session, router]);
 
  return instance;
};

const createAxiosInstance = ({ t, router, session }): AxiosInstance => {  
  const instance = axios.create({ baseURL: "/api" });  

  instance.interceptors.request.use((config) => {  
    const token = session.data?.token;  
    if (token) config.headers["Authorization"] = `Bearer ${token}`;  
    return config;  
  }, (error) => Promise.reject(error));  

  instance.interceptors.response.use((response) => response, (error) => {  
    if (error.response?.status === 401) router.push("/login");  
    return Promise.reject(error);  
  });  

  return instance;  
};  

const useRequest = () => {  
  const t = useTranslations("errorMessages");  
  const session = useSession();  
  const router = useRouter();  
  const instance = useMemo(() => createAxiosInstance({ t, session, router }), [t, session, router]);
 
  return instance;
};

const createAxiosInstance = ({ t, router, session }): AxiosInstance => {  
  const instance = axios.create({ baseURL: "/api" });  

  instance.interceptors.request.use((config) => {  
    const token = session.data?.token;  
    if (token) config.headers["Authorization"] = `Bearer ${token}`;  
    return config;  
  }, (error) => Promise.reject(error));  

  instance.interceptors.response.use((response) => response, (error) => {  
    if (error.response?.status === 401) router.push("/login");  
    return Promise.reject(error);  
  });  

  return instance;  
};  

const useRequest = () => {  
  const t = useTranslations("errorMessages");  
  const session = useSession();  
  const router = useRouter();  
  const instance = useMemo(() => createAxiosInstance({ t, session, router }), [t, session, router]);
 
  return instance;
};

2. A standalone, React-independent function

import axios from "axios";  
const axiosInstance = axios.create({ baseURL: "/api" });  

axiosInstance.interceptors.request.use(async (config) => {  
  const session = await getSession();  
  const token = session?.data?.token;  
  if (token) config.headers["Authorization"] = `Bearer ${token}`;  
  return config;  
}, (error) => Promise.reject(error));  

axiosInstance.interceptors.response.use((response) => response, (error) => {  
  if (error.response?.status === 401) window.location.href = "/login";  
  return Promise.reject(error);  
});  

export default axiosInstance;

import axios from "axios";  
const axiosInstance = axios.create({ baseURL: "/api" });  

axiosInstance.interceptors.request.use(async (config) => {  
  const session = await getSession();  
  const token = session?.data?.token;  
  if (token) config.headers["Authorization"] = `Bearer ${token}`;  
  return config;  
}, (error) => Promise.reject(error));  

axiosInstance.interceptors.response.use((response) => response, (error) => {  
  if (error.response?.status === 401) window.location.href = "/login";  
  return Promise.reject(error);  
});  

export default axiosInstance;

import axios from "axios";  
const axiosInstance = axios.create({ baseURL: "/api" });  

axiosInstance.interceptors.request.use(async (config) => {  
  const session = await getSession();  
  const token = session?.data?.token;  
  if (token) config.headers["Authorization"] = `Bearer ${token}`;  
  return config;  
}, (error) => Promise.reject(error));  

axiosInstance.interceptors.response.use((response) => response, (error) => {  
  if (error.response?.status === 401) window.location.href = "/login";  
  return Promise.reject(error);  
});  

export default axiosInstance;

import axios from "axios";  
const axiosInstance = axios.create({ baseURL: "/api" });  

axiosInstance.interceptors.request.use(async (config) => {  
  const session = await getSession();  
  const token = session?.data?.token;  
  if (token) config.headers["Authorization"] = `Bearer ${token}`;  
  return config;  
}, (error) => Promise.reject(error));  

axiosInstance.interceptors.response.use((response) => response, (error) => {  
  if (error.response?.status === 401) window.location.href = "/login";  
  return Promise.reject(error);  
});  

export default axiosInstance;

What do you guys think? What's the right way to go about it?

Should queryFn(fetcher) be independent of React life cycle?

Similar Threads

Similar Threads

Similar Threads