CODEWITHSUNDEEP
reactjsvariablesglobal
James Lock
James Lock

Reputation: 185

How do I create a globally accessible variable in React JS

In my react JS app, I make many API calls,

Rather than having to specify: const BASE_URL = 'https://apiurlgoeshere.com/'

on every page, I'd rather have BASE_URL accessible throughout the entire application, so I can just do BASE_URL + API_CALL for example

Upvotes: 5

Views: 4902

Answers (4)

James Lock
James Lock

Reputation: 185

Here is a code example for a solution: 

function apiCall (method, path, data) {
    let url = "https://urltoyourapis.com/";
    return new Promise((resolve, reject) => {
        return Axios[method](url, {headers}, data).then(res => {
            return resolve(res);
        }).catch(err => {
            return reject(err);
        })
    })
}

Now, whenever you want to make an API call you'd import this function into the file where you would like to make the API call and do the following: 

apiCall("get", "account-info")

This will then make an API call to the endpoint "account-info" to get the information, you can either await and set the result to a variable or use .then .catch to handle the response.

Upvotes: 0

James Lock
James Lock

Reputation: 185

I know it's been a while since I created this post - just wanted to go through what I've learnt really.

It's a great way to set a global config for Axios. I typically create a folder and create an api.js file within it which I use to make all of my API calls, this is great as it means you only have to specify headers / base URL / credentials etc once.

Upvotes: 0

sumana
sumana

Reputation: 21

If webpack is being used for code bundle, DefinePlugin can be used. 

new webpack.DefinePlugin({
    'BASE_URL': JSON.stringify('https://apiurlgoeshere.com/')
});

For gulp build, gulp-replace can be used.

.pipe(replace('BASE_URL', 'https://apiurlgoeshere.com/'))

Upvotes: 1

Agney
Agney

Reputation: 19194

If this is just adding BASE_URL, then this can be achieved by declaring it inside a constants.js file and exporting it from there. But then, that makes us do BASE_URL + "something" each time we make a network request which isn't really ideal either. Also there might be some scenarios where other configuration have to be shared, like say, a common header that has to be added to all the requests.

To solve this, most request libraries have in-build solutions. If we are choosing axios as the most popular one, we can create a instance like: 

const instance = axios.create({
  baseURL: 'https://some-domain.com/api/',
  timeout: 1000,
  headers: {'X-Custom-Header': 'foobar'}
});
export default instance;

and import this everywhere the axios is going to be used like:

import axios from "./axios-instance";

assuming axios-instance.js is the file where the instance is created. Now you can skip adding the BASE_URL to every request as it is already provided in the instance.

Upvotes: 9

Related Questions