How to fetch data from multiple db from the node.js in frontend react.js

Question

I have the below code, where I have to get data from all the files in the same DB. Node.js is running at the backend. When I try the below code, I always get the last fetch, can anyone please help me how to fix this. The below is from the react JS frontend.

    componentDidMount() {
        console.log("This Worked Sucessfully")
        this.getDataFromDb();
        if (!this.state.intervalIsSet) {
          let interval = setInterval(this.getDataFromDb, 1000);
          this.setState({ intervalIsSet: interval });
        }
      }

      getDataFromDb = () => {fetch('http://172.24.78.202:3001/api/passed')
          .then(data => data.json())
          .then(res => this.setState({ passed: res.data }));
      };

      getDataFromDb = () => {fetch('http://172.24.78.202:3001/api/failed')
          .then(data => data.json())
          .then(res => this.setState({ failed: res.data }));
      };

      getDataFromDb = () => {fetch('http://172.24.78.202:3001/api/all')
          .then(data => data.json())
          .then(res => this.setState({ data2: res.data }));
      };
      render() {
        const primaryColor = getColor('primary');
        const secondaryColor = getColor('secondary');
        const { passed, failed, data2 } = this.state

You can use Promise.all to fire all your requests simultaneously but wait that all of them get resolved before udpating the state (developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…) — Gaël S
– Gaël S, Commented Jul 13, 2019 at 8:31

guzmonne · Accepted Answer · 2019-07-15 01:13:25Z

1

From what I see by your code, you seem to be re-writing your goGetDataFromDB two times. Try changing the names of each function or, the way you call them. You can also take advantage of Promise.all to group the results of each call into a single return handle.

Check this link for the documentation of Promise.all

You could refactor your current code to something like this:

class MyComponent extends React.Component {
  componentDidMount() {
    this.getDataFromDb();
    if (!this.state.intervalIsSet) {
      let interval = setInterval(this.getDataFromDb, 1000)
      this.setState({intervalIsSet: true })
    }
  }

  getDataFromDb = () => {
    Promise.all([
      'http://172.24.78.202:3001/api/passed',
      'http://172.24.78.202:3001/api/failed',
      'http://172.24.78.202:3001/api/all'
    ].map(url => (
      fetch(url)
        .then(data => data.json())
        .then(res => res.data)
      )
    )).then(([passed, failed, data2]) => 
      this.setState({ passed, failed, data2 })
    );
  }

  render() {
    //...
  }
}

I tried to keep as much as your code as possible so you could notice the differences.

I hope this helps.

edited Jul 15, 2019 at 1:13

answered Jul 13, 2019 at 20:34

guzmonne

2,5661 gold badge18 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Vishnuprakash Selvarajan Over a year ago

Thanks ! I tried the same, unfortunately that is also not working this time none of them "passed" / "failed" / "data2" had any result. What could have been wrong.. when I try like ''' getDataFromDb = () => {fetch('172.24.78.202:3001/api/failed') .then(data => data.json()) .then(res => this.setState({ all: res.data })); }; ''' It works.. still not working together :( any ideas please.

Vishnuprakash Selvarajan Over a year ago

I also tried this componentDidMount() { console.log("This Worked Sucessfully") this.getDataFromDb(); if (!this.state.intervalIsSet) { let interval = setInterval(this.getDataFromDb, 1000); this.setState({ intervalIsSet: interval }); } } componentDidMount2() { console.log("This Worked Sucessfully") this.getDataFromDb2(); if (!this.state.intervalIsSet2) { let interval2 = setInterval(this.getDataFromDb2, 1000); this.setState({ intervalIsSet2: interval2 }); } }

guzmonne Over a year ago

The only thing I see differences between my code and yours is that the data you are looking for is inside a key called data inside the JSON response. I modified the example showing you this. It should work. Check that the requests are sent and their responses.

Collectives™ on Stack Overflow

How to fetch data from multiple db from the node.js in frontend react.js

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related