CODEWITHSUNDEEP
javascriptreactjs
Vishnuprakash Selvarajan
Vishnuprakash Selvarajan

Reputation: 3

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

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

Upvotes: 0

Views: 975

Answers (1)

guzmonne
guzmonne

Reputation: 2540

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.

Upvotes: 1

Related Questions