Mutation and update cache

Now let's do the integration part. Open src/app/Todo/TodoItem.ts and add the following code below the other imports:

+ import { Apollo, gql } from 'apollo-angular';

Let's define the graphql mutation to update the completed status of the todo

githubsrc/app/Todo/TodoItem.ts
import { Component, Input } from '@angular/core';
import { Apollo, gql } from 'apollo-angular';
+ const TOGGLE_TODO = gql`
+ mutation toggleTodo ($id: Int!, $isCompleted: Boolean!) {
+ update_todos(where: {id: {_eq: $id}}, _set: {is_completed: $isCompleted}) {
+ affected_rows
+ }
+ }
+ `;

Apollo apollo.mutate

We need to call apollo.mutate to make the mutation.

import { Component, Input } from '@angular/core';
+ import { Apollo,gql } from 'apollo-angular';
export class TodoItem {
@Input() todo: any;
+ constructor(private apollo: Apollo) {}
...
}

We already have the onChange handler toggleTodo for the input. Let's update the function to make a mutation.

const toggleTodo = () => {
+ this.apollo.mutate({
+ mutation: TOGGLE_TODO,
+ variables: {id: this.todo.id, isCompleted: !this.todo.is_completed},
+ }).subscribe(({ data }) => {
+ console.log('got data', data);
+ },(error) => {
+ console.log('there was an error sending the query', error);
+ });
+ };

The above code will just make a mutation, updating the todo's is_completed property in the database. To update the cache, we will be using the update function again to modify the cache. We need to fetch the current list of todos from the cache before modifying it. So let's import the query.

+ import { GET_MY_TODOS } from './TodoPrivateList';

Now let's add the code for update function.

toggleTodo() {
this.apollo.mutate({
mutation: TOGGLE_TODO,
variables: { id: this.todo.id, isCompleted: !this.todo.is_completed },
+ update: (cache) => {
+ const existingTodos : any = cache.readQuery({ query: GET_MY_TODOS });
+ const newTodos = existingTodos.todos.map(t => {
+ if (t.id === this.todo.id) {
+ return { ...t, is_completed: !t.is_completed };
+ } else {
+ return t;
+ }
+ });
+ cache.writeQuery({
+ query: GET_MY_TODOS,
+ data: {todos: newTodos}
+ });
+ },
}).subscribe(({ data }) => {
console.log('got data', data);
},(error) => {
console.log('there was an error sending the query', error);
});
}

We are fetching the existing todos from the cache using cache.readQuery and updating the is_completed value for the todo that has been updated.

Finally we are writing the updated todo list to the cache using cache.writeQuery.

Did you find this page helpful?
Start with GraphQL on Hasura for Free
  • ArrowBuild apps and APIs 10x faster
  • ArrowBuilt-in authorization and caching
  • Arrow8x more performant than hand-rolled APIs
Promo
footer illustration
Brand logo
© 2024 Hasura Inc. All rights reserved
Github
Titter
Discord
Facebook
Instagram
Youtube
Linkedin