Multiple fetch requests with setState in React and pie chart - reactjs

Question

My query was taking more than 2 mins to execute, henceforth it was getting timeout in browser. So now I have break the query and now running as a separate APIs which is helpful, but now I don't know how to handle these three requests so that it can render the data.
Note: The API's data are getting stored in the State component of react, here it is "Data".
Now I have a logic but can anyone give me a direction how to implement it.
Logic: Before storing the result of API's directly into state component, we can store it into different array, then we can iterate through this array for the use of pie chart then this data can be stored into the state component which can be used to render the pie chart in "Render" function.
Here the I am making three different API calls at the same time and storing it, here the result of the API's are directly been stored in the state component:
componentDidMount() {
Promise.all([
fetch("http://localhost:4000/api/EMEA/E_claimQuarter"),
fetch("http://localhost:4000/api/EMEA/E_claimQuarter1"),
fetch("http://localhost:4000/api/EMEA/E_claimQuarter2")
])
.then(([res1, res2, res3]) =>
Promise.all([res1.json(), res2.json(), res3.json()]))
.then(([data1, data2, data3]) =>
this.setState({
// Data: data1, data2, data3,
Data: {
labels: [
"FY19 Q1[NOV-JAN]",
"FY19 Q2[FEB-APR]",
"FY18 Q3[SEP-NOV]"
],
datasets: [
{
label: "",
data: data1,
backgroundColor: [
"rgba(255,105,145,0.6)",
"rgba(155,100,210,0.6)",
"rgb(63, 191, 191)"
]
}
]
}
})
);
}
This is how you handle the data form API and loop through it then render this data for the various charts which is in my case is Pie Chart:
ComponentDidMount() {
axios.get(`http://localhost:4000/api/APJ/A_claimQuarter`)
***************************************************************
.then(res => {
const claims = res.data;
let claim = [];
claims.forEach(element => {
claim.push(element.CNT1);
});
********************************************************************
this.setState({
Data: {
labels: ['FY19 Q1[NOV-JAN]','FY19 Q2[FEB-APR]','FY18[SEP-NOV]'],
datasets:[
{
label:'',
data: claim ,
backgroundColor:[
'rgba(255,105,145,0.6)',
'rgba(155,100,210,0.6)',
'rgb(63, 191, 191)'
]
}
]
}
});
})
}

Answer 1

I have made some modifications and now it is working fine for me, if anyone want the answer you can look at mine, it is 100% working:
constructor(props) {
super(props);
this.state = {
Data: []
};
}
componentDidMount() {
Promise.all([
fetch("http://localhost:4000/api/EMEA/E_claimQuarter"),
fetch("http://localhost:4000/api/EMEA/E_claimQuarter1"),
fetch("http://localhost:4000/api/EMEA/E_claimQuarter2")
])
.then(([res1, res2, res3]) => Promise.all([res1.json(), res2.json(), res3.json()]))
.then(([data1, data2, data3]) =>
{
console.log(typeof(data1));
const array = [...data1, ...data2, ...data3];
// const A = JSON.strigify(array);
console.log('hi');
console.log(array);
console.log(data1);
// console.log(A);
let claim = [];
array.forEach(element => {
claim.push(element.COUNT);
});
console.log(claim);
this.setState({
// Data: data1, data2, data3,
Data: {
labels: [
"FY19 Q1[NOV-JAN]",
"FY19 Q2[FEB-APR]",
"FY18 Q3[SEP-NOV]"
],
datasets: [
{
label: "",
data: claim,
backgroundColor: [
"rgba(255,105,145,0.6)",
"rgba(155,100,210,0.6)",
"rgb(63, 191, 191)"
]
}
]
}
})
});
}

Answer 2

Based on OP's own answer, here's a more generalised solution :
componentDidMount(graphData) {
return Promise.all(graphData.map(dataObj => dataObj.url))
.then(results => Promise.all(results.map(res => res.json())))
.then(results => this.setState({
'Data': {
'labels': graphData.map(dataObj => dataObj.label),
'datasets': [
{
'label': '',
'data': results.reduce((prev, next) => prev.concat(next), []),
'backgroundColor': graphData.map(dataObj => dataObj.bgColor)
}
]
}
}));
}
As you see, Array methods .map() and .reduce() make for some nice compact code.
Call as follows:
var quartersData = [
{ 'url':'http://localhost:4000/api/EMEA/E_claimQuarter', 'label':'FY19 Q1[NOV-JAN]', 'bgColor':'rgba(255,105,145,0.6)' },
{ 'url':'http://localhost:4000/api/EMEA/E_claimQuarter1', 'label':'FY19 Q2[FEB-APR]', 'bgColor':'rgba(155,100,210,0.6)' },
{ 'url':'http://localhost:4000/api/EMEA/E_claimQuarter2', 'label':'FY18 Q3[SEP-NOV]', 'bgColor':'rgb(63, 191, 191)' }
];
componentDidMount(quartersData)
.then(() => {
console.log('complete');
});