Replace each ID in array of IDs with the data fetched from an API by iterating over the array and calling useQuery hook in each iteration in rtk-query - react-hooks

Question

Layout data format:
{
"header": [
{
"cellId": "header1",
"height": "25vh",
"width": null,
"defaultWidgetHeight": "25vh",
"defaultWidgetWidth": null,
"widgetIds": [
3,
2
]
}
],
"footer": [
{
"cellId": "footer1",
"height": "25vh",
"width": null,
"defaultWidgetHeight": "25vh",
"defaultWidgetWidth": null,
"widgetIds": [
4
]
}
],
"leftSidebar": [
{
"cellId": "leftSidebar1",
"height": "70vh",
"width": {
"xs": 12,
"md": 3
},
"defaultWidgetHeight": "30vh",
"defaultWidgetWidth": null,
"widgetIds": [
5
]
}
],
"rightSidebar": [
{
"cellId": "rightSidebar1",
"height": "70vh",
"width": {
"xs": 12,
"md": 3
},
"defaultWidgetHeight": "30vh",
"defaultWidgetWidth": null,
"widgetIds": [
6
]
}
],
"innerHeader": [],
"innerFooter": [],
"innerLeftSidebar": [],
"innerRightSidebar": [],
"center": [
{
"cellId": "center1",
"height": "70vh",
"width": {
"xs": 12
},
"defaultWidgetHeight": "30vh",
"defaultWidgetWidth": null,
"widgetIds": [
7
]
}
]
}
Child component:
Inside the child component, I am trying to transform the layout data and storing a new tranformed layout data in newLayoutData state variable. I am trying to transform it by replacing each ID inside widgetIds array with the data fetched from an API that uses widgetId as a path parameter using useGetDataQuery hook provided by api slice of RTK-query. The problem is that I cannot call hook inside loops or callbacks.
import React, { useState, useEffect } from 'react';
import { useGetDataQuery } from './features/apiSlice';
const Child2 = ({ layoutData }) => {
const [newLayoutData, setNewLayoutData] = useState(null);
useEffect(() => {
const updatedLayoutData = {};
Object.keys(layoutData).forEach((masterContainerId) => {
updatedLayoutData[masterContainerId] = [];
layoutData[masterContainerId].forEach(async(childContainer) => {
updatedLayoutData[masterContainerId].push({
...childContainer,
widgetIds: childContainer.widgetIds.map(async(widgetId) => {
const widgetQuery = useGetDataQuery(`/app/v2/dashboard/widget/${widgetId}`)
return widgetQuery.data;
})
})
});
});
setNewLayoutData(updatedLayoutData);
}, []);
return (
<h1>Layout data transformed</h1>
);
};
export default Child2;
I tried solving this issue using axios but in that case I cannot have the priveledge of using cache that RTK query provides because if the same widgetId appears in some other widgetIds array then axios will again going to make an API call for that ID whereas rtk-query won't and will return the existing cache data for that widgetId.