如何在 ApolloClient.query() 上使用“缓存和网络”策略

Posted 2023-03-10

【中文标题】如何在 ApolloClient.query() 上使用“缓存和网络”策略

【英文标题】：How to use 'cache-and-network' policy on ApolloClient.query()

【发布时间】：2019-11-11 08:08:59

【问题描述】：

我正在使用 ApolloClient 构建一个应用程序来查询 GraphQL 端点。我希望在正常查询上使用“缓存和网络”获取策略，因为这个特定的策略只适用于 watchQueries。我真正想要的是以下内容：

如果我们可以查询服务器，我们会得到服务器的响应。

如果我们无法查询服务器，我们会从缓存中加载内容（如果已缓存）

这是我用来实例化 ApolloClient 的代码。

const defaultOptions =  
  watchQuery: 
    fetchPolicy: 'cache-and-network',
    errorPolicy: 'ignore',
  ,
  query: 
    fetchPolicy: 'network-only',
    errorPolicy: 'all',
  ,
  mutate: 
    errorPolicy: 'all'
  



const client = new ApolloClient(
  cache: cache,
  link: createUploadLink(
    uri: 'http://localhost:3000/graphql',
  ),
  defaultOptions
);

所以我认为我有两个选择：捕获第一个查询响应，如果失败则从缓存中加载内容，或者使用 watchQuery 方法发出查询。

我不知道该怎么做，所以欢迎任何帮助！

【问题讨论】：

@Daniel Rearden（再次）感谢您的帮助。为了解决这个问题，我昨晚没怎么睡。

可以查这个问题：***.com/q/57472440/6122411

【参考方案1】：

我最终忽略了构造函数中的 defaultOptions 对象。我根据网络状态在查询本身中定义 fetchPolicy。

function getZones() 
  return ApolloService.client.query(
    query: GET_ZONES_CLIENT,
    fetchPolicy: navigator.onLine ? 'network-only' : 'cache-only'
  )