Vue Academy · Pelajaran

useMutation untuk Perubahan Data

useMutation(MUTATION), mutate(), strategi pembaruan cache, serta respons optimistis.

useMutation untuk Perubahan Data adalah pelajaran Vue Academy gratis di CoddyKit. Ini adalah pelajaran 3 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar Vue Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus Vue Academy mencakup 4 pelajaran total.

Mengubah Data dengan Mutasi

Kueri membaca data; mutasi mengubahnya—membuat, memperbarui, atau menghapus. Komposabel useMutation menjalankan mutasi GraphQL dan memberi Anda fungsi mutate untuk dipanggil saat siap.

Penggunaan Dasar useMutation

Berikan dokumen mutasi. Tidak seperti useQuery, komposabel ini tidak langsung berjalan—komposabel ini mengembalikan fungsi mutate yang Anda panggil saat suatu peristiwa terjadi.

import { useMutation } from '@vue/apollo-composable'
import { gql } from '@apollo/client/core'

const { mutate } = useMutation(gql(
  'mutation { addPost { id } }'
))

Menjalankan Mutasi

Panggil mutate() dari penangan peristiwa, seperti pengiriman formulir. Fungsi ini mengembalikan Promise yang diselesaikan dengan hasilnya.

async function submit() {
  await mutate()
}

Meneruskan Variabel

Teruskan objek variabel ke mutate. Dokumen mutasi mendeklarasikannya dengan sintaks $.

const { mutate } = useMutation(gql(
  'mutation($title: String!) { addPost(title: $title) { id title } }'
))
function add(title) {
  return mutate({ title })
}

Pemuatan dan Kesalahan

useMutation juga mengembalikan ref loading dan error, sehingga Anda dapat menonaktifkan tombol kirim dan menampilkan kegagalan.

<template>
  <button :disabled="loading" @click="submit">Save</button>
  <p v-if="error">{{ error.message }}</p>
</template>

Menanggapi Keberhasilan

Pengait onDone dijalankan setelah mutasi berhasil — kosongkan formulir, tampilkan notifikasi singkat, atau navigasikan ke halaman lain.

const { mutate, onDone } = useMutation(ADD_POST)
onDone((res) => {
  console.log('Created', res.data.addPost.id)
})

Memperbarui Tembolok

Setelah mutasi, tembolok Apollo mungkin sudah kedaluwarsa. Fungsi update memungkinkan Anda mengubah tembolok secara langsung agar UI mencerminkan perubahan tanpa pengambilan ulang.

useMutation(ADD_POST, {
  update(cache, { data }) {
    const existing = cache.readQuery({ query: GET_POSTS })
    cache.writeQuery({
      query: GET_POSTS,
      data: { posts: [...existing.posts, data.addPost] }
    })
  }
})

Mengapa Pembaruan Lebih Baik daripada Pengambilan Ulang

update pada tembolok menghindari perjalanan pulang-pergi jaringan tambahan. Elemen baru langsung muncul karena Anda menuliskannya ke tembolok yang menjadi sumber setiap useQuery.

Mengambil Ulang Kueri sebagai Alternatif

Jika pengeditan tembolok secara manual terlalu merepotkan, gunakan refetchQueries untuk menjalankan ulang kueri tertentu setelah mutasi selesai.

useMutation(ADD_POST, {
  refetchQueries: [{ query: GET_POSTS }]
})

Respons Optimistis

optimisticResponse memperbarui UI sebelum server memberikan respons, dengan mengasumsikan keberhasilan. Jika permintaan gagal, Apollo secara otomatis membatalkan perubahan tersebut.

mutate(
  { title: 'New' },
  {
    optimisticResponse: {
      addPost: { __typename: 'Post', id: 'temp', title: 'New' }
    }
  }
)

Mengapa UI Optimistis Penting

Pembaruan optimistis membuat aplikasi terasa seketika — pengguna langsung melihat tindakannya diterapkan. Jika digabungkan dengan update, elemen sementara akan digantikan oleh data server yang sebenarnya saat data tersebut tiba.

Uji Singkat

Uji pengetahuan Anda tentang mutasi.

Ringkasan

Anda telah mempelajari mutasi:

useMutation mengembalikan fungsi mutate yang Anda panggil saat terjadi peristiwa.
Teruskan variabel ke mutate(); gunakan loading/error dan onDone.
Fungsi pembaruan mengubah tembolok setelah mutasi, sehingga pengambilan ulang tidak diperlukan.
optimisticResponse langsung memperbarui UI dan secara otomatis membatalkan perubahan jika diperlukan.

Pertanyaan yang Sering Diajukan

Apakah pelajaran “useMutation untuk Perubahan Data” gratis?

Ya — teks lengkap “useMutation untuk Perubahan Data” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus Vue Academy, upgrade ke CoddyKit PRO. Kursus Vue Academy mencakup 4 pelajaran total.

Apa yang akan aku pelajari di “useMutation untuk Perubahan Data”?

useMutation(MUTATION), mutate(), strategi pembaruan cache, serta respons optimistis. Kamu berlatih Vue Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.

Apakah aku perlu pengalaman untuk memulai Vue Academy?

Tidak diperlukan pengalaman sebelumnya. Vue Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 3 dari 4.

Berapa lama pelajaran “useMutation untuk Perubahan Data” memakan waktu?

Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.

Bisakah aku menulis dan menjalankan kode dalam pelajaran Vue Academy ini?

Ya. Setiap pelajaran Vue Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.

Semua pelajaran dalam kursus ini

Menyiapkan Apollo Client di Vue 3
useQuery untuk Pengambilan Data
useMutation untuk Perubahan Data
Subscription Real-Time dengan useSubscription

← Kembali ke Vue Academy