Apollo Client has a mutate method that is similar to the watchQuery method we used before. We provide it with the mutation mutationToggleItem that we defined above and we also give it the variables for the mutation.

In this case, we set the id of the item and we'll set the done variable to either true or false depending on what the previous value was.

The return value of the mutate method is an Observable so we need to subscribe to it to trigger it. I'm logging the response so you can see it in the Console and if there is an error that will be logged as well.

We don't need to manually update our in-memory cache because Apollo Client takes care of that for us. We defined in our mutation that the backend should send us back the id and the done properties. Apollo Client will automatically identify the item in the cache by the id and subsequently update the done property.

And here is the code that sends this mutation to the backend. Notice the update function where the cache is updated for the allItems query. We have to manually update the cache now to add the new item, Apollo Client does not do that automatically for you in the case of an insert or delete.

Change ItemsPage

We'll add a button in the nav bar to go to the NewItemPage dialog and we'll add the code to initiate the update and the delete mutations.

Add the following code to items.html. We'll have an Add (+) button in the header to add new items. To Delete an item, the user can slide to the left to see the Delete button and we'll update existing items when the checkbox value is changed.

Run the app with ionic serve and everything should work now, you can check if your mutations are updating data on the server in the Graphcool Console and you can use the Apollo Client Developer Tools Chrome extension to inspect the mutations and the cache on the client-side.

What's Next?

In the next part (coming soon) we'll have a look at how to implement real-time updates with GraphQL Subscriptions.

Download complete app source code

Enter your email address to download the source code for this tutorial.