useMutation para modificar datos
useMutation(MUTATION), mutate(), estrategias de actualización de caché y respuestas optimistas
useMutation para modificar datos es una lección gratuita de Vue Academy en CoddyKit. Esta es la lección 3 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de Vue Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de Vue Academy incluye 4 lecciones en total.
Cambiar datos con mutaciones
Las consultas leen datos; las mutaciones los cambian: crean, actualizan o eliminan datos. El composable useMutation ejecuta una mutación de GraphQL y proporciona una función mutate que puede llamar cuando esté preparada.
Uso básico de useMutation
Pase un documento de mutación. A diferencia de useQuery, no se ejecuta inmediatamente: devuelve una función mutate que debe invocar en respuesta a un evento.
import { useMutation } from '@vue/apollo-composable'
import { gql } from '@apollo/client/core'
const { mutate } = useMutation(gql(
'mutation { addPost { id } }'
))Activar la mutación
Llame a mutate() desde un controlador de eventos, como el envío de un formulario. Devuelve una Promise que se resuelve con el resultado.
async function submit() {
await mutate()
}Pasar variables
Pase un objeto de variables a mutate. El documento de la mutación las declara mediante la sintaxis $.
const { mutate } = useMutation(gql(
'mutation($title: String!) { addPost(title: $title) { id title } }'
))
function add(title) {
return mutate({ title })
}Carga y errores
useMutation también devuelve refs loading y error para que pueda deshabilitar el botón de envío y mostrar los errores.
<template>
<button :disabled="loading" @click="submit">Save</button>
<p v-if="error">{{ error.message }}</p>
</template>Reaccionar al éxito
El hook onDone se ejecuta después de una mutación exitosa: puede limpiar un formulario, mostrar un aviso o navegar a otra página.
const { mutate, onDone } = useMutation(ADD_POST)
onDone((res) => {
console.log('Created', res.data.addPost.id)
})Actualizar la caché
Después de una mutación, la caché de Apollo puede quedar desactualizada. La función update le permite modificar la caché directamente para que la interfaz refleje el cambio sin volver a consultar.
useMutation(ADD_POST, {
update(cache, { data }) {
const existing = cache.readQuery({ query: GET_POSTS })
cache.writeQuery({
query: GET_POSTS,
data: { posts: [...existing.posts, data.addPost] }
})
}
})Por qué update es mejor que refetch
Una actualización de la caché mediante update evita un viaje de red adicional. El nuevo elemento aparece al instante porque lo escribió en la caché de la que leen todos los useQuery.
Volver a consultar en su lugar
Si editar manualmente la caché resulta demasiado laborioso, use refetchQueries para volver a ejecutar consultas específicas cuando termine la mutación.
useMutation(ADD_POST, {
refetchQueries: [{ query: GET_POSTS }]
})Respuestas optimistas
Una optimisticResponse actualiza la interfaz antes de que responda el servidor, dando por hecho que la operación tendrá éxito. Si la solicitud falla, Apollo revierte el cambio automáticamente.
mutate(
{ title: 'New' },
{
optimisticResponse: {
addPost: { __typename: 'Post', id: 'temp', title: 'New' }
}
}
)Por qué importa la interfaz optimista
Las actualizaciones optimistas hacen que la aplicación parezca instantánea: el usuario ve que su acción tiene efecto de inmediato. Combinado con update, el elemento temporal se reemplaza por los datos reales del servidor cuando llegan.
Comprobación rápida
Compruebe sus conocimientos sobre las mutaciones.
Resumen
Ha aprendido sobre las mutaciones:
- useMutation devuelve una función mutate que se llama en respuesta a eventos.
- Pase variables a mutate(); use loading/error y onDone.
- La función update modifica la caché después de una mutación y evita volver a consultar.
- optimisticResponse actualiza la interfaz al instante y permite revertir el cambio automáticamente.
Preguntas frecuentes
¿La lección «useMutation para modificar datos» es gratis?
Sí — el texto completo de «useMutation para modificar datos» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de Vue Academy, actualiza a CoddyKit PRO. El curso de Vue Academy incluye 4 lecciones en total.
¿Qué aprenderé en «useMutation para modificar datos»?
useMutation(MUTATION), mutate(), estrategias de actualización de caché y respuestas optimistas Practicas Vue Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.
¿Necesito experiencia previa para empezar Vue Academy?
No se requiere experiencia previa. Vue Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 3 de 4.
¿Cuánto tiempo toma la lección «useMutation para modificar datos»?
La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.
¿Puedo escribir y ejecutar código en esta lección de Vue Academy?
Sí. Cada lección de Vue Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.
Todas las lecciones de este curso
- Configuración de Apollo Client en Vue 3
- useQuery para obtener datos
- useMutation para modificar datos
- Suscripciones en tiempo real con useSubscription