Add cookie to axios interceptor request handler - reactjs

Question

I'm configuring Axios to always make a request with header Authorization with a value which is in user cookie.
My code:
import axios, { AxiosRequestConfig, AxiosResponse} from 'axios';
import {useCookies} from "react-cookie";
const [cookies] = useCookies(["myToken"]);
const customAxios = axios.create({
baseURL: 'http://localhost/storeApi/',
timeout: 10000,
});
const requestHandler = (request: AxiosRequestConfig) => {
request.headers.Authorization = `Bearer ${cookies.jwtToken}`;
return request;
};
customAxios.interceptors.request.use(
(request) => requestHandler(request)
);
export default customAxios;
But I have an error:
Line 3:19: React Hook "useCookies" cannot be called at the top level. React Hooks must be called in a React function component or a custom React Hook function
How to avoid that?

Answer 1

Since it is a React Hook, you can't use useCookies outside a React component function: to access a cookie, you'll need to read it from document.cookie, or install another package, like cookie.
If you're only using the one cookie, you can probably get away by using w3School's cookie example, (which I've turned into an npm package):
function getCookie(cname) {
let name = cname + "=";
let decodedCookie = decodeURIComponent(document.cookie);
let ca = decodedCookie.split(';');
for(let i = 0; i <ca.length; i++) {
let c = ca[i];
while (c.charAt(0) == ' ') {
c = c.substring(1);
}
if (c.indexOf(name) == 0) {
return c.substring(name.length, c.length);
}
}
return "";
}
Then just do:
const cookie: string = getCookie('myToken');