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

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

虽然试图按照Apollo文档http://dev.apollodata.com/react/pagination.html#numbered-pages实现偏移分页，但仍然出现我的查看器未定义的错误。

，当我访问从道具的数据中渲染时，只有此错误引用，当我试图实现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获取对传播数据的细粒度控制。所以这一步解决了。现在只需要调查实际的分页机制。

来源

2017-08-03 Scot Matson

因此，我在这里失踪的两大块是第一，如上所述，我需要利用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，它应该能够让我知道数据的边界。

希望这可以帮助别人。

来源

2017-08-04 01:49:15

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

回答

相关问题