Question

由于数据量大，我需要为表增量加载数据。我可以使用以下方法限制和补偿通过Apollo客户端获取的数据：

export const QUERY = gql`
  query($limit: Int, $offset: Int) {
    customer_search(limit: $limit, offset: $offset) {
      //query here
    }
  }`

export default graphql(QUERY, {
  options: ({ pagination }) => ({
    fetchPolicy: 'cache-and-network',
    variables: {
      limit: pagination.limit,
      offset: 0
    },
  }),
  props({ data }) {
    return {
      data,
      loadMoreEntries: (pagination, pageIndex) => {
        return data.fetchMore({
          variables: {
            limit: pagination.limit,
            offset: pageIndex * 10
          },
          updateQuery: (prev, {fetchMoreResult}) => {
            if (!fetchMoreResult) return prev;
            return Object.assign({}, prev, {
              data: [...prev.viewer.customer_search.data, ...fetchMoreResult.viewer.customer_search.data]
            });
          }
        })
      }

    }
  }
})

我可以自定义我的React-Table以显示正确的页面数和用户当前所在的页面（即第1页，共5页）。

反应表

<ReactTable
  columns={columns}
  data={currentCustomers}
  expanderDefaults={{
    width: 175,
    resizeable: true,
  }}
  striped
  showPagination={count > 10 && true}
  pages={Math.ceil(count / 10)}
  page={page}
  onPageChange={(pageIndex) => {
    updatePage(pageIndex)
    loadMoreEntries(pagination, pageIndex)
  }}
/>

现在，我希望用户能够单击Next和Previous并为他们所在的页码显示正确的数据。我可以根据页面正确更改偏移量。我该如何实施？

使用Apollo Client进行React-Table分页

0 个答案: