如何通过 fetchPolicy='cache-and-network' 直接使用 apollo-client API 进行查询？

Posted 2023-03-10

【中文标题】如何通过 fetchPolicy=\'cache-and-network\' 直接使用 apollo-client API 进行查询？

【英文标题】：How to use apollo-client API directly to query with fetchPolicy='cache-and-network'?如何通过 fetchPolicy='cache-and-network' 直接使用 apollo-client API 进行查询？

【发布时间】：2020-01-04 04:57:36

【问题描述】：

我想直接使用 fetchPolicy 'cache-and-network' 来使用 apollo 缓存和 apollo-client api。似乎我们必须使用 watchQuery api 而不是查询，但不幸的是我无法让它工作。

那么你们能否给我一些示例代码来使用“watchQuery”来获取我们从“查询”中获得的数据：加载、数据、网络状态...？

client.query( query: Query.getUserById, fetchPolicy: 'cache-and-network', variables: userId ).then(data => console.log(data.loading, data.getUserById) )

【参考方案1】：

2021：

如果你使用 react，useQuery() 钩子已经在关注 watchQuery 而不是 query 的行为。所以你可以这样做：

  const  loading, error, data, refetch  = useQuery(query, 
    fetchPolicy: "cache-and-network"
  );

或者在创建apollo客户端的时候设置为defaultOptions：

import 
  ApolloClient,
  InMemoryCache,
  HttpLink,
  DefaultOptions
 from "@apollo/client";

const defaultOptions: DefaultOptions = 
  watchQuery: 
    fetchPolicy: "cache-and-network",
    errorPolicy: "ignore",
    notifyOnNetworkStatusChange: true
  
;
export const platformClient = new ApolloClient(
  link: new HttpLink(
    uri: "https://xxxxx",
    credentials: "same-origin"
  ),
  cache: new InMemoryCache(),
  defaultOptions
);

---

关于为什么cache-and-network 不允许用于query 的一些解释。

原因早在 2019 年就在此处进行了解释： https://github.com/apollographql/apollo-client/issues/3130#issuecomment-478409066 基本上，query() 的行为/逻辑不支持这种获取策略。所以，他们在打字级别阻止它。

【参考方案2】：

我认为apollo 已经为所有操作提供了任何配置，包括fetch-policy，它的文档主要涵盖了所有用例

你能提供你的代码吗？我想知道为什么当您使用另一种类型的cache 时Query 不起作用

【讨论】：

刚刚添加了一些关于我如何直接使用 apollo-client 查询的代码。对于来自 'react-apollo' 的 组件，它肯定运行良好。但是我不能在我的组件中使用它，因为每次渲染方法运行时都会调用它。所以它被调用了这么多次:(也许我已经以错误的方式使用它了。

不是你用错了。我认为这是他们在Query 组件中解决的错误，因为当我通过@graphql() 设置获取策略并使用Query 组件解决它时，我也遇到了这个问题。您是否尝试过使用异步等待？您可以尝试使用refetch 我认为它会起作用。所以你使用 renderProps，并将refetch 传递给你的component。或者你也可以使用 apollo-hooks :)

我不知道在这种情况下如何使用异步等待。对于使用 refetch，是的，当我通过 HOC 使用 graphql（来自'react-apollo）时效果很好。但是有一些问题： 1.创建组件时会自动调用该查询->冗余查询，我不想在这里调用该查询。 2.当时查询的变量不可用，我要传递一些错误的数据。那么如果有 2 个不同的 refetch 查询，我同时调用它们，这里就会出现一些意想不到的结果。

我明白了，尝试阅读这篇文章dev.to/bdbch/automatically-watch-queries-in-apollo-graphql-n45。

效果和我预期的一样好。非常感谢，卡斯莉！