I am currently exploring the idea of making multiple API calls simultaneously by utilizing multiple fetch requests within an await Promise.all block, as shown below:
const responseData = await Promise.all([
fetch(
DASHBOARDS_API +
"getGoalsByGroupName?queryParamValues=FOOVAL0"
).then((response) => response.json()),
fetch(
DASHBOARDS_API +
"getGroupByName?queryParamValues=FOOVAL1"
).then((response) => response.json().body),
]);
This method works perfectly fine, and I'm able to successfully log the responses.
However, the issue arises when each fetch response contains metadata (such as statusCode and count), but I am only interested in the actual data inside response.json().body.
When I attempt to access it like I did in the second request, TypeScript raises a complaint:
any
Property 'body' does not exist on type 'Promise<any>'. ts(2339)
What is the most efficient way to extract and store just the inner data from the responses in my responseData array immediately? If direct extraction is not possible, should I individually transform each response and then assign it to another array?
EDIT:
I forgot to mention that I am using .map along with a new array for formatting the data, but it seems a bit cumbersome compared to performing inline transformations.
Here's how I currently implement it:
const data = responseData.map(response => response.body)