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

Question

Looking at Apollo link state I can see how to write/update a value to local store/cache by using a mutation or directly by using cache.writeData({ data }) .

But how do i retrieve that cached value directly to use as a variable for a mutation? Or do I need chain 2 queries using the @client on first one?

Note: if I use the ApolloProvider I get access to cache but it looks like this: {cache.cache.data.$ROOT.data.myVariable}

Answer 1

You could nest the Mutation component within a Query component. Like below. If you do it a lot then you could create your own wrapper component.

Or you could do a client.readQuery as seen in the docs here: 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>