PHPFixing
  • Privacy Policy
  • TOS
  • Ask Question
  • Contact Us
  • Home
  • PHP
  • Programming
  • SQL Injection
  • Web3.0

Wednesday, October 12, 2022

[FIXED] How to share data from Provider to function react

 October 12, 2022     axios, javascript, npm, reactjs, typescript     No comments   

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)
  • Share This:  
  •  Facebook
  •  Twitter
  •  Stumble
  •  Digg
Newer Post Older Post Home

0 Comments:

Post a Comment

Note: Only a member of this blog may post a comment.

Total Pageviews

Featured Post

Why Learn PHP Programming

Why Learn PHP Programming A widely-used open source scripting language PHP is one of the most popular programming languages in the world. It...

Subscribe To

Posts
Atom
Posts
Comments
Atom
Comments

Copyright © PHPFixing