Mutation and update cache

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

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

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.

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