javascript - 如何从 Apollo graphql 客户端状态中检索值
问题描述
查看Apollo 链接状态,我可以看到如何通过使用突变或直接使用cache.writeData({ data })
.
但是我如何直接检索该缓存值以用作突变的变量?或者我是否需要在第一个上使用@client 进行链 2 查询?
注意:如果我使用 ApolloProvider,我可以访问缓存,但它看起来像这样:{cache.cache.data.$ROOT.data.myVariable}
解决方案
您可以将 Mutation 组件嵌套在 Query 组件中。如下所示。如果您经常这样做,那么您可以创建自己的包装器组件。
或者您可以client.readQuery
按照此处文档中的说明进行操作:https ://www.apollographql.com/docs/react/advanced/caching.html#readquery 。
const ADD_TODO = gql`
mutation addTodo($type: String!) {
addTodo(type: $type) {
id
type
}
}
`;
<Query query={gql`
{
myVariable @client
}
`>
{({ data: { myVariable }}) => {
return (
<Mutation mutation={ADD_TODO}>
{(addTodo, { data }) => (
<div>
<form
onSubmit={e => {
e.preventDefault();
addTodo({ variables: { type: myVariable } });
input.value = "";
}}
>
<input
ref={node => {
input = node;
}}
/>
<button type="submit">Add Todo</button>
</form>
</div>
)}
</Mutation>
</Query>
推荐阅读
- reactjs - 为什么异步测试中的“then”部分开玩笑地失败了?
- javascript - 三元运算符不返回未定义
- maven - 将存储库从 Sonatype Nexus 2.8.0-05 迁移到 3.x
- javascript - Codeigniter 中的登录表单问题
- html - 为什么我的页面在 Chrome 上看起来不错,但在 Firefox 上却不行?
- javascript - 单击按钮删除 div(更改 id)
- node.js - 如何使用 jest 测试电子 ipc 事件?
- javascript - 带有 AJAX 的 POST 文件数据附加了未知的 jquery 回调字符串
- python - 如何将复杂的double转换为python数组
- javascript - 退出搜索结果页面后获取上一个搜索结果