How to make a further API call with data from first API call?

Question

I'm trying to get data from an initial API where the json looks like this:

[
    {
        "id": "1",
        "extraApi": "/api/item_1.json",
        "mData": [
            {
                "name": "plane",
                "url": "/images/item_1.jpg"
            }
     },
    {
        "id": "2",
        "extraApi": "/api/item_2.json",
        "mData": [
            {
                "name": "car",
                "url": "/images/item_2.jpg"
            }
     }
]

Which I calling like so in one component:

export default async function getItems() {
  const response = await fetch('/api/items.json');
  const items = await response.json();

  return items;

}

and then in another component:

export default function useData() {
  const [items, setItems] = useState([]);

  useEffect(() => {
    getItems()
      .then((res) => setItems(res))
      .catch((err) => setError(err));

  }, []);

  return [
    items
  ];
}

I am able to receive and display the data well, but I'm unsure of how to also make another call using the extra api from within the first json data to get that data also? Preferably I'd like to have another call within the getItems component but I'm not sure where to begin.

item_1 json looks something like this:

{
    "id": "1",
    "desc": "Blah Blah",
    "price": "£1.50"
}

score 0 · Answer 1 · answered Aug 18 '21 at 14:50

You can put the second API call in the .then() of the first call.

useEffect(() => {
    getItems()
      .then((res1) => {
          setItems(res1)
          return asyncCall2(res1)
       })
      .then((res2) => {
          // use data from second call here
      }
      .catch((err) => setError(err));

}, []);

score 0 · Answer 2 · answered Aug 18 '21 at 14:52

You can make another call after storing the response from first call like this:

useEffect(() => {
    
   /*Do another call*/

}, [items]);

This React.useEffect is called everytime the items object changes. So, in the first call you store the response data in items and then this is called.

How to make a further API call with data from first API call?

2 Answers2