Apollo Client 中数组元素更新后组件未重新渲染的解决方案

在使用 Apollo Client 进行 GraphQL 数据管理时，开发者可能会遇到一个常见问题：当数组中的元素被更新后，依赖该数据的 React 组件没有按预期重新渲染。这种情况通常发生在使用 mutation 更新数组元素时。

问题现象

开发者通过 useQuery 获取了一个包含用户数组的评估数据，数据结构大致如下：

{
  assessment: {
    id: 'uuid',
    users: [{id: 'uuid', name: 'test', ...}]
  }
}

当执行更新用户的 mutation 后，虽然 Apollo 缓存中的数据确实更新了，但依赖该数据的 React 组件却没有触发重新渲染。开发者通过 console.log 确认组件没有重新执行。

问题根源

经过深入分析，这个问题主要有两个潜在原因：

1. 字段不匹配：mutation 返回的用户数据字段比查询请求的字段少。如果 mutation 只返回了用户的 id 和 name，而查询请求了更多字段（如 email 等），Apollo Client 会认为数据不完整而不触发重新渲染。

2. 缓存更新策略：默认情况下，Apollo Client 不会自动将 mutation 返回的 users 数组与查询中的 assessment.users 数组关联起来。缓存系统无法自动识别这两个字段代表的是同一数据。

解决方案

方案一：确保字段完整

确保 mutation 返回所有查询请求的字段。如果查询需要用户的 id、name 和 email，那么 mutation 也应该返回这些完整字段：

mutation UpdateUsers {
  updateUsers(params...) {
    id
    users {
      id
      name
      email  # 确保包含所有需要的字段
    }
  }
}

方案二：手动缓存更新

当无法修改 mutation 返回的字段时，可以使用 Apollo Client 的缓存 API 手动更新缓存：

const [updateUsers] = useMutation(UPDATE_USERS_MUTATION, {
  update(cache, { data: { updateUsers } }) {
    cache.modify({
      id: cache.identify({
        __typename: 'Assessment',
        id: assessmentId
      }),
      fields: {
        users(existingUsers = []) {
          // 实现自定义更新逻辑
          return [...existingUsers, ...updateUsers.users];
        }
      }
    });
  }
});

方案三：调整 fetchPolicy

在某些情况下，调整查询的 fetchPolicy 可能有帮助：

const { data } = useQuery(GET_ASSESSMENT, {
  variables: { id },
  fetchPolicy: 'cache-and-network'
});

最佳实践

1. 保持 mutation 和 query 的字段一致性
2. 对于复杂的数据更新，优先考虑手动缓存更新
3. 合理设置 fetchPolicy 以满足应用需求
4. 使用 Apollo Client DevTools 检查缓存状态

通过理解 Apollo Client 的缓存机制和更新策略，开发者可以有效地解决数组更新后组件不重新渲染的问题，确保应用状态的正确同步。