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 — Randy Casburn
– Randy Casburn, Commented Oct 18, 2020 at 17:06
No, because in that post, data from api.spacexdata.com/v2/launches/latest returns only one data where my initial api endpoint returns numerous data. — Judoboy Alex
– Judoboy Alex, Commented Oct 18, 2020 at 17:28

Alexandr · Accepted Answer · 2020-10-18 17:56:27Z

2

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();
  }, []);

answered Oct 18, 2020 at 17:56

Alexandr

5222 silver badges11 bronze badges

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

1 Comment

Judoboy Alex Over a year ago

This answer helped. Thank you!

Kirill Skomarovskiy · Accepted Answer · 2020-10-18 17:55:50Z

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, 2020 at 17:55

answered Oct 18, 2020 at 17:50

Kirill Skomarovskiy

1,5751 gold badge9 silver badges10 bronze badges

1 Comment

Judoboy Alex Over a year ago

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!

Collectives™ on Stack Overflow

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

2 Answers 2

1 Comment

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related