Apollo Client缓存已更新但UI未刷新，求排查方向

看起来你已经确认缓存更新成功，但组件没触发重渲染，结合PureComponent的特性和你的代码场景，咱们可以从这几个方向逐一排查：

1. 检查父组件传递的path引用是否未变化 #

PureComponent的核心是浅比较props，如果父组件传递给<Steps>的path对象引用还是旧的（即使内部steps数组是新的），浅比较会认为props.path没有变化，从而跳过重渲染。

验证方式： #

• 在父组件中添加日志，监听path的引用变化：

  // 类组件用componentDidUpdate，函数组件用useEffect
  useEffect(() => {
    console.log('父组件path引用更新:', path);
  }, [path]);
  

• 在Steps组件中添加日志，对比前后props的steps引用：

  componentDidUpdate(prevProps) {
    console.log('Steps组件steps引用变化:', prevProps.steps !== this.props.steps);
  }
  

如果日志显示steps引用变化为false，说明父组件传递的还是旧的path对象（内部steps没更新），或者path引用没变化但steps数组引用也没更新（不过你手动写了[...steps, addStep]，后者概率低）。

2. 确认父组件是否感知到缓存更新 #

如果父组件是通过一次性读取缓存（比如cache.readQuery/cache.readFragment）获取path，而非使用Apollo的查询钩子（useQuery/useLazyQuery），那么缓存更新后父组件不会自动重新读取数据，自然不会传递新的path给Steps组件。

排查方向： #

• 若父组件用的是cache.readFragment获取path，需要在手动更新缓存后重新读取一次缓存，并更新父组件的状态/变量，触发父组件重渲染。
• 若父组件用的是useQuery，检查query的fetchPolicy是否设置为cache-only？这种情况下Apollo可能不会自动监听缓存变化，改成cache-first（默认）试试。

3. 检查PathLogFragment的字段完整性 #

虽然你说缓存里能看到新增step，但要确认PathLogFragment是否完整包含了Steps组件需要的steps所有字段，以及是否正确匹配Path类型的结构。比如如果fragment里的steps字段缺少了某些子字段，或者__typename没正确设置，可能导致读取到的steps和实际缓存中的数据不一致。

验证方式： #

对比PathLogFragment的定义和Steps组件使用的steps结构，确保fragment里的steps展开了所有必要的字段：

fragment PathLogFragment on Path {
  __typename
  steps {
    # 确保这里包含Steps组件用到的所有字段
    id
    content
    # ...其他字段
  }
}

4. 验证addStep对象的结构合法性 #

如果新增的addStep对象缺少__typename或者字段类型不匹配，Apollo缓存可能无法正确识别它为Step类型，导致虽然写入了缓存，但读取时被过滤或者视为无效数据。

排查方向： #

检查addStep是否包含__typename: 'Step'（和你的Schema定义一致），并且所有必填字段都已填充：

const addStep = {
  __typename: 'Step',
  id: 'new-step-id',
  content: '...',
  // 其他必填字段
};

5. 绕开PureComponent的浅比较限制试试 #

如果前面的排查都没问题，可以暂时把Steps组件从PureComponent改成普通Component，看看是否能正常更新。如果改成普通Component后更新了，说明问题确实出在PureComponent的浅比较上。

解决方案： #

• 直接传递steps数组作为props，而非整个path对象：把父组件的调用改成<Steps steps={path.steps} />（其实你已经这么做了，但要确保steps是新数组引用）。
• 如果必须传递整个path，可以在父组件更新时生成新的path对象：比如const updatedPath = {...path, steps: [...path.steps, addStep]}，然后传递这个新对象。
• 或者给Steps组件自定义shouldComponentUpdate方法，手动比较steps数组的内容而非引用。

6. 检查render-props环节的引用捕获 #

如果传递path的过程中用到了render-props组件，要确保render函数没有捕获旧的path引用。比如如果render-props的函数没有依赖path，可能会一直使用初始渲染时的path：

错误示例： #

// 假设这个render函数在父组件初始化时创建，没有依赖path
<SomeRenderPropComponent render={() => <Steps steps={path.steps} />} />

修正方式： #

确保render函数能感知到path的变化，比如在函数组件中把path加入依赖数组（如果用的是useCallback），或者在类组件中在render方法内定义render-props函数，确保每次父组件渲染时都生成新的render函数。

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