What is useMutation and how do you use it to submit data in Vue?

useMutation handles write operations (POST/PUT/DELETE). Unlike useQuery it does not run automatically — you call the returned mutate function explicitly. Lifecycle callbacks handle side effects like cache invalidation and notifications.

<script setup lang="ts">
import { useMutation, useQueryClient } from "@tanstack/vue-query"
const qc = useQueryClient()

const { mutate:createPost, isPending, isError, error } = useMutation({
  mutationFn: (post:{title:string;body:string}) =>
    fetch("/api/posts",{
      method:"POST",
      headers:{"Content-Type":"application/json"},
      body:JSON.stringify(post),
    }).then(r=>r.json()),

  onSuccess: ()=>{ qc.invalidateQueries({queryKey:["posts"]}) },
  onError:   (err)=>{ console.error(err) },
  onSettled: ()=>{ /* runs after success OR error */ },
})
</script>

<template>
  <button :disabled="isPending"
          @click="createPost({title:'Hi',body:'World'})">
    {{ isPending ? "Saving..." : "Save Post" }}
  </button>
  <p v-if="isError">{{ error.message }}</p>
</template>