3

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

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

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

4

2 回答 2

7

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

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

这是@Eitan Frailich 描述的使用 Apollo for Angular 的示例：

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'
            }
        }
        });
    }
}
于 2017-12-06T22:10:20.430 回答