Not sure how to go about this.
I fetch from 1 URL to get an array of objects like this:

```
[{name: 'apple', url: 'appleURL'}, {name: 'orange', 'orangeURL', ...}]

```

then map through each URL to fetch data, the returned data for each item has another URL... like this:

```
[{name: 'apple', colors: ['green', 'red'], type: 'http://URL-that-needs-fetching'},{...etc}]

```

heres what i have, and it works but it's extremely slow...

```
  useEffect(() => {
    const fetchFruit = async () => {
      setLoading(true);
      const fruitResponse = await fetch(fruitPath);
      const fruitJson: Fruit =
        await fruitResponse.json();

      const fruitDetails = await Promise.all(
        fruitJson.results.map(async (f: FruitURLs) => {
          const fDetails = await fetch(f.url);
          const json: FruitDetails = await fDetails.json();

          return json;
        })
      );

      const getFruitDescriptions = await Promise.all(
        fruitDetails.map(async (item: FruitDetails, index: number) => {
          const fruitType = await fetch(item.type.url);
          const json: FruitInfo = await fruitType.json();
          return json;
        })
      );

      let full: FruitDetails[] = fruitDetails;

      for (let index = 0; index < fruitDetails.length; index++) {
        full[index].fruitInfo = getFruitDescriptions[index];
      }
      setFruitDetails(full);
      setLoading(false);
    };

    fetchFruit();
  }, []);

```

I'm new to using promises and not 100% confident with them, also new to TS, and react-native so apologies if there's mistakes here....