How to fetch sequence api calls where second api call need particular data from first api call result using react hooks?

Question

When I make first api call, I get json data containing all the race cars info. Then when I make second api call to retrieve info for corresponding individual driver, I need driverId in api endpoint. So I tried mapping the driverId from the result of first api call, but then I get error. I'm trying to display all race cars with matching driver(ex. porshe with sally, since they both share same id). How can I achieve this result? https://codesandbox.io/s/polished-firefly-08siz?file=/src/App.js

import React, { useState, useEffect } from 'react';
import axios from 'axios';
import './styles.css';

const App = () => {
  const [raceCarData, setRaceCarData] = useState({ carData: null, driverData: null });

  const raceCars = [
    {'car': 'porsche', 'description': 'luxury', 'driverId': 4},
    {'car': 'ferrari', 'description': 'beatiful', 'driverId': 2},
    {'car': 'bmw', 'description': 'slow', 'driverId': 5}
  ]

  /*
  https://github.com/racedrivers/4 => {'name': 'sally', 'gender': 'female', 'id': 4}
  https://github.com/racedrivers/2 => {'name': 'john', 'gender': 'male', 'id': 2},
  https://github.com/racedrivers/5 => {'name': 'tyffany', 'gender': 'female', 'id': 5},
  */

  useEffect(() => {
    const getRaceCarData = async () => {
      const cars = await axios.get("https://github.com/raceCars");
      cars.data.map((res) => {
        const drivers = await axios.get(
          `https://github.com/racedrivers/${res.driverId}`
        );
      })
      setRaceCarData({ carData: cars.data, driverData: drivers.data });
    };
    getRaceCarData();
  }, []);

  return (
    <div>
      <h1>{raceCardata.carData.map((value) => value.car}</h1>
      <h2>{raceCardata.driverData.map((value) => value.name}</h2>
    </div>
  );
}

export default App;

Does this answer your question? [using a fetch inside another fetch in javascript](https://stackoverflow.com/questions/40981040/using-a-fetch-inside-another-fetch-in-javascript) — Randy Casburn, Oct 18 '20 at 17:06
No, because in that post, data from https://api.spacexdata.com/v2/launches/latest returns only one data where my initial api endpoint returns numerous data. — Judoboy Alex, Oct 18 '20 at 17:28

score 2 · Answer 1 · answered Oct 18 '20 at 17:56

You should call info for drivers parallel. Something like this:

  useEffect(() => {
    const getRaceCarData = async () => {
      const cars = await axios.get("https://github.com/raceCars");
      const driversData = await Promise.all(cars.data.map(async (res) => {
        const drivers = await axios.get(
          `https://github.com/racedrivers/${res.driverId}`
        );

        return drivers.data;
      }));

      setRaceCarData({ carData: cars.data, driverData: driversData });
    };

    getRaceCarData();
  }, []);

This answer helped. Thank you! – Judoboy Alex Oct 18 '20 at 18:37 — Judoboy Alex, Oct 18 '20 at 18:37

Kirill Skomarovskiy · Answer 2 · 2020-10-18T17:55:50.660

0

I think Promise.allSettled or Promise.all will help you. Read doc about those methods. You can use Promise with async function.

const drivers = await Promise.allSettled(cars.data.map(res => axios.get(`https://github.com/racedrivers/${res.driverId}`)));

edited Oct 18 '20 at 17:55

answered Oct 18 '20 at 17:50

Kirill Skomarovskiy

1,535
1
7
9

Although this way works, but it gave me additional unnecessary value like value:"fulfilled" and put the data I want in deeply nested object. But it was good to know. Thank you! – Judoboy Alex Oct 18 '20 at 18:39

How to fetch sequence api calls where second api call need particular data from first api call result using react hooks?

2 Answers2