[英]How to use localStorage with apollo-client and reactjs?
[英]How to use apollo-client API directly to query with fetchPolicy='cache-and-network'?
我想直接使用 fetchPolicy 'cache-and-network' 将 apollo 缓存与 apollo-client api 一起使用。 似乎我们必须使用 watchQuery api 而不是查询,但不幸的是我无法让它工作。
所以你们能给我一些示例代码来使用'watchQuery'来获取我们从'query'中得到的数据:loading、data、networkStatus...?
client.query({ query: Query.getUserById, fetchPolicy: 'cache-and-network', variables: { userId } }).then(data => { console.log(data.loading, data.getUserById) })
我认为apollo已经为所有操作提供了任何配置,包括fetch-policy
并且它的文档主要涵盖了所有用例
你能提供你的代码吗? 我想知道为什么当您使用另一种类型的cache
时Query
不起作用
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
});
关于为什么故意不允许query
cache-and-network
一些解释。
原因在 2019 年在这里进行了解释: https : //github.com/apollographql/apollo-client/issues/3130#issuecomment-478409066
基本上, query()
的行为/逻辑不支持这种获取策略。 因此,他们在打字级别阻止了它。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.