Mutation and update cache

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

githubsrc/components/TodoPrivateList.vue
clearCompleted: function() {
const isOk = window.confirm("Are you sure?");
if (isOk) {
// Remove all the todos that are completed
+ const CLEAR_COMPLETED = gql`
+ mutation clearCompleted {
+ delete_todos(where: {is_completed: {_eq: true}, is_public: {_eq: false}}) {
+ affected_rows
+ }
+ }
+ `;
+ this.$apollo
+ .mutate({
+ mutation: CLEAR_COMPLETED,
+ update: (cache, { data: { delete_todos } }) => {
+ if (delete_todos.affected_rows) {
+ const data = cache.readQuery({
+ query: GET_MY_TODOS,
+ });
+ data.todos = data.todos.filter((todo) => todo.is_completed !== true);
+ cache.writeQuery({
+ query: GET_MY_TODOS,
+ data
+ });
+ }
+ },
+ })
+ .catch(error => {
+ console.error(error);
+ });
}
}

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 this.$apollo.mutate to execute the mutation.

That's a wrap of the basic todo app.