Apollo-Client

时间:2017-08-03 23:56:58

标签: pagination graphql react-apollo graphene-python

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

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

enter image description here

当我在渲染时间从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来获得对传播数据的细粒度控制。这一步就解决了。现在只需要调查实际的分页机制。

1 个答案:

答案 0 :(得分:0)

所以我在这里缺少的两件大事是,首先,如上所述,我需要利用componentWillUpdate来更好地控制数据流。

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

这是一个看起来像什么的片段,



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,它应该能够告诉我数据的界限。

希望这有助于某人。