Question

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

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

我的问题是：有没有办法清除/控制特定查询/ watchQuery的缓存，这样我总是可以确保不在客户端显示缓存数据？

Answer 1

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

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

Answer 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'
            }
        }
        });
    }
}

watchQuery的缓存管理（Angular-Apollo）

2 个答案: