useMutation useMutation: Operações de Escrita

Última atualização: 2026-11-03

useMutation useMutation: Operações de Escrita

useMutation gerencia o estado assíncrono de operações de escrita (POST, PUT, DELETE): mutate dispara a requisição, isPending e isError reportam o progresso, e onSuccess invalida as queries relacionadas para que a lista se atualize sozinha. Ele não faz cache de dados, apenas gerencia esse único envio. Essa divisão de trabalho é o que torna query e mutation um par natural. Você também pode passar callbacks por chamada, então uma única instância de hook pode servir vários formulários diferentes sem compartilhar seus estados.

ℹ️ Informação O editor transpila JSX para JavaScript e renderiza a UI real na sandbox; os componentes são montados automaticamente — sem render manual.

📝 Sintaxe

import { useMutation, useQueryClient } from '@tanstack/react-query'

const qc = useQueryClient()
const mutation = useMutation({
  mutationFn: newTodo => fetch('/api/todos', {
    method: 'POST',
    body: JSON.stringify(newTodo)
  }).then(r => r.json()),
  onSuccess: () => {
    qc.invalidateQueries({ queryKey: ['todos'] })  // the list turns stale -> it refetches itself
  }
})

mutation.mutate({ title: 'New task' })   // fire the submission

⚙️ Parâmetros

Retorna：Retorna { mutate, isPending, isError, data, error }: mutate(variáveis) dispara a requisição (não retorna Promise), enquanto mutateAsync sim retorna uma Promise.

▶ Exemplo

O exemplo roda direto: renderiza automaticamente ao expandir e edições valem na hora.

Saída：

O botão de envio vira "Salvando…" e permanece desabilitado por um segundo, então a lista ganha um item e uma mensagem de sucesso aparece — o fluxo completo de mutate, isPending e onSuccess (demonstração simulada).

💡 Pontos-chave

🏷️ Mais Dados e Engenharia

💡 Casos Relacionados

📚 Tutoriais Relacionados

❓ Perguntas Frequentes

Equipe Técnica Web-Tutorial

Uma plataforma de tutoriais mantida por diversos desenvolvedores. Cada tutorial é escrito e revisado por profissionais da área correspondente. Trabalhamos para manter nosso conteúdo preciso e confiável — se encontrar algum problema, avise-nos.

Sobre Nós