Sign up for Hasura Newsletter
Loading...

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:

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

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

githubsrc/components/Todo/TodoItem.js
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.

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.

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.

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

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

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.

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
© 2022 Hasura Inc. All rights reserved
Github
Titter
Discord
Facebook
Instagram
Youtube
Linkedin