Vue Academy · Ders

Veri Değişiklikleri için useMutation

useMutation(MUTATION), mutate(), önbellek güncelleme stratejileri ve iyimser yanıtlar.

Veri Değişiklikleri için useMutation, CoddyKit'te ücretsiz bir Vue Academy dersidir. Bu, 4 dersinin 3. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, Vue Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. Vue Academy kursu toplamda 4 dersten oluşur.

Mutasyonlarla Verileri Değiştirme

Sorgular verileri okur; mutasyonlar verileri oluşturur, günceller ve siler. useMutation bileşim işlevi bir GraphQL mutasyonu çalıştırır ve hazır olduğunuzda çağırabileceğiniz bir mutate işlevi sağlar.

Temel useMutation Kullanımı

Bir mutasyon belgesi iletin. useQuery'nin aksine bu işlev hemen çalışmaz; bir olay sırasında çağıracağınız bir mutate işlevi döndürür.

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

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

Mutasyonu Tetikleme

mutate() işlevini form gönderimi gibi bir olay işleyicisinden çağırın. Bu işlev, sonuçla çözümlenen bir Promise döndürür.

async function submit() {
  await mutate()
}

Değişkenleri Geçirme

mutate işlevine bir değişken nesnesi geçirin. Mutasyon belgesi, bu değişkenleri $ söz dizimiyle bildirir.

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

Yüklenme ve Hata

useMutation ayrıca, gönder düğmesini devre dışı bırakabilmeniz ve hataları gösterebilmeniz için loading ve error ref'lerini döndürür.

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

Başarıya Tepki Verme

onDone kancası, başarılı bir mutasyondan sonra çalışır — formu temizleyebilir, bir bildirim gösterebilir veya başka bir sayfaya yönlendirebilirsiniz.

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

Önbelleği Güncelleme

Bir mutasyondan sonra Apollo önbelleği güncelliğini yitirmiş olabilir. update işlevi, yeniden veri çekmeye gerek kalmadan kullanıcı arayüzünün değişikliği yansıtması için önbelleği doğrudan değiştirmenizi sağlar.

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

update Neden Refetch'ten Daha İyi

Önbellekteki update işlemi, fazladan bir ağ gidiş dönüşünü önler. Yeni öğe, her useQuery çağrısının okuduğu önbelleğe yazıldığı için anında görünür.

Bunun Yerine Sorguları Yeniden Çalıştırma

Önbelleği elle düzenlemek fazla zahmetliyse mutasyon tamamlandıktan sonra belirli sorguları yeniden çalıştırmak için refetchQueries kullanın.

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

İyimser Yanıtlar

optimisticResponse, sunucunun yanıt vermesini beklemeden, işlemin başarılı olduğunu varsayarak kullanıcı arayüzünü önce günceller. İstek başarısız olursa Apollo değişikliği otomatik olarak geri alır.

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

İyimser Kullanıcı Arayüzü Neden Önemlidir

İyimser güncellemeler, uygulamanın anında tepki verdiği hissini oluşturur — kullanıcı yaptığı işlemin etkisini hemen görür. update ile birlikte kullanıldığında geçici öğe, gerçek sunucu verileri geldiğinde bunlarla değiştirilir.

Hızlı Kontrol

Mutasyonlar hakkındaki bilginizi sınayın.

Özet

Mutasyonları öğrendiniz:

useMutation, olaylarda çağırdığınız bir mutate işlevi döndürür.
Değişkenleri mutate() işlevine geçirin; loading/error ve onDone kullanın.
update işlevi, mutasyondan sonra önbelleği düzenleyerek yeniden veri çekme gereksinimini ortadan kaldırır.
optimisticResponse, otomatik geri alma özelliğiyle kullanıcı arayüzünü anında günceller.

Sıkça Sorulan Sorular

“Veri Değişiklikleri için useMutation” dersi ücretsiz mi?

Evet — “Veri Değişiklikleri için useMutation” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve Vue Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. Vue Academy kursu toplamda 4 dersten oluşur.

“Veri Değişiklikleri için useMutation” dersinde ne öğreneceğim?

useMutation(MUTATION), mutate(), önbellek güncelleme stratejileri ve iyimser yanıtlar. Vue Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.

Vue Academy öğrenmeye başlamak için deneyim gerekli mi?

Önceden deneyim gerekmez. CoddyKit'te Vue Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 3. dersidir.

“Veri Değişiklikleri için useMutation” dersi ne kadar sürer?

Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.

Bu Vue Academy dersinde kod yazıp çalıştırabilir miyim?

Evet. Her Vue Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.

Bu kursun tüm dersleri

Vue 3'te Apollo Client Kurulumu
Veri Çekme için useQuery
Veri Değişiklikleri için useMutation
useSubscription ile Gerçek Zamanlı Abonelikler

← Vue Academy Sayfasına Dön