angular - watchQuery 的缓存管理 (Angular-Apollo)

Question

我在使用 Apollo 和 Angular 2 组合分页、预取和重新获取数据时遇到问题。我在应用程序中的预期行为是服务器和客户端之间的数据永远不应该有任何差异。我想通过在菜单中的鼠标悬停时预取数据来减少用户的加载时间，并在每个组件中都有一个旋转器/加载屏幕，隐藏内容直到获取数据。如果已经访问过某个组件，我想在鼠标悬停时触发重新获取而不是预取，以便客户端与服务器匹配。

今天，如果我导航到一个组件并分页到显示该数据集的第三页，然后导航到另一个组件，然后再次返回到第一个组件(在完成获取新数据之前) )我从第三页获取缓存数据，这会触发微调器隐藏，并在订阅获取“正确”数据之前显示错误的数据集一/几秒钟。

我的问题是:有什么方法可以清除/控制特定查询/watchQuery 的缓存，以便我始终确保不在客户端中显示缓存数据？

Answer 1

是的，您可以将 fetchPolicy 选项传递给 watchQuery:

• { fetchPolicy: 'cache-first' }:这是 Apollo 客户端在未指定获取策略时使用的默认获取策略。首先，它将尝试从缓存中完成查询。仅当缓存查找失败时才会向服务器发送查询。
• { fetchPolicy: 'cache-only' }:使用此选项，Apollo 客户端将尝试仅从缓存中完成查询。如果缓存中并非所有数据都可用，则会抛出错误。这相当于前面的noFetch。
• { fetchPolicy: 'network-only' }:使用此选项，Apollo 客户端将绕过缓存，直接将查询发送到服务器。这相当于前面的forceFetch。
• { fetchPolicy: 'cache-and-network' }:使用此选项，Apollo 客户端将查询服务器，但在服务器请求挂起时从缓存返回数据，然后更新服务器响应返回后的结果。