【问题标题】：Datagrid for nested endpoints in react-adminreact-admin 中嵌套端点的数据网格
【发布时间】：2019-07-05 18:24:25
【问题描述】：

我试图了解解决嵌套端点的正确方法是什么，假设我有一个多对多 books 和 authors 关系，以及一个公开 api/authors、api/books 和api/authors/{id}/books。这是一种常见的设计模式。

api/authors 上的 CRUD 在 react-admin 中运行良好。但是，在作者<Show> 下，我想显示所有带有分页和排序的书籍的<Datagrid>，我的api 在api/authors/{id}/books 下提供。

制作这种嵌套端点的数据网格的正确方法是什么？

我研究了<ReferenceManyField>，它在一对多上下文中运行良好，但不允许访问嵌套端点，只过滤一个端点。

理想情况下，我想要以下内容：

<Show {...props}>
    <TabbedShowLayout>
        <Tab label="Books">
            <NestedResourceField reference="books" nestedResource={`authors/${props.record.id}/books`} pagination={<Pagination/>} >
                <Datagrid>
                    <TextField source="name" />
                </Datagrid>
            </NestedResourceField>
        </Tab>
    </TabbedShowLayout>
</Show>

请注意，<NestedResourceField> 是一个假设组件，其行为与<ReferenceManyField> 非常相似，但会接受nestedResource 下的嵌套端点而不是target。

我很难理解假设的<NestedResourceField> 的设计策略应该是什么，以便尽可能多地重用 react-admin 框架。

“手动”自己获取并列出内容会很简单，但是我会丢失 react-admin 附带的所有分页、过滤、排序等......以及 books 是已定义的资源。

我的问题类似于这些未回答的问题：

custom routes in react-admin

custom path for resource route in react-admin

编辑

原来我之前没有发现的几乎相同的问题发布在这里： Support for resource nesting

【问题讨论】：

标签： reactjs react-admin

【解决方案1】：

所以我决定通过对 dataProvider 进行破解来解决这个问题。

继续上面的例子并使用股票ReferenceManyField：

<Show {...props}>
    <TabbedShowLayout>
        <Tab label="Books">
            <ReferenceManyField reference="books" target="_nested_authors_id" pagination={<Pagination/>} >
                <Datagrid>
                    <TextField source="name" />
                </Datagrid>
            </ReferenceManyField>
        </Tab>
    </TabbedShowLayout>
</Show>

然后我修改了我的dataProvider，它是ra-jsonapi-client 的一个分支。我把index.js 改成了case GET_MANY_REFERENCE 下的这个：

      // Add the reference id to the filter params.
      query[`filter[${params.target}]`] = params.id;

      url = `${apiUrl}/${resource}?${stringify(query)}`;

到这里：

      // Add the reference id to the filter params.
      let refResource;
      const match = /_nested_(.*)_id/g.exec(params.target);
      if (match != null) {
        refResource = `${match[1]}/${params.id}/${resource}`;
      } else {
        query[`filter[${params.target}]`] = params.id;
        refResource = resource;
      }

      url = `${apiUrl}/${refResource}?${stringify(query)}`;

所以基本上我只是为target匹配硬编码正则表达式的特殊情况将参数重新映射到url。

ReferenceManyField 通常会导致 dataProvider 调用 api/books?filter[_nested_authors_id]=1，而此修改使 dataProvider 调用 api/authors/1/books。对 react-admin 是透明的。

不优雅，但它可以工作并且似乎不会破坏前端的任何东西。

【讨论】：

很好的解决方案@vchev005。这仍然是您处理嵌套资源（例如api/authors/{id}/books）的首选方式吗？谢谢

【解决方案2】：

尝试使用 ArrayField 组件：

<Show {...props}>
    <TabbedShowLayout>
        <Tab label="Books">
            <ArrayField source="books" label="">
              <Datagrid>
                 <TextField source="name" />
              </Datagrid>
            </ArrayField>
        </Tab>
    </TabbedShowLayout>
</Show>

books 是您的嵌套资源字段。在您的“作者”端点中，您应该包括书籍。

【讨论】：