Add optional target property in ReferenceArrayField component

[nicgirault]

Is your feature request related to a problem? Please describe.

I need to link 2 resources but the link does not pass through the id of a resource.

Describe the solution you'd like

Let's consider 2 resources:

Tag(id: number, name: string)
Post(id: number, tagNames: string[]).

Note that the Post resource does not link to Tag via the id of the tag but the name of the tag.

I would like to be able to specify the target property when using ReferenceArrayField:

<ReferenceArrayField
          label="tags"
          reference="tag"
          source="tagNames"
          target="name"
>

[Kmaschta]

Indeed, the reference input and fields only use id as a way to select references, and do not provide any way to select a secondary key.

This is a strong opinionated choice from the core team as it makes a lot of things far easier (cache, optimistic, filters, etc)
It's very unlikely that the core team implements this feature request as we don't have the need.

Any PR are welcome, but I guess this will not be an easy one.
I'll let the core team decide to open this one as an enhancement or close it.

📣 If someone does have a workaround for this use case, feel free to share!

[Kmaschta]

I'm closing since the core team won't implement that suggestion, but comments are still open.

[nicgirault]

Here is my workaround:

import keyBy from 'lodash/keyBy'
import { Loading, Datagrid, Query, TextField, Pagination } from 'react-admin'

const Tags = ({ tagNames }) => {
  const [page, setPage] = useState(1)
  const perPage = 50

  return (
    <Query
      type="GET_LIST"
      resource="tags"
      payload={{
        pagination: { page, perPage },
        sort: { field: 'id', order: 'ASC' },
        filter: { name: tagNames },
      }}
    >
      {({ data, total, loading, error }) => {
        if (loading) {
          return <Loading />
        }
        if (error) {
          return <p>ERROR: {error}</p>
        }
        return (
          <>
            <Datagrid
              data={keyBy(data, 'id')}
              ids={data.map(({ id }) => id)}
              currentSort={{ field: 'id', order: 'ASC' }}
            >
              <TextField source="id" />
              <TextField source="name" />
            </Datagrid>
            <Pagination
              page={page}
              perPage={perPage}
              setPage={setPage}
              total={total}
            />
          </>
        )
      }}
    </Query>
  )
}

I use it in the edit form:

const PostEdit = (props) => (
  <Edit {...props}>
    <SimpleForm>
      <Tags tagNames={props.record.tagNames} />
    </SimpleForm>
  </Edit>
)

Note: it's quite hard to find how to use Datagrid and Pagination components outside of a List component. I had to go in the source code to understand which props are expected. Is there a plan to provide a systematic API doc for all the available components?

[djhi]

Note: it's quite hard to find how to use Datagrid and Pagination components outside of a List component. I had to go in the source code to understand which props are expected. Is there a plan to provide a systematic API doc for all the available components?

We would love to. Any chance you leverage what you learned and start documenting it ?