Apollo Client 中关于 @include 和 @nonreactive 指令的缓存驱逐问题分析

在 Apollo Client 的使用过程中，我们发现了一个特定场景下会导致应用崩溃的缓存处理问题。这个问题涉及到 GraphQL 查询中的 @include 和 @nonreactive 指令的特殊组合使用，以及缓存管理操作。

问题背景

当开发者同时使用 @include 指令和 @nonreactive 指令时，如果在查询执行过程中修改了变量并随后执行缓存驱逐操作，可能会导致 Apollo Client 抛出"Invalid variable referenced in @include directive"错误。这个错误无法通过常规的错误捕获机制处理，在 React Native 环境中会导致应用完全崩溃。

问题复现条件

要触发这个特定问题，需要满足以下所有条件：

1. 查询使用了 @include 指令，并且对应的变量通过查询级别的默认值设置
2. 查询中同时使用了 @nonreactive 指令
3. 使用 useQuery 钩子执行查询
4. 修改查询变量，新变量中不包含 @include 指令使用的变量
5. 使用 cache.evict 方法驱逐查询的某个字段
6. 随后调用 cache.gc 方法进行垃圾回收

技术原理分析

问题的根本原因在于 Apollo Client 内部变量处理的时序问题。当调用 observable.reobserve() 方法时，它会为 observable 设置新的变量，但没有应用查询级别的默认值。这是因为默认值处理逻辑位于 QueryManager 中，而不是 observable 内部。

在正常情况下，这种设计不会导致问题。但当查询包含 @nonreactive 指令时，Observable 需要使用新变量处理选择集，而此时变量缺少默认值。cache.gc 的调用触发了这一处理流程，最终导致了错误。

解决方案

Apollo Client 团队已经在新版本中修复了这个问题。修复方案的核心思想是在所有需要的地方都添加变量默认值处理逻辑，确保无论处理流程如何，变量都能获得正确的默认值。

这个修复已经包含在 Apollo Client 4.0.0-alpha.10 及更高版本中。开发者可以通过升级到最新版本来解决这个问题。

最佳实践建议

为了避免类似问题，开发者在使用 Apollo Client 时应注意：

1. 谨慎组合使用 @include 和 @nonreactive 指令
2. 在修改查询变量时，确保提供所有必要的变量值
3. 考虑在应用中使用错误边界来捕获可能的未处理错误
4. 定期升级 Apollo Client 版本以获取最新的错误修复

对于已经遇到此问题的开发者，建议优先考虑升级到包含修复的版本，而不是尝试自行解决。这个问题的修复涉及 Apollo Client 内部核心逻辑的修改，自行修补可能会引入其他不可预见的问题。