GraphQL Apollo Client游标分页实现报错：无法读取comments属性

这种情况我之前做Apollo分页时也踩过坑，大概率不是官方文档的疏漏，而是咱们没处理好Query的边界状态导致的～

核心原因 #

Apollo的useQuery钩子在请求还未完成（loading为true）时，返回的data是undefined。这时候直接尝试解构嵌套的data.comments和data.cursor，就会触发"无法读取undefined的属性"的错误——毕竟你没法从一个不存在的对象里读取子属性。

具体解决办法 #

我给你几个实用的处理方案，按优先级排序：

1. 先判断加载/错误状态再解构
   这是最稳妥的方式，先等请求完成、排除错误后再处理数据：

const { data, loading, fetchMore, error } = useQuery(MORE_COMMENTS_QUERY);

// 处理加载中状态
if (loading) return <div>加载评论中...</div>;
// 处理请求错误（比如权限问题、GraphQL语法错误）
if (error) return <div>请求失败：{error.message}</div>;

// 到这里data一定存在，放心解构
const { comments, cursor } = data;

2. 用默认值兜底解构
   如果不想写太多条件判断，可以给解构的data设置一个空对象默认值，避免undefined报错：

// 给data设置空对象兜底，即使data是undefined也不会触发报错
const { data: { comments, cursor } = {}, loading, fetchMore } = useQuery(MORE_COMMENTS_QUERY);

不过这种方式要注意：如果请求真的失败了，comments和cursor会是undefined，后续使用时还是要做判断。

3. 检查GraphQL查询的返回结构
   有时候不是状态的问题，而是你的查询返回结构和预期不符！比如后端的游标分页数据是嵌套在page字段里的，那你直接解构data.comments肯定会找不到：

# 假设你的查询是这样的
query MORE_COMMENTS_QUERY($cursor: String) {
  page(cursor: $cursor) {
    comments
    cursor
  }
}

这种情况你得先解构data.page，再取comments和cursor：

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

关于官方文档的补充 #

官方文档一般会默认开发者已经了解Apollo Query的基础状态处理（loading/error），所以不会在每个示例里都重复写这些边界判断。但实际开发中，这些状态处理是必不可少的，不然很容易出现这类低级报错～

内容的提问来源于stack exchange，提问作者rockfight