Спокойные вызовы API с Гэтсби

Это действительно зависит от того, чего вы пытаетесь достичь, и это очень широкий вопрос. Во-первых, приведенное выше изображение файловой структуры не имеет никакого отношения к решению. Во-вторых, не зацикливайтесь на Гэтсби. Gatsby — это инструмент для создания приложений React, поэтому на самом деле вы просто создаете и заполняете компоненты React, поэтому, если вы застряли, поищите помощь с помощью React.

Это действительно зависит от того, пытаетесь ли вы заполнить кучу компонентов на странице, готовой для использования пользователем, или вам нужно «управлять состоянием» для страницы, содержащей множество компонентов, которые совместно используют данные. Вы можете вызвать API из самого компонента или вызвать API из «родительского» компонента и передать данные в целевой (известный как дочерний) компонент.

Если у меня есть компонент, которому нужны данные, но данные не используются для состояния приложения, я бы использовал метод componentDidMount() самого компонента, что ясно продемонстрировано в опубликованной вами ссылке. Например, вы хотите, чтобы раскрывающийся список/выбор загружался с набором данных по умолчанию.

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

Что это делает, так это то, что когда компонент был смонтирован на странице, срабатывает метод componentDidMount. Затем это вызывает команду fetch и вставляет необработанные результаты в государственную собственность страны. Затем он вызывает метод this.buildSeletOptions(countries) для построения массива options для выбранного компонента.

Например.

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});

}

Чтобы вызвать несколько API одновременно, я бы перешел к первому родителю, под которым находятся все затронутые дочерние компоненты. Например. У меня есть страница с несколькими компонентами, и все они нуждаются в заполнении.

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;

Здесь происходит следующее: при загрузке SomePage вызывается метод componentDidMount. Теперь здесь два вызова fetch, и они будут вызываться параллельно. Затем React setState будет обрабатывать данные, возвращаемые API. После завершения setState React отмечает изменение состояния и отправляет данные в два дочерних компонента. Это тривиальный пример, и он не объясняет, как обрабатывать ситуации, когда второй вызов API зависит от данных первого, но должен дать вам достаточно, чтобы продолжить.