Nested Reference Field

Question

In order to retrieve the equipment type I am using a that will retrieve the equipment model and then another that references the equipment type using the equipment model's field "typeID" to retrieve the equipment type.

However it displays the following warning:

Warning: Failed prop type: Invalid prop translateChoice of type boolean supplied to ReferenceField, expected function.

The image represents the data model (an equipment has an equipment model, and an equipment model has an equipment type)

Answer 1

I found a better solution is kinda of an hack but seems to be more efficient.

Taking the question example where in order to get equipmentType is only needed <ReferenceField>, it would be something like this:

const EquipList = ({...props}) => {
  <List {...props}>
    <Datagrid>

      <ReferenceFieldController label="Equipment Type" reference="equipmentModel" source="modelID" linkType={false}>
        {({referenceRecord, ...props}) => (
          <ReferenceField basePath="/equipmentModel" resource="equipmentModel" reference="equipmentType" source="typeID" record={referenceRecord || {}} linkType="show">
            <TextField source="name">
          </ReferenceField>
        )}
      </RefenceFieldController>

    </Datagrid>
  </List>
}

In the example above <ReferenceFieldController> fetches the equipmentModel of equipment, as like <ReferenceField>. Label is needed because RA uses the first <ReferenceField> to show the column header in <Datagrid>, if you use internationalization you should apply translate function to the correct resource on this prop.

<ReferenceController> fetches the record and passes it as referenceRecord to a child function that will render the component for field presentation. Instead of presenting the field component you render a <ReferenceField> to fetch the nested relation and next you show the field. Since <ReferenceFieldController> only passes controller props to its child and the props of field component don't do what you want in the nested relation, you have to explicit pass them to <ReferenceField>. You need to pass record of <ReferenceField> as referenceRecord || {} because the initially the referenceRecord is not fetched yet and <ReferenceField> doesn't work with record as null.

Setting the linkType of <ReferenceFieldController> to false makes it not render a <Link> component that would redirect the user to an incorrect route.

Answer 2

I have the same problem and I think this is an actual bug. I commented on the corresponding github issue https://github.com/marmelab/react-admin/issues/2140

I looked into the code for ReferenceField and as far as I understood this is an actual bug. ReferenceField expects a function for the translateChoice property, but internally hands a boolean to ReferenceFieldView. If you nest one ReferenceField into another the inner one receives false as translateChoice property and rightfully complains that it is a boolean and not a function.

Answer 3

Not a perfect fix, but to get around the translateChoice issue, you can create a wrapper and pluck out that prop to prevent it from being passed.

const SubReference = ({ translateChoice, children, ...props }) => (
  <ReferenceField {...props}>{children}</ReferenceField>
);

While troubleshooting this, I was also receiving an error about nested a tags. I was able to silence the error by setting the linkType prop to false in the parent ReferenceField

<ReferenceField
 source="item_id"
 reference="list"
 linkType={false}
>
  <SubReference source="id_to_reference_from_list" reference="second_list">
    <TextField source="name" />
  </SubReference>
</ReferenceField>