Apollo 客户端中基于偏移量的分页错误答案

【问题标题】：Offset-based Pagination Errors in Apollo-ClientApollo 客户端中基于偏移量的分页错误
【发布时间】：2018-01-11 18:32:59
【问题描述】：

由于分页的处理方式，最近决定将我的 Relay Client 转换为 Apollo。我正在开发的应用程序需要基于偏移的分页，这在 Apollo 中得到了更好的支持。

在尝试按照 Apollo 文档 http://dev.apollodata.com/react/pagination.html#numbered-pages 实现偏移分页时，但继续收到我的查看器未定义的错误。

当我在渲染期间从 props 访问数据时引用此错误，并且仅在我尝试实现 fetchMore 函数时发生。我感觉这与我的设置有关，因为我在 GraphQL 查询中使用了 viewer 入口点，但尽管尝试修改设置，但错误仍然存在。

... ... ...
105   props: ({ data: { loading, viewer, fetchMore }}) => ({
106     loading,
107     viewer,
108     loadMoreEntries() {
109       return fetchMore({
110         variables: {
111           offset: viewer.allSweeps.edges.length
112         },
113         updateQuery: (previousResult, { fetchMoreResult }) => {
114           if (!fetchMoreResult) { return previousResult; }
115           return Object.assign({}, previousResult, {
116             viewer: [...previousResult.allSweeps, ...fetchMoreResult.allSweeps]
117           });
118         }
119       });
120     }
... ... ..

编辑 1：到目前为止，此错误似乎与生命周期问题有关。进行一些调试时，我注意到当执行简单查询时存在先前的数据时，这种分页方法导致初始道具加载而查看器中没有任何数据。

希望使用一种 React 生命周期方法来跟踪此更改，看看我是否可以将数据分配给变量。但是，仍然不确定此方法是否设置正确。在我确定之前需要获取数据，然后尝试分页。

编辑 2：能够使用 componentWillUpdate 来获得对正在传播的数据的细粒度控制。这样这一步就解决了。现在只需要研究实际的分页机制。

【问题讨论】：

标签： pagination graphql react-apollo graphene-python

【解决方案1】：

所以我在这里缺少的两个重要部分是第一，如上所述，我需要利用 componentWillUpdate 来更好地控制数据流。

更重要的是我没有意识到 updateQuery 的返回值需要像我的架构一样格式化并包含 __typenames。

这是sn-p的样子，

136         updateQuery: (previousResult, { fetchMoreResult }) => {
137           if (!fetchMoreResult) { return previousResult; }
138           const newEdges = fetchMoreResult.viewer.allSweeps.edges;
139           return {
140             viewer: {
141               __typename: previousResult.viewer.__typename,
142               allSweeps: {
143                 __typename: previousResult.viewer.allSweeps.__typename,
144                 edges: [...newEdges]
145               }
146             }
147           }

唯一的问题是 fetchMore 似乎更针对无限分页，这并不是我真正想要的。我可以让事情变得更简单一些，只坚持偏移/限制的状态管理，并使用简单的查询来获得所需的结果。但是这里提供了一些我喜欢的便利，例如 fetchMoreResult，它应该能够让我知道我的数据的范围。

希望这对某人有所帮助。

【讨论】：