如何通过 fetchPolicy='cache-and-network' 直接使用 apollo-client API 进行查询?
Posted
技术标签:
【中文标题】如何通过 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。
效果和我预期的一样好。非常感谢,卡斯莉!以上是关于如何通过 fetchPolicy='cache-and-network' 直接使用 apollo-client API 进行查询?的主要内容,如果未能解决你的问题,请参考以下文章
Apollo 客户端 fetchPolicy 问题 - 查询调用了两次
将 fetchPolicy 设置为“standby”时无法调用 client.watchQuery - 从 useLazyQuery 加载页面时引发错误
在 apollo-client 的 useQuery 中使用 fetchPolicy='cache-and-network' 不会更新 fetch 上的缓存更多