watchQuery (Angular-Apollo) 的缓存管理

Posted 2023-03-08

【中文标题】watchQuery (Angular-Apollo) 的缓存管理

【英文标题】：Cache management for watchQuery (Angular-Apollo)

【发布时间】：2017-07-05 14:27:48

【问题描述】：

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

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

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

【参考方案1】：

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

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

【讨论】：

你能举个例子吗？

【参考方案2】：

这是一个使用 Apollo for Angular 的示例，如 @Eitan Frailich 所述：

import  ApolloModule, Apollo  from 'apollo-angular';
import  HttpLinkModule, HttpLink  from 'apollo-angular-link-http';
import  InMemoryCache  from 'apollo-cache-inmemory';

class AppModule 
    constructor(apollo: Apollo, httpLink: HttpLink) 
        apollo.create(
            link: httpLink.create(),
            cache: new InMemoryCache(),
            defaultOptions: 
            watchQuery: 
                fetchPolicy: 'cache-and-network',
                errorPolicy: 'ignore',
            ,
            query: 
                fetchPolicy: 'network-only',
                errorPolicy: 'all',
            ,
            mutate: 
                errorPolicy: 'all'
            
        
        );