如何在 graphql Apollo 客户端中实现基于光标的分页？答案

【问题标题】：How to implement cursor based pagination in graphql Apollo client?如何在 graphql Apollo 客户端中实现基于光标的分页？
【发布时间】：2020-06-30 16:31:41
【问题描述】：

我正在关注official docs 的基于游标的 Apollo 客户端实现。我已经完成了基于偏移的分页，但基于光标的分页似乎更适合我的情况。第一行给出一个错误

const { data: { comments, cursor }, loading, fetchMore } = useQuery( MORE_COMMENTS_QUERY );

cannot read property 'comments' of undefined。这一定是因为数据仍然未定义。是文档遗漏了什么还是我遗漏了什么？

【问题讨论】：

标签： react-native graphql apollo-client

【解决方案1】：

这是文档。您应该为数据提供默认值：

const { data: { comments, cursor } = {}, loading, fetchMore } = useQuery(...)

或者在访问它的属性之前检查它是否存在。

const { data, loading, fetchMore } = useQuery(...)
if (data) {
  const { comments, cursor } = data
}

首选后者，因为根据架构，查询可能会完成并且数据可能是null（如果响应中有错误），如果data，则不会应用默认值是null，仅当它是undefined。

【讨论】：

谢谢丹尼尔。现在第一部分正在工作。现在我在 Flatlist 的onEndReached 函数中遇到了一些问题。这似乎是由于cursor。这个cursor 是否需要作为数据的一部分从服务器返回，或者我们可以像const cursor = data.someFeild[someIndex].a 这样在客户端上计算它，然后在fetchMore() 中使用它