Apollo Client subscribeToMore订阅异常问题求助

看起来你遇到了一个典型的Apollo Client订阅缓存更新边界问题，我结合你的代码和现象帮你一步步分析解决方案：

核心问题分析 #

从你的描述来看，两个关键异常点：

1. 接收方Y的第一条消息能打印正确的prev和newDiscussion，但UI不更新
2. 第二条消息时prev变为undefined，触发Cannot read property 'getDiscussions' of undefined错误

这些问题大多和缓存更新的边界处理、订阅与查询的变量匹配有关，下面是具体的修复步骤：

1. 修复updateQuery的边界情况处理 #

你的当前代码没有处理prev为undefined的场景，也没有做重复消息校验，这会导致第二次订阅触发时缓存找不到对应条目而报错。修改后的updateQuery如下：

updateQuery: (prev, { subscriptionData }) => {
  // 先校验订阅数据的有效性，避免无效数据干扰
  if (!subscriptionData?.data?.DiscussionCreated) {
    return prev || { getDiscussions: [] };
  }

  const newDiscussion = subscriptionData.data.DiscussionCreated;

  // 处理缓存中无初始数据的情况
  if (!prev) {
    return { getDiscussions: [newDiscussion] };
  }

  // 避免重复添加相同消息（防止订阅重复触发或后端重复推送）
  const isDuplicate = prev.getDiscussions.some(d => d.id === newDiscussion.id);
  if (isDuplicate) {
    return prev;
  }

  // 返回新数组确保触发组件重渲染
  return {
    getDiscussions: [...prev.getDiscussions, newDiscussion]
  };
}

2. 确保订阅与查询的变量完全匹配 #

Apollo Client的subscribeToMore需要和对应的useQuery使用完全一致的变量，否则无法找到对应的缓存条目，导致prev为undefined。请检查：

• 组件中获取讨论列表的useQuery的variables是否和subscribeToMore中的{ authUserId: props.userId, groupId: props.groupId }完全一致
• 确认接收方Y的props.userId和props.groupId是正确的（比如Y的userId是自己的ID，而不是发送方X的）

3. 排查第一条消息UI不更新的问题 #

如果控制台能打印正确的合并后数组，但UI没变化，可能是以下原因：

• 组件重渲染被阻止：如果组件用了React.memo，请确认浅比较能识别getDiscussions的变化（Apollo会返回新数组引用，正常情况下浅比较能触发重渲染）
• 数据未直接使用缓存结果：检查组件是否把useQuery返回的data.getDiscussions复制到了本地state，且后续没有同步缓存更新
• 消息结构不匹配：确认订阅返回的newDiscussion字段和getDiscussions查询返回的条目结构完全一致（比如缺失某个必填字段会导致渲染失败）

4. 补充说明X能正常显示的原因 #

发送方X的UI正常更新，大概率是因为发送消息时的mutation已经更新了本地缓存，组件通过mutation的缓存更新触发了重渲染，而订阅的updateQuery可能因为检测到重复消息直接返回了prev，不会产生冲突。

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