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

Question

我想直接使用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) })

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 客户端时：

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

---

关于为什么不允许故意querycache-and-network的一些解释。

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