当总数未知时，如何对反应管理列表进行分页？

Question

简介：我无法从GraphQL端点获取总记录数。当我从端点解析响应时，我只知道是否到达了GraphQL记录列表的末尾。如何让我的自定义分页组件知道它在最后一页？

详细信息：我正在使用ra-data-graphql将React Admin与AWS AppSync（DynamoDB上的GraphQL）一起使用。 AppSync无法告诉您列表查询可用的记录总数，它还限制了可以返回1MB有效负载的记录数。相反，如果有更多要查询的记录，它包含nextToken值，您可以在后续列表查询中包含这些值。

我创建了一个自定义分页组件，只使用“上一页”和“下一页”链接，这很好。但我需要知道最后一页显示的时间。现在，我只在parseResponse()函数中知道这个，我正在传递给buildQuery()列表查询。此时，我可以访问nextToken值。如果它是空的，那么我从AppSync获取了最后一页的结果。如果我可以传递这个值，甚至是布尔值，例如lastPage到自定义分页组件，我会全力以赴。我怎样才能在React Admin中执行此操作？

Answer 1

为此，我创建了一个自定义缩减器nextTokenReducer，用于查找React Admin的CRUD_GET_LIST_SUCCESS操作，其有效负载是来自AppSync GraphQL端点的完整响应。我可以从中获取nextToken值：

import { CRUD_GET_LIST_SUCCESS } from "react-admin";

export default (previousState = null, { type, payload }) => {
  if (type === CRUD_GET_LIST_SUCCESS) {
    return payload.nextToken;
  }
  return previousState;
};

我将这个自定义缩减器传递给我的主要Admin组件中的App组件：

import nextTokenReducer from "./reducers/nextTokenReducer";
...
class App extends Component {
...
  render() {
    const { dataProvider } = this.state;

    if (!dataProvider) {
      return <div>Loading</div>;
    }

    return (
      <Admin
        customReducers={{ nextToken: nextTokenReducer }}
        dataProvider={dataProvider}
      >
        <Resource name="packs" list={PackList} />
      </Admin>
    );
  }
}

然后我将nextToken商店连接到我的自定义分页组件。它将根据nextToken是否在其道具中显示“next”，“prev”或什么都没有：

import React from "react";
import Button from "@material-ui/core/Button";
import ChevronLeft from "@material-ui/icons/ChevronLeft";
import ChevronRight from "@material-ui/icons/ChevronRight";
import Toolbar from "@material-ui/core/Toolbar";

import { connect } from "react-redux";

class CustomPagination extends React.Component {
  render() {
    if (this.props.page === 1 && !this.props.nextToken) {
      return null;
    }
    return (
      <Toolbar>
        {this.props.page > 1 && (
          <Button
            color="primary"
            key="prev"
            icon={<ChevronLeft />}
            onClick={() => this.props.setPage(this.props.page - 1)}
          >
            Prev
          </Button>
        )}
        {this.props.nextToken && (
          <Button
            color="primary"
            key="next"
            icon={<ChevronRight />}
            onClick={() => this.props.setPage(this.props.page + 1)}
            labelposition="before"
          >
            Next
          </Button>
        )}
      </Toolbar>
    );
  }
}

const mapStateToProps = state => ({ nextToken: state.nextToken });

export default connect(mapStateToProps)(CustomPagination);

最后，我将自定义分页组件传递到我的列表组件中：

import React from "react";
import { List, Datagrid, DateField, TextField, EditButton } from "react-admin";
import CustomPagination from "./pagination";

export const PackList = props => (
  <List {...props} pagination={<CustomPagination />}>
    <Datagrid>
    ...
    </Datagrid>
  </List>
);