Mutation and update cache

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

githubsrc/components/TodoPrivateList.vue
<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.

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
graphql-handbook