Issue
I've created an NPM library that shares multiple util functions. One of which is to call our endpoints. I've included Axios in my NPM library, but I'm stuck being able to set the Axios.create
instance globally.
I initially thought I could create a Provider
and set a context
, however, as my API function isn't within a hook, I cannot access the context. This is my first NPM library so unfamiliar with what is best practice.
// Provider.ts
export default function Provider({ children, config }: ProviderProps) {
window.config = config;
return (
<ContextConfig.Provider value={config}>{children}</ContextConfig.Provider>
);
}
^ Above, I tried using context API, setting a global variable, etc.
// api.ts
import Axios, { AxiosInstance, AxiosPromise, Cancel } from 'axios';
const axiosInstance = Axios.create(window.config);
const api = (axios: AxiosInstance) => ({
get: <T>(url: string, config: ApiRequestConfig = {}) =>
withLogger<T>(withAbort<T>(axios.get)(url, config)),
});
export default api(axiosInstance)
^ Above, tried to use the global variable window.config
, however, it is undefined
. Also tried converting the export to a hook to allow reading the context, however, getting errors around unsafe usage of hooks.
// index.ts
import api from './api';
import Provider from './Provider';
export { api, Provider };
The only way I can think about handling this now is using Local Storage, very much open to advise.
Cheers
Solution
You absolutely should be able to bind your variable to the window
.
What I think has actually happened is that api.ts
has been initiated before you set window.config
, hence why it is undefined
. If you converted api.ts
default export to a function you'll be able to get the value of window.config
on each call. I.E;
// api.ts
import Axios, { AxiosInstance, AxiosPromise, Cancel } from 'axios';
const api = (axios: AxiosInstance) => ({
get: <T>(url: string, config: ApiRequestConfig = {}) =>
withLogger<T>(withAbort<T>(axios.get)(url, config)),
});
export default () => {
const axiosInstance = Axios.create(window.config);
return api(axiosInstance)
}
This may be a little less performant as you'll be calling Axios.create
on each call, however, it shouldn't be too impactful.
Answered By - Mark Answer Checked By - Robin (PHPFixing Admin)
0 Comments:
Post a Comment
Note: Only a member of this blog may post a comment.