'React Admin <ReferenceManyField> component is calling dataProvider.getList() and not dataProvider.getManyReference()
I want to list the credits of one product in my edit page. I am using <ReferenceManyField> component.
I created a resource for productCredits and its dataProvider with a getList and getManyReference. Referencing this resource in <ReferenceManyField>, it should call the getManyReference method from the dataProvider but it calls the getList.
According to the docs:
This component fetches a list of referenced records by a reverse lookup of the current record.id in the target field of another resource (using the dataProvider.getManyReference() REST method), and passes them to its child.
My edit page for product:
function ProductCreditsList(): JSX.Element {
// eslint-disable-next-line @typescript-eslint/no-unnecessary-type-assertion, @typescript-eslint/non-nullable-type-assertion-style
const record = useRecordContext() as ProgramRecord;
const filter = { filter: record.productCreditsIds };
return (
<ReferenceManyField reference="productCredit" source="productCreditsIds" target="productUuid" filter={filter} label="Casting">
<Datagrid>
<TextInput source="id" title="ID" />
<TextInput source="personFirstName" title="Prénom" />
<TextInput source="personLastName" title="Nom" />
</Datagrid>
</ReferenceManyField>
);
}
export function ProgramEdit(props: DeepReadonly<EditProps>): JSX.Element {
const startDate = 1800;
const classes = useStyles();
return (
<Edit {...props}>
<SimpleForm>
<BooleanInput source="isActive" label="Publié" />
<BooleanInput source="isOutOfCatalog" label="Hors Catalogue" />
<TextInput className={classes.fullWidthField} source="title" label="Titre" validate={required()} />
<TextInput className={classes.fullWidthField} source="originalTitle" label="Titre original" />
<TextInput className={classes.fullWidthField} source="productionYear" label="Année de production" type="number" />
<ProductCreditsList />
<CountriesList />
<RichTextInput source="description" className={classes.fullWidthField} />
<DateInput source="publicationDate" className={classes.fullWidthField} />
<AutocompleteInput label="Catégories" className={classes.fullWidthField} />
<SelectInput
className={classes.fullWidthField}
label="Année de production"
source="productionYear"
choices={range(startDate, new Date().getFullYear()).map((year) => ({ id: year.toString(), name: year.toString() }))}
/>
<TextInput className={classes.fullWidthField} source="id" label="Code film" validate={required()} />
</SimpleForm>
</Edit>
);
}
My dataProvider for productCredits:
async function getList(params: DeepReadonly<GetListParams>): Promise<GetListResult<ProductCreditsRecord>> {
// eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
const { data } = (await fetchAllByIds({ ids: params.filter.filter as number[] })) as { data: ApiListProductCreditsResponse };
const productCredits = data.content;
assertIsDefined(productCredits);
const total = productCredits.length;
assertIsDefined(total);
assertIsDefined(productCredits);
return {
data: productCredits.map((content) => mapDTOToRecord({ id: content.id ?? 0, ...content })),
total
};
}
async function getManyReference(params: DeepReadonly<GetManyReferenceParams>): Promise<GetManyReferenceResult<ProductCreditsRecord>> {
// eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
const { data } = (await fetchAllByIds({ ids: params.filter.filter as number[] })) as { data: ApiListProductCreditsResponse };
const productCredits = data.content;
assertIsDefined(productCredits);
const total = productCredits.length;
assertIsDefined(total);
assertIsDefined(productCredits);
return {
data: productCredits.map((content) => mapDTOToRecord({ id: content.id ?? 0, ...content })),
total
};
}
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|
