'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