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

Question

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

所以你们能不能给我一些示例代码来使用 'watchQuery' 来获取我们从 'query' 获得的数据：加载、数据、网络状态...？

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

Answer 1

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

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

时 Query 不起作用

Answer 2

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() 的 behaviour/logic 不支持这种抓取策略。因此，他们在打字级别阻止了它。

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

How to use apollo-client API directly to query with fetchPolicy='cache-and-network'?

reactjs

react-apollo

apollo-client