Apollo Client查询网络面板有数据，控制台部分字段自动为null求助

我之前也碰到过一模一样的情况——明明浏览器网络面板里能看到完整的返回数据，代码里打印出来却总有字段变成null，大概率是Apollo Client的缓存处理、字段匹配或者链路配置出了问题，咱们一步步排查：

1. 先查字段匹配是否一致 #

最常见的诱因就是GraphQL查询的字段和后端返回的不匹配：

• 检查字段名的大小写（比如后端返回user_name，你查询的是userName，但没开启自动驼峰转换）
• 确认嵌套字段的层级完全对应，比如你查的是author.name，但后端返回的是author.fullName
• 核对字段类型是否匹配（比如后端返回数字类型的id，你前端定义成字符串类型，可能导致解析异常）

2. 排查InMemoryCache的缓存策略 #

Apollo的默认缓存对某些特殊字段（比如嵌套对象、联合类型、可选字段）的处理可能有问题，导致字段被置为null：

• 可以先临时禁用缓存测试，把fetchPolicy改成no-cache（区别于network-only，no-cache不会把网络数据写入缓存），看打印结果是否正常：

apollo.defaultOptions = {
  watchQuery: {
    fetchPolicy: "no-cache",
    errorPolicy: "ignore",
  },
  query: {
    fetchPolicy: "no-cache",
    errorPolicy: "all",
  },
};

• 如果禁用缓存后恢复正常，那就是缓存策略的问题，需要自定义typePolicies指定字段的处理逻辑，比如对出问题的类型设置字段的merge策略：

cache: new InMemoryCache({
  typePolicies: {
    // 替换成你出问题的GraphQL类型名称，比如Article
    Article: {
      fields: {
        // 替换成出问题的字段名，比如content
        content: {
          merge(existing, incoming) {
            // 直接使用网络返回的最新值，不合并旧缓存
            return incoming;
          }
        }
      }
    }
  }
}),

3. 检查链路中间件的干扰 #

你配置了errorLink和uploadLink，有可能是链路中间件在处理响应时意外修改了数据：

• 可以临时注释掉errorLink，只保留uploadLink测试，看是否还会出现null字段
• 检查errorLink的逻辑，有没有在处理错误时误改了响应数据

4. 查看隐藏的解析错误 #

你设置了errorPolicy: "all"，可以在查询回调里打印errors字段，看是否有字段解析的隐藏报错：

client.query({
  query: YOUR_QUERY
}).then(result => {
  console.log('查询结果:', result.data);
  console.log('查询错误:', result.errors); // 这里可能有字段解析的细节报错
});

如果以上方法都没解决，推荐打开Apollo DevTools（你已经开启了connectToDevTools: true），对比缓存中的数据和网络返回的内容，能直观看到缓存处理时哪里把字段改成了null。

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