Mutation and update cache

Open src/components/TodoPrivateList.vue and update the clearCompleted function as below

src/components/TodoPrivateList.vue

Copy
<script setup lang="ts">
import { computed, reactive } from "vue"
import TodoItem from "../components/TodoItem.vue"

import { useMutation, useQuery, useResult } from "@vue/apollo-composable"
+ import { DELETE_TODOS, SELECT_TODOS } from "../graphql-operations"

// Used in both query and mutation (refetch query variables)
const selectTodosVariables = {
    where: {
        is_public: { _eq: false },
    },
    order_by: {
        created_at: "desc",
    },
}

const privateTodosQuery = useQuery(SELECT_TODOS, selectTodosVariables)
const privateTodos = useResult(privateTodosQuery.result, [], (data) => data?.todos)

+ const deleteCompletedTodosMutation = useMutation(DELETE_TODOS, {
+     variables: {
+         where: {
+             is_completed: { _eq: true },
+             is_public: { _eq: false },
+         },
+     },
+     refetchQueries: [
+         {
+             query: SELECT_TODOS,
+             variables: selectTodosVariables,
+         },
+     ],
+ })

const state = reactive({
    type: "private",
    filterType: "all",
    filteredTodos: computed(() => {
        return privateTodos.value.filter((todo) => {
            switch (state.filterType) {
                case "completed":
                    return todo.is_completed
                case "active":
                    return !todo.is_completed
                default:
                    return true
            }
        })
    }),
    activeTodos: computed(() => privateTodos.value.filter((todo) => !todo.is_completed)),
    remainingTodos: computed(() => state.activeTodos.length),
})

function filterResults(type: string) {
    switch (type) {
        case "active":
            state.filterType = "active"
            break
        case "completed":
            state.filterType = "completed"
            break
        default:
            state.filterType = "all"
            break
    }
}

async function clearCompleted() {
    const isOk = window.confirm("Are you sure?")
    if (!isOk) return

+    const result = await deleteCompletedTodosMutation.mutate()
+    console.log("clear completed result", result)
+
+    if (deleteCompletedTodosMutation.error.value) {
+        console.error(deleteCompletedTodosMutation.error.value)
+    }
}
</script>

We are defining a mutation which deletes all todos which matches the following conditions: is_completed: true and is_public: false.

Again we are making use of useMutation() to execute the mutation.

That's a wrap of the todo app.