Mutation and update cache

Open src/components/Todo/TodoPrivateList.svelte and add the bulk delete mutation.

src/components/Todo/TodoPrivateList.svelte

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

+  const CLEAR_COMPLETED = gql`
+    mutation clearCompleted {
+      delete_todos(
+        where: { is_completed: { _eq: true }, is_public: { _eq: false } }
+      ) {
+        affected_rows
+      }
+    }
+  `;
+
+  const clearCompletedTodos = mutation(CLEAR_COMPLETED);

update the clearCompleted function as below

Copy

const clearCompletedTodos = mutation(CLEAR_COMPLETED);

clearCompleted() {
+  clearCompletedTodos({
+    optimisticResponse: true,
+    update: (cache, {data}) => {
+      const existingTodos = cache.readQuery({ query: GET_MY_TODOS });
+      const newTodos = existingTodos.todos.filter(t => (!t.is_completed));
+      cache.writeQuery({query:GET_MY_TODOS, data: {todos: newTodos}});
+    }
+  });
}

That's a wrap of the todo app.