Как разбить списки реагирующих администраторов на страницы, если общее количество неизвестно?

Question

Сводка : я не могу получить общее количество записей с моей конечной точки GraphQL.Я знаю только, достиг ли я конца моего списка записей GraphQL, когда анализирую ответ от конечной точки.Как я могу сделать так, чтобы мой пользовательский компонент разбивки на страницы знал, что он находится на последней странице?

Подробности : я использую React Admin с AWS AppSync (GraphQL на DynamoDB), используя ra-data-graphql.AppSync не может сообщить вам общее количество записей, доступных для запроса списка, а также ограничивает количество записей, которые вы можете вернуть, до 1 МБ полезной нагрузки.Вместо этого он включает значение nextToken, если есть еще записи для запроса, которые вы можете включить в последующие запросы списка.

Я создал пользовательский компонент разбиения на страницы, который использует только ссылки "prev" и "next"это нормально.Но мне нужно знать, когда отображается последняя страница.Прямо сейчас я знаю это только в функции parseResponse(), которую я передаю в buildQuery() для запроса списка.На данный момент у меня есть доступ к значению nextToken.Если он пуст, я получил последнюю страницу результатов из AppSync.Если бы я мог передать это значение или даже логическое значение, например lastPage, в пользовательский компонент нумерации страниц, я был бы готов.Как я могу сделать это в React Admin?

Answer 1

Для этого я создал пользовательский редуктор, nextTokenReducer, который ищет действие CRUD_GET_LIST_SUCCESS React Admin, полезной нагрузкой которого является полный ответ от конечной точки 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 в его реквизитах:

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