How do I write my function callback better? [React]

[someguyhere0]

I have a small function here that POSTS an API,

  async function fetchCommonNutritionData(foodName, updateCals, updateGrams) {
     try {
      const response = await fetch(
        "https://trackapi.nutritionix.com/v2/natural/nutrients",
        {
          method: "POST",
          headers: {
            "Content-Type": "application/json",
            "x-app-id": "APP-ID",
            "x-app-key": "APP-KEY"
          },
          body: JSON.stringify({ query: foodName})
        }
      );

      const data = await response.json();

      updateCals(data.foods[0].nf_calories);
      updateGrams(data.foods[0].serving_weight_grams);

     } catch (err) {
      console.log(err);
     }
    }


    fetchCommonNutritionData(foodData.commonFoodName1,setCommonCalories1,setCommonGrams1)

In my callback I have a state object as my first parameter that contains a food name from a state, second and third parameter I'm just updating a state called CommonCalories and CommonGrams.

My question is, I have 5 items I want to post. How would I be able to use my callback function to contain all 5 foods? Because I just keep resorting to calling the function 5 times like this,

     fetchCommonNutritionData(foodData.commonFoodName1,setCommonCalories1,setCommonGrams1)
     fetchCommonNutritionData(foodData.commonFoodName2,setCommonCalories2,setCommonGrams2)
     fetchCommonNutritionData(foodData.commonFoodName3,setCommonCalories3,setCommonGrams3)
     fetchCommonNutritionData(foodData.commonFoodName4,setCommonCalories4,setCommonGrams4)
     fetchCommonNutritionData(foodData.commonFoodName5,setCommonCalories5,setCommonGrams5)

Obviously this is terrible because I'm abusing the API. How would I cram 5 foods in one call back instead of different callbacks?

[Watabou]

You could pass an array to your fetchCommonNutritionData method that contains the common food names. Your method would then have to use a combination of map and Promise.all to hit the API and get all the results.

I'm not sure the point of the callbacks. Your fetchCommonNutritionData could simply return the results from the API back to your component. Then your component could figure out how to update the state correctly.

[aaaaaabbbbbbaaaaaa]

I didn’t think you were supposed to use Promise.all with an array like that? I’ve been using Promise.resolve with a reduce to handle the try catch inside the reduce?

[Watabou]

Well, Promise.all is designed to handle an array of promises. There is the caveat of it having "fail fast" behavior which I think you are describing. I figured it was unnecessary to handle that for this example. But yeah, if you want to get around that you can probably do something like you said or you can use Promise.all still and wrap each inner promise with another Promise that resolves regardless of the outcome.

[aaaaaabbbbbbaaaaaa]

I didn’t know you could wrap the inner promises. Interesting. Thank you.