Mutation and update cache

Now let's do the integration part. Open src/app/Todo/TodoItem.ts and add the following code to define the delete mutation

src/app/Todo/TodoItem.ts

Copy
import { GET_MY_TODOS } from './TodoPrivateList'

const TOGGLE_TODO = gql`
  mutation toggleTodo ($id: Int!, $isCompleted: Boolean!) {
    update_todos(where: {id: {_eq: $id}}, _set: {is_completed: $isCompleted}) {
      affected_rows
    }
  }
  `
+  const REMOVE_TODO = gql`
+    mutation removeTodo ($id: Int!) {
+      delete_todos(where: {id: {_eq: $id}}) {
+        affected_rows
+      }
+    }
+  `;

We have a function defined to handle the button click to remove a todo. Let's update the function to add apollo.mutate code.

Copy
  removeTodo(e) {
    e.preventDefault();
    e.stopPropagation();
+   this.apollo.mutate({
+     mutation: REMOVE_TODO,
+     variables: { id: this.todo.id },
+     optimisticResponse: {},
+     update: (cache) => {
+       const existingTodos: any = cache.readQuery({ query: GET_MY_TODOS });
+       const newTodos = existingTodos.todos.filter(t => (t.id !== this.todo.id));
+       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);
+   });
  }