Mutation and update cache
Now let's do the integration part. Open src/components/Todo/TodoItem.svelte
and add the following code to define the delete mutation
+ const REMOVE_TODO = gql`+ mutation removeTodo($id: Int!) {+ delete_todos(where: { id: { _eq: $id } }) {+ affected_rows+ }+ }+ `;++ const removeTodoMutation = mutation(REMOVE_TODO);
We have a function defined to handle the button click to remove a todo. Let's update the function to use removeTodoMutation
mutate function.
const removeTodo = (e) => {e.preventDefault();e.stopPropagation();+ removeTodoMutation({+ variables: {id: todo.id},+ optimisticResponse: true,+ update: (cache) => {+ const existingTodos = cache.readQuery({ query: GET_MY_TODOS });+ const newTodos = existingTodos.todos.filter(t => (t.id !== todo.id));+ cache.writeQuery({+ query: GET_MY_TODOS,+ data: {todos: newTodos}+ });+ }+ });};
Did you find this page helpful?
Start with GraphQL on Hasura for Free
- Build apps and APIs 10x faster
- Built-in authorization and caching
- 8x more performant than hand-rolled APIs