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.