Mutaciones y actualización de la caché

Ahora vamos a realizar la parte de la integración. Abra src/components/Todo/TodoItem.js y añada el siguiente código en las demás importaciones:

Copy
+ import { gql } from "@apollo/client";

Vamos a definir la mutación de graphql para actualizar el estado completado de la tarea pendiente

src/components/Todo/TodoItem.js

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

  const removeTodo = (e) => {
    e.preventDefault();
    e.stopPropagation();
  };

+  const TOGGLE_TODO = gql`
+    mutation toggleTodo ($id: Int!, $isCompleted: Boolean!) {
+      update_todos(where: {id: {_eq: $id}}, _set: {is_completed: $isCompleted}) {
+        affected_rows
+      }
+    }
+  `;

  const toggleTodo = () => {};

  return (
    ...
  );
};

export default TodoItem;

Hook useMutation de Apollo con React

Necesitaremos utilizar el hook React useMutation para realizar la mutación.

Copy
  import React from 'react';
- import { gql } from "@apollo/client";
+ import { useMutation, gql } from "@apollo/client";

  const TodoItem = ({index, todo}) => {
    const removeTodo = (e) => {
      e.preventDefault();
      e.stopPropagation();
    };

    const TOGGLE_TODO = gql`
    mutation toggleTodo($id: Int!, $isCompleted: Boolean!) {
      update_todos(
        where: { id: { _eq: $id } }
        _set: { is_completed: $isCompleted }
      ) {
        affected_rows
      }
    }
  `;

+ const [toggleTodoMutation] = useMutation(TOGGLE_TODO);

  return (
    ...
  );
 };

 export default TodoItem;

Ya disponemos del controlador onChange toggleTodo para la entrada. Vamos a actualizar la función para hacer uso de la función de mutación toggleTodoMutation.

Copy
  const toggleTodo = () => {
+    toggleTodoMutation({
+      variables: {id: todo.id, isCompleted: !todo.is_completed},
+      optimisticResponse: true,
+    });
  };

El código anterior solo realizará una mutación, actualizando la propiedad is_completed en la base de datos. Para actualizar la caché, volveremos a utilizar la función update para modificar la caché. Necesitaremos obtener el actual listado de tareas pendientes de la caché, antes de modificarlo. Así que vamos a importar la consulta.

Copy
+ import {GET_MY_TODOS} from './TodoPrivateList';

Ahora vamos a añadir el código para la función update.

Copy
  const toggleTodo = () => {
    toggleTodoMutation({
      variables: {id: todo.id, isCompleted: !todo.is_completed},
      optimisticResponse: true,
+      update: (cache) => {
+        const existingTodos = cache.readQuery({ query: GET_MY_TODOS });
+        const newTodos = existingTodos.todos.map(t => {
+          if (t.id === todo.id) {
+            return {...t, is_completed: !t.is_completed};
+          } else {
+            return t;
+          }
+        });
+        cache.writeQuery({
+          query: GET_MY_TODOS,
+          data: {todos: newTodos}
+        });
+      }
    });
  };

Estamos obteniendo las tareas pendientes existentes de la caché, utilizando cache.readQuery y actualizando el valor is_completed para la tarea pendiente que hemos actualizado.

Por último, estamos escribiendo el listado de tareas pendientes actualizado en la caché, utilizando cache.writeQuery.