如何测试Apollo Client的cache.modify？缓存未更新问题排查

可能原因及修复步骤 #

1. 测试缓存未预加载目标实体 #

测试环境的Apollo缓存里没有提前写入Workspace对象，导致cache.modify找不到对应实体，直接跳过了memberships字段的处理逻辑。

• 修复：测试初始化阶段，用cache.writeQuery把目标Workspace及关联的memberships数据写入缓存：

  // 测试前置代码
  cache.writeQuery({
    query: gql`
      query GetWorkspace($id: ID!) {
        workspace(id: $id) {
          id
          memberships {
            id
            __typename
          }
        }
      }
    `,
    variables: { id: workspaceId },
    data: {
      workspace: {
        __typename: "Workspace",
        id: workspaceId,
        memberships: [{ __typename: "Membership", id: "待删除的成员ID" }]
      }
    }
  });
  

2. Mutation返回数据结构不匹配 #

测试时mock的mutation返回数据和浏览器实际返回的结构不一致（比如data.deleteMembership缺失或id为空），会导致cache.modify的字段处理逻辑无法触发。

• 修复：确保mock的mutation返回符合预期的数据结构：

  // 测试中mock mutation
  mockMutation({
    request: { query: DELETE_MEMBERSHIP, variables: { id: "待删除的成员ID" } },
    result: {
      data: {
        deleteMembership: { id: "待删除的成员ID", __typename: "Membership" }
      }
    }
  });
  

3. Cache实体ID匹配失败 #

cache.identify生成的Workspace实体ID，和缓存中实际存储的ID不匹配（比如workspaceId变量在测试中未正确赋值、__typename拼写错误），导致cache.modify找不到目标实体。

• 修复：
  • 核对测试中workspaceId与写入缓存的Workspace ID是否一致；
  • 打印cache.identify({id: workspaceId, __typename: "Workspace"})和cache.extract()输出的缓存数据，确认实体ID完全匹配。

4. 未等待Mutation执行完成 #

测试中调用deleteMembership后立即断言缓存状态，此时mutation的update回调还未执行，导致断言结果不符合预期。

• 修复：用await等待mutation执行完成后再做断言：

  await deleteMembership({ variables: { id: "待删除的成员ID" } });
  // 后续检查缓存或页面状态
  

5. Apollo Client测试配置异常 #

测试用的Apollo Client实例可能未正确配置InMemoryCache，或禁用了缓存修改相关功能，导致cache.modify无法正常工作。

• 修复：确保测试用Client配置正确：

  const client = new ApolloClient({
    uri: "http://localhost:4000",
    cache: new InMemoryCache(),
    // 保留必要的默认配置，不要禁用缓存
  });
  

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