dmikester1 Posts - Reactiflux

dmikester1

•Created by dmikester1 on 1/12/2024 in #react-forum

Axios helper file with interceptors, how to turn it into a context provider?

I have an Axios helper file I have created to add interceptors to my Axios instance. The problem is I am making a hook call in there: const { instance } = useMsal(); and after some research, I have learned you cannot do that outside of a functional component. So now I think from digging more into this, the only way is to make a Axios provider and wrap my app in that? Is that the best way? If so, how do I do that? Here is the code in my Axios file:

import axios from 'axios';
import { useMsal} from '@azure/msal-react';

const serverURL =
    import.meta.env.MODE === 'development'
        ? 'http://localhost'
        : import.meta.env.VITE_BASE_URL;

const middlePart = import.meta.env.VITE_API_PATH;

const axiosInstance = axios.create(
    {baseURL:serverURL + middlePart + '/'}
);

const { instance } = useMsal();  // <-- here is the culprit hook
const tokenRequest = {
    account: instance.getActiveAccount(), // This is an example - Select account based on your app's requirements
    scopes: [import.meta.env.VITE_QUOTES_API_SCOPE]
};

import axios from 'axios';
import { useMsal} from '@azure/msal-react';

const serverURL =
    import.meta.env.MODE === 'development'
        ? 'http://localhost'
        : import.meta.env.VITE_BASE_URL;

const middlePart = import.meta.env.VITE_API_PATH;

const axiosInstance = axios.create(
    {baseURL:serverURL + middlePart + '/'}
);

const { instance } = useMsal();  // <-- here is the culprit hook
const tokenRequest = {
    account: instance.getActiveAccount(), // This is an example - Select account based on your app's requirements
    scopes: [import.meta.env.VITE_QUOTES_API_SCOPE]
};

Rest of the code is pasted below.

4 replies