How to create a link to another resource in a datagrid?

Question

In the tutorial (https://marmelab.com/admin-on-rest//Tutorial.html), you can see how to reference another entity (i.e post references a user)

This lead to the fact that another XHR is required to display the user name.

If my REST API returns something like

{
"id": 1,
"userId": 1,
"userName": "John Doe",
"title": "sunt aut facere repellat provident occaecati excepturi optio reprehenderit",
"body": "quia et suscipit\nsuscipit recusandae consequuntur expedita et cum\nreprehenderit molestiae ut ut quas totam\nnostrum rerum est autem sunt rem eveniet architecto"
}

How can I directly display the userName property as a link to the user resource WITHOUT doing a XHR ?

Do I have to create something like InlinedReferenceField ?

Answer 1

Why don't you try:

import { Link } from 'react-router-dom';
const UserLinkField = ({ record }) => (
    <Link to={`/users/${record.userId}`}>
        {record.userName}
    </Link>
);

Then use <UserLinkField> in the Datagrid?