Mutation and update cache

Now let's do the integration part. Open src/components/TodoItem.vue and add the following code below, to define a mutation that will update the is_completed status of a todo:

src/components/TodoItem.vue

Copy
<script setup lang="ts">
+ import { useMutation } from "@vue/apollo-composable"
+ import { UPDATE_TODO_BY_PK } from "../graphql-operations"

const { todos, type } = defineProps(["todos", "type"])

+ const updateTodo = useMutation(UPDATE_TODO_BY_PK)
</script>

We need to call updateTodo.mutate() to make the mutation.

Copy
<template>
    <ul>
        <li v-for="todo in todos" v-bind:key="todo.id">
            <div v-if="todo.is_public" class="userInfoPublic">
                <p>@{{ todo.user.name }}</p>
            </div>
            <div class="view" v-if="type === 'private'">
                <div class="round">
                    <input type="checkbox" :id="todo.id" :checked="todo.is_completed" />
-                    <label :htmlFor="todo.id" />
+                    <label
+                        @click="
+                            updateTodo.mutate({
+                                pk_columns: { id: todo.id },
+                                _set: { is_completed: !todo.is_completed },
+                            })
+                        "
+                        :htmlFor="todo.id"
+                    />
                </div>
            </div>
            <div class="labelContent">
                <p :style="todo.is_completed ? 'text-decoration: strikethrough' : ''">
                    {{ todo.title }}
                </p>
            </div>
            <button v-if="type === 'private'" class="closeBtn">x</button>
        </li>
    </ul>
</template>