React - API Function Does Not Have Access to Context API - reactjs

Question

While creating a reusable, importable function for making API calls I ran into the issue of not being able to access the Context API to get the auth token.
Importable Function:
import React, { useContext } from 'react';
import { Context } from '../Context';
import axios from 'axios';
const FetchDataFunction = (method, endpoint, params) => {
const [context] = useContext(Context); // the line throwing the error
const api = axios.create({
baseURL: `...`,
headers: {
'Authorization': 'Bearer 11111111111111111', //need this from API Context
'Content-Type': 'application/json',
'Accept': 'application/json'
}
});
...make api request...
}
Component trying to use the function
import React, { useContext } from 'react';
import FetchDataFunctionfrom '../../../../FetchDataFunction';
import { Context } from '../../../../Context';
const ComponentName = () => {
const [context] = useContext(Context); //works!
useEffect(() => {
async function fetchData() {
var result = await FetchDataFunction('get','endpoint', {params: {...}});
}
fetchData();
},[]);
}
Error:
Unhandled Rejection (Error): Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
See link for tips about how to debug and fix this problem.
I need access to the context api to get auth tokens as well be able to update the context api when auth tokens expire. Thus passing the context to the function is not an option. React/Redux is complex and seems like it will be replaced by Context.
Anyone have a solution to this problem?

Answer 1

context is meant for functional Components and not functions. Why not read context value and pass in your function as parameter?

Answer 2

I used a custom hook that would fetch the data.
See here: https://reactjs.org/docs/hooks-custom.html
const useApi = (method, endpoint, params) => {
const [response, setResponse] = useState(null);
const [context, setContext] = useContext(Context);
const api = axios.create({
baseURL: `URL`,
headers: {
'Authorization': 'Bearer ' + context.user.bearer,
'Content-Type': 'application/json',
'Accept': 'application/json',
}
});
useEffect(() => {
const fetchData = async () => {
//Just did a GET for this, but you can easily change this to be more universal
const res = await api.get(endpoint,params);
setResponse(res);
};
fetchData();
}, [] );
return response;
}
Then in the component file:
import { useApi } from './../../../../Utilities/Hooks/use-api.js';
/* ..... */
const something= useApi(
'get',
'something/',
{params: {foo: bar}},
);
/* .... */
useEffect( () => {
if (something){
// Do something with the API call data you get back here
}
},[something]);