useGetMany - fetches data by sending traction but does not update data field - code copied and used from react-admin document - react-admin

Question

I had used the useGetMany to get topics for mathpapers. I can see based on reference the getMany
Tracation goes and fetch data as shown in console.log response. But the data is not stored in the
" const { data, loaded, error } - as it shows array of same size but undefined objects in console.log prints."
Please suggest what I am missing here.
const Mysubtopics = ({ record }: any) => {
console.log(record);
const subtopicsIds = record.subtopic_id;
console.log('subtopicsID', subtopicsIds);
const { data, loaded, error } = useGetMany('subtopics', subtopicsIds);
//if (error) return <Error />;
if (error) return <span>Error</span>;
if (!loaded) return <span>Loading</span>;
if (!data) return null;
console.log('data', data);
const allsubtopics = data.reduce((acc, subtopic) => {
acc = acc.concat(subtopic.name.en);
return acc;
}, '');
return (
<span>
{allsubtopics}
{record.id}
</span>
);
};
const MathPaperList = (props: any) => {
const classes = useStyles();
const isSmall = useMediaQuery((theme: Theme) =>
theme.breakpoints.down('sm')
);
return (
<List
{...props}
filters={<MathPaperFilter />}
sort={{ field: 'generated_at', order: 'DESC' }}
exporter={exporter}
>
{isSmall ? (
<SimpleList
primaryText={record => record.title}
secondaryText={record => <Mysubtopics record={record} />}
tertiaryText={record =>
new Date(record.generated_at).toLocaleDateString()
}
/>
) : ...........some more for desktop error is in above secondaryText.
I can see the following console.log -
getMany subtopics {"ids":[10,12,14,3,5,8,1,2,4]}
index.js:31
Object
data: Array(9)
0: {id: 1, name: {…}}
1: {id: 2, name: {…}}
2: {id: 3, name: {…}}
3: {id: 4, name: {…}}
4: {id: 5, name: {…}}
5: {id: 8, name: {…}}
6: {id: 10, name: {…}}
7: {id: 12, name: {…}}
8: {id: 14, name: {…}}
length: 9
Object
index.js:30 getMany subtopics {"ids":[10,12,14,3,5,8,1,2,4]}
MathPaperList.tsx:137 {id: 3, title: "3rd test for batch 2:30", batch_id: 1, subtopic_id: Array(3), generated_at: Thu Dec 30 2021 05:30:00 GMT+0530 (India Standard Time), …}
MathPaperList.tsx:139 subtopicsID (3) [10, 12, 14]
MathPaperList.tsx:146 data (3) [undefined, undefined, undefined]
MathPaperList.tsx:137 {id: 2, title: "2nd test for batch 2:30", batch_id: 1, subtopic_id: Array(3), generated_at: Sat Dec 26 2020 05:30:00 GMT+0530 (India Standard Time), …}
MathPaperList.tsx:139 subtopicsID (3) [3, 5, 8]
MathPaperList.tsx:146 data (3) [undefined, undefined, undefined]
__proto__: ...
.........
Here is data.tsx
mathpapers: [
{
id: 1,
title: '1st test for batch 2:30',
batch_id: 1,
subtopic_id: [1, 2, 4],
generated_at: new Date('2020-12-06'),
difficulty: 80,
mark1q: 0,
mark2q: 5,
mark3q: 0,
mark4q: 6,
mark5q: 2,
},
{
id: 2,
title: '2nd test for batch 2:30',
batch_id: 1,
subtopic_id: [3, 5, 8],
generated_at: new Date('2020-12-26'),
difficulty: 40,
mark1q: 3,
mark2q: 0,
mark3q: 4,
mark4q: 3,
mark5q: 2,
},
.....
],
subtopics: [
{
id: 1,
name: { en: 'Sport' },
},
{
id: 2,
name: { en: 'Technology' },
},
.....
]

Answer 1

Here the missing part, which is never documented in the react-admin was you need to have resourses in the App.tsx file to hook up the resource to get data, so need below 2 resource lines with subtopics in the App.tsx -
import subtopics from './subtopics';
.....
const App = () => {
return (
<Admin
title=""
dataProvider={dataProvider}
customReducers={{ theme: themeReducer }}
customRoutes={customRoutes}
authProvider={authProvider}
dashboard={Dashboard}
loginPage={Login}
layout={Layout}
i18nProvider={i18nProvider}
disableTelemetry
>
<Resource name="mathpapers" {...mathpapers} />
<Resource name="subtopics" {...subtopics} />
{/*<Resource
subtopics file is :
export default {
};