Using one Axios object for the whole application using Context - reactjs

Question

I have an application with several levels of children. In this example I have declared a Context.js and a ContextDBConnector.js , they are being used in this way:
Context.js
import React from 'react';
export const ContextDB = React.createContext();
ContextDBConnector.js
import React, {Component} from 'react'
import {ContextDB} from './Context'
class ContextDBConnector extends Component {
render(){
return (
<ContextDB.Provider value = {{
callAPI() {
const axios = require('axios').default
axios.get('http://localhost:5000/person_by_first_name', {
params: {
firstname: "Marcus"
}
})
.then(function (response) {
console.log("Printing out response")
console.log(response);
})
.catch(function (error) {
console.log(error);
})
.then(function () {
// always executed
})
}
}}>
{this.props.children}
</ContextDB.Provider>
)
}
}
export default ContextDBConnector;
index.js
import React from 'react';
import ReactDOM from 'react-dom';
import * as serviceWorker from './serviceWorker';
import App from './components/App.js';
import {navData} from './js/const';
import {footerData} from './js/const';
import ContextDBConnector from './context/ContextDBConnector'
ReactDOM.render(
<React.StrictMode>
<ContextDBConnector>
<App key = "0" navData = {navData} footData = {footerData} />
</ContextDBConnector>
</React.StrictMode>,
document.getElementById('root')
);
serviceWorker.unregister();
So far so good. I can now use the context to call context.callAPI() from inside a component far away down the line of children, in this way:
Image.js
import React, {Component} from 'react'
import {ContextDB} from '../context/Context'
class Image extends Component {
static contextType = ContextDB
componentDidMount(){
this.context.callAPI()
}
render(){
const obj = this.props.obj
return (
<div className={obj.classCont}>
<img className={obj.class} src={obj.url} alt='' />
</div>
);
}
}
export default Image;
This works well and looking at the javascript console in Chrome, ContextDBConnector.js is printing out what it should:
Printing out response
ContextDBConnector.js:23 {data: Array(1), status: 200, statusText: "OK", headers: {…}, config: {…}, …}
Now I'm having a hard time getting the response object from component ContextDbConnector to component Image so that it can use the data it needs. I tried something like this and it obviously didn't work:
Image.js
import React, {Component} from 'react'
import {ContextDB} from '../context/Context'
class Image extends Component {
static contextType = ContextDB
componentDidMount(){
this.context.callAPI().then(response => {
console.log("Person has been returned")
});
}
render(){
const obj = this.props.obj
return (
<div className={obj.classCont}>
<img className={obj.class} src={obj.url} alt='' />
</div>
);
}
}
export default Image;
Could you help me figure out the part where Image gets the data it needs from ContextDBConnector ?
Full disclosure: I only started learning React, Express, Mysql, Axios and Node.js like a month ago, so I apologize in advance if I'm misunderstanding some concepts here and my code logic is not very strong :D This is my first try with Context and I'm a bit stuck with this part.
Just so it's clear, what I'm trying to accomplish here is to have only one axios object for the whole app, so that the different parts can access it and get to the different routers in the Express server (backend) instead of creating axios instances all over the place.
If the way I'm trying to accomplish this is not a good one, could you show me a better way?
Otherwise, could you help me get the data from ContextDBConnector to Image in a way that Image waits for the actual object to be received before doing anything else?
Thanks and much appreciated!

Answer 1

as it seems you should have changed the callAPI 'cause it does not return a Promise Object so you could use .then() and .catch()