如何在react-admin的show选项中列出来自另一个端点的数据? [英] How can I list data from another endpoint inside show option in react-admin?

问题描述

React-Admin版本: 2.4.0

React-Admin version: 2.4.0

我有一个列表，其中包含可使用此端点列出的钱包信息:

I have a list with a info of wallets that I can list using this endpoint:

http://myHost:8080/api/v1/private/wallets

现在，我想在单击列表的钱包时显示每个钱包的移动数据.

Now I want to show data of the movements of each wallet when I click in the wallet of the list.

因此，为了获取钱包的移动数据，我需要调用另一个端点，并以以下格式发送get:

So, for obtain the data of the movements of the wallet I need to call to another endpoint, sending the get with this format:

${apiUrl}/${resource}/${params.id}/movements 

例如:

http://myHost:8080/api/v1/private/wallets/cd496094-a77a-4e4e-bcd9-3361ff89294a/movements

此端点向我返回了一个像这样的对象:

This endpoint return me an object like this:

{
   "_embedded": {
       "movements": [
           {
               "id": "ftr4e2e5-a2bf-49f7-9206-3e2deff3a456",
               "amount": 10,
               "status": "PENDING"
           },
           {
               "id": "67732ad9-233e-42be-8079-11efe4d158yt",
               "amount": 2.56,
               "status": "SUCCESS"
           }
       ]
   }
}

我有此代码:

//IMPORTS
export const WalletList = props => (
  <List {...props}>
    <Datagrid rowClick="show">
      <TextField source="id" label="Wallet ID" />
      <TextField source="iban" label="IBAN" />
    </Datagrid>
  </List>
);

export const WalletShow = props => (
  <Show {...props}>
    <TabbedShowLayout>
      <Tab label="Wallet">
        <TextField label="Wallet ID" source="id" />
      </Tab>
      <Tab label="Movements">
        <TextField label="Movement ID" source="id" />
      </Tab>
    </TabbedShowLayout>
  </Show>
);

我有一个基于json-server的自定义数据提供程序，用于此端点:

I have a custom data provider based in json-server for this endpoint:

export default (apiUrl, httpClient = fetchUtils.fetchJson) => {

  const convertDataRequestToHTTP = (type, resource, params) => {
    let url = '';
    const options = {};
    switch (type) {
      case GET_LIST: {
        //...
      }
      case GET_ONE:
         // custom call for movements: /api/v1/private/wallets/{walletId}/movements
        if (resource === 'wallets') {
          url = `${apiUrl}/${resource}/${params.id}/movements`;
          break;
        }
        url = `${apiUrl}/${resource}/${params.id}`;
        break;
      case GET_MANY_REFERENCE:
        //...
      case UPDATE:
        //...
      case CREATE:
        //...
      case DELETE:
        //...
      default:
        throw new Error(`Unsupported fetch action type ${type}`);
    }
    return { url, options };
  };
  //...
}

我的错误是:

The response to 'GET_ONE' must be like { data: { id: 123, ... } }, but the received data does not have an 'id' key. The dataProvider is probably wrong for 'GET_ONE'

如何在show组件中列出?

How I can list inside a show component?

推荐答案

首先，关于您的dataProvider，如[documentation(

First, about your dataProvider, as explained in the [documentation(https://marmelab.com/react-admin/DataProviders.html#response-format), you must return an object with a data key containing your API response. This will fix the error you're seeing.

第二，关于在显示视图中包含相关数据列表，您应该使用 ReferenceManyField .它将请求使用GET_MANY_REFERENCE提取类型链接到当前wallet的所有movements.

Second, about having a list of related data inside a show view, you should use a ReferenceManyField inside your tab. It will requests all movements linked to the current wallet using the GET_MANY_REFERENCE fetch type.

这篇关于如何在react-admin的show选项中列出来自另一个端点的数据?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！