进行嵌套的API调用以获取所有列表

时间:2019-07-19 07:43:38

标签: javascript reactjs react-admin

在我的情况下,我有一个API命中命中,并且在API响应时,我必须调用最终的API以获取列表记录。

从第一个API开始,我将获得一个标志,必须在该标志上进行条件API调用才能获取记录。

问题在于,GET_LIST被react-admin调用,因此,我无法处理两个异步API调用。

我尝试使用查询和自定义数据源。

这是react-admin调用以获取列表的API类型。

GET_LIST: {
      request(params: GetListParams): Ticket {
        return {
          method: 'GET',
          url: `${base}/q`,
          headers: makeHeaders(token),
          query: mapQueryParams(params, universalFilters)
        }
      },

      response(res: Object): {total: number, data: Array<Contact>} {
        const {hits, rows} = res
        return {
          total: hits,
          data: rows.map(row => {
            return {...row, id: getId(row)}
          })
        }
      }
    },

这是为列表调用的组件。

export const ContactList = (props) => {
  return (
    <List {...props} filters={<Search />} bulkActionButtons={<PostBulkActions />}>
      <Datagrid className="data-grid">
        <GravatarField source="email" label="" sortable={false} />

        <LinkField
          source="first"
          label="First Name"
          text={ ({first}) => first }
          deriveUrl={ ({id}) => `/#/contacts/${id}` }
          target='' />

        <LinkField  
          source="last"
          label="Last Name"
          text={ ({last}) => last || '(unknown name)' }
          deriveUrl={ ({id}) => `/#/contacts/${id}` }
          target='' />

        <DateField source="lastActivity" />
        <TextField source="email" />
        <PhoneNumberField source="primaryPhone" label="Phone" sortable={false} />
        <MultiTagField source="tags" sortable={false} deletable={false} />
        {/* <DeleteButton /> */}
      </Datagrid>
    </List>
  )
}

1 个答案:

答案 0 :(得分:0)

据我对您的代码的了解,这应该是数据提供者的工作。由于它会返回一个Promise,因此您可以在其中进行两个api调用,只有在收到第二个调用响应后才能解析