Mutation process in Apollo

Question

This is my code so far:

<Mutation mutation={addUserQuery}>
{

(addUser, data)=>{
console.log(data)
return (

  <div className="form">
  <form onSubmit={(e)=>{

  e.preventDefault();
  console.log(e);
  addUser({variables: {username: "AuraDivitiae", 
                          firstname: "Michael", 
                          lastname: "Lee"}})

  }}>

  <button type="submit">Add User</button>
  </form>         
  </div>

)
}

}
</Mutation>

What does Apollo do when a mutation component mounts?
I feel like I don't really understand the processes running inside Apollo.
Does Apollo subscribe to the result of the mutation query?
Does it then update the cache on returning?
Is Data then stored in some components state?

I feel like the documentation doesn't provide enough information sometimes...

xadm xadm · Accepted Answer · 2018-09-17T23:33:26

<Mutation/> component is ... a normal react component - it has own state, lifecycles, it's using apollo client (and its cache), keeps data.

It's probably a bit confusing that being in render we have rerenderings not caused by setState of our component.

If <Mutation/> is a component then de facto your inner content is rendered by render function of <Mutation/>, not in our component (it only renders <Mutation/> component). This is an additional depth level in components tree structure (with own lifecycles).

Mutation process in Apollo

1 Answers