如何从 Apollo graphql 客户端状态中检索值答案

【问题标题】：How to retrieve value from Apollo graphql client state如何从 Apollo graphql 客户端状态中检索值
【发布时间】：2018-10-23 14:40:29
【问题描述】：

查看Apollo link state，我可以看到如何使用突变或直接使用cache.writeData({ data }) 将值写入/更新到本地存储/缓存。

但是我如何直接检索该缓存值以用作突变的变量？还是我需要在第一个上使用@client 进行链 2 查询？

注意：如果我使用 ApolloProvider，我可以访问缓存，但它看起来像这样：{cache.cache.data.$ROOT.data.myVariable}

【问题讨论】：

标签： javascript reactjs graphql apollo react-apollo

【解决方案1】：

您可以将 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>

【讨论】：

谢谢凯西，我认为这是最好的主意。请注意，我发现我几乎没有使用@client，因为我需要的一切都在缓存中，并且可以使用 cache-first 或 cache-only 的 fetchPolicy 调用