react-admin 中嵌套端点的数据网格 [英] Datagrid for nested endpoints in react-admin

问题描述

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

I am trying to understand what the right approach would be to address nested endpoints, let's assume I have a many to many books and authors relationship, and an API which exposes api/authors, api/books, and api/authors/{id}/books. This is a common design pattern.

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

The CRUD on api/authors works beautifully in react-admin. However, under the authors <Show> I want to show a <Datagrid> of all the books with pagination and sorting, which my api makes available under api/authors/{id}/books.

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

What is the right approach to make a datagrid of such a nested endpoint?

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

I've looked into the <ReferenceManyField> which works well in the one to many context but doesn't allow accessing nested endpoints, only filtering an endpoint.

理想情况下，我想要的东西是这样的:

Ideally I would want something that is along the lines of:

<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>

请注意， 是一个假设的组件，其行为与 但会接受 nestedResource 而不是 target 下的嵌套端点.

Note that <NestedResourceField> is a hypothetical component which would have a behavior very similar to <ReferenceManyField> but would accept a nested endpoint under nestedResource instead of target.

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

I am struggling to understand what the design strategy should be for the hypothetical <NestedResourceField> in order to re-use as much of the react-admin framework as possible.

手动"自己获取并列出内容会很简单，但随后我会丢失所有的分页、过滤、排序等......伴随着 react-admin 和 books 的事实 是一个已经定义好的资源.

It would be straightforward to "manually" do the fetch myself and list the content but then I would lose all the pagination, filtering, sorting, etc... that comes with react-admin and the fact that books is an already defined resource.

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

My question is similar to these unanswered questions:

react-admin 中的自定义路由

react-admin 中资源路由的自定义路径

原来我以前没有发现的一个几乎相同的问题被张贴在这里:支持资源嵌套

Turns out an almost identical question which I had not found previously was posted here: Support for resource nesting

推荐答案

所以我决定通过修改 dataProvider 来解决这个问题.

So I decided to solve this with a hack in the dataProvider.

保持上面的例子并使用股票ReferenceManyField:

Keeping with the above example and using the stock 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.我在 case GET_MANY_REFERENCE 下更改了 index.js :

I then modified my dataProvider, which is a fork of ra-jsonapi-client. I changed index.js under the case GET_MANY_REFERENCE from this:

      // 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.

So basically I just remap the parameters to the url for the special case where the target matches a hard coded regex.

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

ReferenceManyField would normally have caused the dataProvider to call api/books?filter[_nested_authors_id]=1 and this modification makes the dataProvider call api/authors/1/books instead. It is transparent to react-admin.

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

Not elegant but it works and doesn't seem to break anything on the front end.

这篇关于react-admin 中嵌套端点的数据网格的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！