Mutation and update cache

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

+ import { gql } from "@apollo/client/core";

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

src/components/Todo/TodoItem.svelte

  import { gql } from "@apollo/client/core";

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

  const toggleTodo = () => {};

Apollo Mutation

We need to use mutation function from apollo-svelte to make the mutate function.

  import { gql } from "@apollo/client/core";
+ import { mutation } from "svelte-apollo";

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

+  const toggleTodoMutation = mutation(TOGGLE_TODO);

We already have the onChange handler toggleTodo for the input. Let's update the function to make a use of toggleTodoMutation mutate function.

  const toggleTodo = () => {
+    toggleTodoMutation({
+      variables: {id: todo.id, isCompleted: !todo.is_completed},
+      optimisticResponse: true,
+    });
  };

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 './queries';

Now let's add the code for update function.

  const toggleTodo = () => {
    toggleTodoMutation({
      variables: {id: todo.id, isCompleted: !todo.is_completed},
      optimisticResponse: true,
+      update: (cache) => {
+        const existingTodos = cache.readQuery({ query: GET_MY_TODOS });
+        const newTodos = existingTodos.todos.map(t => {
+          if (t.id === todo.id) {
+            return {...t, is_completed: !t.is_completed};
+          } else {
+            return t;
+          }
+        });
+        cache.writeQuery({
+          query: GET_MY_TODOS,
+          data: {todos: newTodos}
+        });
+      }
    });
  };