Restful api calls with gatsby

Question

I have below folder structure with gatsby react

How can I call a rest full api when using gatsby? I have gone through this but don't know how do I call multiple api at once on different components.

Answer 1

This really depends on what you're trying to achieve and is a very broad question. Firstly, the file structure image above has no bearing whatsoever on the solution. Secondly, don't be hung up about Gatsby. Gatsby is a tool for building React apps, so you're really just building and populating React components, so if you're stuck, search for help using React.

It really depends if you're trying to populate a bunch of components in a page ready for the user to use or whether you need to 'control state' for a page containing lots of components that share data. You can call an API from the component itself, or you can call the API from a 'parent' component and pass the data into the target (known as Child) component.

If I have a component that needs data but the data isn't used for app state, then I'd use the componentDidMount() method of the component itself, which is clearly demonstrated in the link you posted. For example, you want a dropdown/select loaded with a set of default data.

componentDidMount(){
    fetch(ApiURL)
        .then(result=>result.json())
        .then(result=>this.setState({countries}, this.buildSelectOptions(countries)))
}

What this does is when the component has been mounted on the page, the componentDidMount method fires. This then calls the fetch command and sticks the raw results into the countries state property. It then calls the 'this.buildSeletOptions(countries)' method to build the 'options' array for the select component.

E.g.

buildSelectOptions(countries){

    var optionsArray[];
    var newCountry={key: 1, value:'All', text:'All'};
    optionsArray.push(newCountry);

    for(var i = 0; i < countries.length; i++) {
        let nextCountry = {key: i+2, value:countries[i].name, text:countries[i].name};
        optionsArray.push(nextCountry);
    }

    this.setState({options: optionsArray});

}

To call multiple APIs at once, I would go to the first parent where all affected child components are underneath. E.g. I have a page with multiple components and they all need populating.

class SomePage extends React.Component {

    constructor(props) {
        super(props);

        this.state = {compOneData:'', compTwoData:''};

    }

    componentDidMount(){
        this.loadData();
    }

    loadData(){

        fetch(someApiURL)
            .then(result=>result.json())
            .then(result=>this.setState({compOneData: result});

        fetch(someotherApiURL)
            .then(result=>result.json())
            .then(result=>this.setState({compTwoData: result});     
    }


    render(){

        return (

            <div>
            <ComponentOne data={this.state.compOneData} />
            <ComponentTwo data={this.state.compTwoData} />
            </div>
        );

    }
}

export default SomePage;

What happens here is that when SomePage loads, the componentDidMount method is called. There are now two fetch calls in here and they will be called in parallel. React setState will then handle the data returned by the APIs. Once setState has completed, React notes the change in state and pushes the data to the two child components. This is a trivial example and doesn't explain how to handle situations where the second API call is dependent on data from the first, but should give you enough to go on.