Apollo Client cache-and-network策略挂载时为何绕过缓存？

针对你遇到的cache-and-network策略未返回缓存数据、首次渲染无内容的问题，可以从以下几个方向排查：

• 检查缓存匹配条件
  Apollo Client的缓存匹配依赖查询的完整唯一标识，包括查询名称、变量（类型和值必须完全一致）、上下文参数等。如果新组件的查询变量和之前缓存的查询变量存在差异（比如数字1和字符串"1"），就会被判定为新查询，不会命中缓存。可以通过Apollo DevTools的Cache标签，对比缓存中的数据条目和当前查询的变量是否完全匹配。

• 确认缓存中存在目标数据
  先通过Apollo DevTools确认对应查询的结果已经被正确写入缓存。如果之前的cache-first查询因为dataIdFromObject配置错误、实体ID不匹配，或者字段被排除在缓存外，导致数据根本没写入缓存，cache-and-network自然会直接走网络请求。

• 开启returnPartialData参数
  默认情况下，如果缓存中只有查询请求的部分字段数据，Apollo Client不会返回部分数据，而是直接发起网络请求。如果你的场景允许返回部分缓存数据，可以添加returnPartialData: true参数，让组件先渲染缓存中已有的数据，同时发起网络请求更新：

  const { data } = useYourGeneratedQuery({
    fetchPolicy: "cache-and-network",
    returnPartialData: true,
    variables: { /* 你的变量 */ }
  });
  

• 排查codegen生成的钩子
  查看codegen生成的钩子代码，确认它是否正确将fetchPolicy等参数传递给底层的Apollo Client查询方法。部分codegen配置可能会遗漏或覆盖参数，比如自定义插件、模板导致参数丢失。可以尝试手动编写一个简单的useQuery钩子（不使用codegen生成的），设置相同的cache-and-network策略，验证是否能正常命中缓存，以此区分是codegen还是Apollo Client的问题。

• 检查缓存配置的typePolicies
  如果你的Apollo Client配置了自定义typePolicies，要确认其中的read函数或字段策略没有阻止缓存数据的返回。比如错误的read逻辑强制返回null，会导致缓存数据无法被读取：

  const cache = new InMemoryCache({
    typePolicies: {
      Query: {
        fields: {
          yourTargetField: {
            read() {
              // 错误逻辑示例：阻止返回缓存数据
              return null;
            }
          }
        }
      }
    }
  });
  

  这类配置需要修正为正确的读取逻辑。

• 确认查询未被条件阻塞
  检查组件挂载时查询的skip参数是否为true，或者是否有其他条件逻辑导致查询延迟执行。如果查询没有立即触发，自然会出现首次渲染无数据的情况。

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