Why ReferenceManyField request two times when as a children is a list with grid inside

Viewed 51

I have a list with grid inside

const UserList = (props: ListProps) => {
    return (
        <List
            {...props}
            sort={{ field: 'date', order: 'DESC' }}
            perPage={2}
            filters={someFilters}
        >
            <DataGrid />
        </List>
    );
};



const DataGrid = (props: any) => {
    return (
        <Datagrid>
            <TextField
                source="id"
                label="Id"
            />
            <TextField
                source="name"
                label="Name"
            />
            <TextField
                source="date"
                label="Date"
            />
        </Datagrid>
    )
}

when is used as a list everithing works as expected, but when I return this list as a ReferenceManyField iside of a Tab in a TabbedShowLayout, the request to server is executed two times, and on UI result is rendered only first data is returned

<TabbedShowLayout>
    <Tab label="A">
        <CustomControl />
    </Tab>
    <Tab
        label="B"
        path={`/pathToUsers`}
        basePath="/pathToUsers"
        syncWithLocation={false}
    >
        <ReferenceManyField
            reference="pathToUsers"
            target="id"
            addLabel={false}
            sort={{ field: `date`, order: 'DESC' }}
            perPage={10}
        >
            <UserList />
        </ReferenceManyField>
    </Tab>
</TabbedShowLayout>

Is possible to stop default load of the list when the list is used as a ReferenceManyField inside of a Tab from TabbedShowLayout ?

1 Answers

I had the exact same issue!

I found this issue: https://github.com/marmelab/react-admin/issues/5722

The solution was to remove the list component within the ReferenceManyField

<ReferenceManyField reference="Licenses" target="order_id">
  <Datagrid rowClick="edit">
    <TextField source="id" />
  </Datagrid>
</ReferenceManyField>
Related