Escritura de datos - Mutaciones

Estos son los conceptos que debe conocer antes de abordar las mutaciones (ja, ja, ja):

Ahora, vamos a comenzar con cómo podemos utilizar GraphQL para «escribir» datos. Las mutaciones de GraphQL son tipos de consultas de GraphQL que pueden resultar de la «mutación» o cambios de su backend, al igual las API 'POST', 'PUT' , 'PATCH', 'DELETE' típicas.

Mutaciones básicas

Dado que estamos utilizando Hasura para nuestra API de GraphQL, obtendremos las mutaciones para inserciones, actualizaciones o eliminaciones que podamos utilizar en nuestra aplicación.

Vamos a probar esas mutaciones en el contexto de una aplicación de tareas pendientes para ver qué aspecto tienen las mutaciones. Las mutaciones obtenidas de otro servicio GraphQL, supongamos que el equipo de su API ha creado el suyo propio, podrían ser distintas.

Crear una tarea pendiente

Hagamos una llamada de API para crear una tarea pendiente. Como habrá podido adivinar, esto será una parte fundamental de nuestra app de tareas pendientes. 😉

Consejo: ahora supongamos que no conocemos el nombre de la mutación para crear una tarea pendiente. ¡GraphiQL al rescate! Diríjase a GraphiQL y, a la derecha, haga clic en la pestaña «docs». Escriba «todo» allí y verá una lista de tipos y consultas de GraphQL que utilizan tareas pendientes. Lea las descripciones y pronto verá que insert_todos es lo que necesita.

La mutación para crear tareas pendientes se titula insert_todos.

mutation {
insert_todos(objects: [{title: "new todo"}]) {
returning {
id
}
}
}
Pruébelo en GraphiQL

Devolución de datos tras la mutación

Observe que los datos de la tarea que va a insertarse se envían como argumento para la mutación insert_todos. Pero los «campos» de la mutación especifican la forma de la respuesta que queremos del servidor.

Digamos que nos gustaría obtener el objeto de tarea pendiente completo, una vez se haya creado como respuesta:

mutation {
insert_todos(objects: [{title: "new todo"}]) {
returning {
id
title
is_completed
is_public
created_at
}
}
}
Pruébelo en GraphiQL

Parametrizar lo que se inserta

Para mutaciones, casi siempre tendríamos que parametrizar los argumentos. Nosotros, raramente, si acaso, tenemos mutaciones «codificadas» en nuestra aplicación. Esto se debe a que los argumentos acerca de qué datos capturar, cómo modificar o eliminar algo suelen, a menudo, depender de alguna acción del usuario.

Ahora que ya sabemos cómo parametrizar utilizando variables de consulta, utilicémoslo:

# The parameterised GraphQL mutation
mutation($todo: todos_insert_input!){
insert_todos(objects: [$todo]) {
returning {
id
}
}
}
# As a query variable
{
"todo": {
"title": "A new dynamic todo"
}
}
Pruébelo en GraphiQL

Un poco más tarde, exploraremos más mutaciones para actualizar o eliminar datos. Este es un buen comienzo para comprender las mutaciones.

Resumen

  • Puede hacer mutaciones básicas de GraphQL
  • Puede pasar datos/argumentos dinámicos a mutaciones con variables de consulta

A continuación, veamos las suscripciones de GraphQL

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