ミューテーションとキャッシュ更新

まずは統合を始めます。delete mutationを定義するために src/components/Todo/TodoItem.js を開いて、以下のコードを追加します。

src/components/Todo/TodoItem.js

Copy
const TodoItem = ({index, todo, client}) => {

+  const REMOVE_TODO = gql`
+    mutation removeTodo ($id: Int!) {
+      delete_todos(where: {id: {_eq: $id}}) {
+        affected_rows
+      }
+    }
+  `;

+  const [removeTodoMutation] = useMutation(REMOVE_TODO);

todoを削除するボタンクリックを処理するための関数が予め定義されています。その関数を更新して removeTodoMutationmutate関数を使ってみましょう。

Copy
  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}
+       });
+     }
+   });
  };