การใช้ useMutation เพื่อเปลี่ยนแปลงข้อมูล
useMutation(MUTATION), mutate() กลยุทธ์การอัปเดตแคช และการตอบกลับเชิงคาดการณ์
การใช้ useMutation เพื่อเปลี่ยนแปลงข้อมูล เป็นบทเรียน Vue Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 3 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน Vue Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส Vue Academy มีบทเรียนทั้งหมด 4 บทเรียน
การเปลี่ยนข้อมูลด้วยมิวเทชัน
คำขอใช้สำหรับอ่านข้อมูล ส่วนมิวเทชันใช้เปลี่ยนข้อมูล เช่น สร้าง แก้ไข และลบ คอมโพสิเบิล useMutation จะเรียกใช้มิวเทชัน GraphQL และมอบฟังก์ชัน mutate ให้คุณเรียกเมื่อพร้อม
useMutation พื้นฐาน
ส่งเอกสารมิวเทชันให้ฟังก์ชันนี้ ต่างจาก useQuery ตรงที่จะไม่ทำงานทันที แต่จะคืนฟังก์ชัน mutate ให้คุณเรียกใช้เมื่อเกิดเหตุการณ์
import { useMutation } from '@vue/apollo-composable'
import { gql } from '@apollo/client/core'
const { mutate } = useMutation(gql(
'mutation { addPost { id } }'
))การเรียกใช้มิวเทชัน
เรียกใช้ mutate() จากตัวจัดการเหตุการณ์ เช่น เมื่อส่งแบบฟอร์ม ฟังก์ชันนี้จะคืนค่า Promise ที่ส่งผลลัพธ์กลับมา
async function submit() {
await mutate()
}การส่งตัวแปร
ส่งออบเจ็กต์ตัวแปรให้กับ mutate โดยเอกสารมิวเทชันจะประกาศตัวแปรเหล่านี้ด้วยไวยากรณ์ $
const { mutate } = useMutation(gql(
'mutation($title: String!) { addPost(title: $title) { id title } }'
))
function add(title) {
return mutate({ title })
}สถานะกำลังโหลดและข้อผิดพลาด
useMutation ยังคืนค่าการอ้างอิง loading และ error เพื่อให้คุณปิดใช้งานปุ่มส่งแบบฟอร์มและแสดงข้อผิดพลาดได้
<template>
<button :disabled="loading" @click="submit">Save</button>
<p v-if="error">{{ error.message }}</p>
</template>การตอบสนองเมื่อสำเร็จ
ฮุก onDone จะทำงานหลังมิวเทชันสำเร็จ — คุณสามารถล้างแบบฟอร์ม แสดงการแจ้งเตือน หรือเปลี่ยนไปยังหน้าอื่นได้
const { mutate, onDone } = useMutation(ADD_POST)
onDone((res) => {
console.log('Created', res.data.addPost.id)
})การอัปเดตแคช
หลังจากมิวเทชัน แคชของ Apollo อาจล้าสมัย ฟังก์ชัน update ช่วยให้คุณแก้ไขแคชโดยตรง เพื่อให้ส่วนติดต่อผู้ใช้แสดงการเปลี่ยนแปลงได้โดยไม่ต้องดึงข้อมูลใหม่
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 กับแคชช่วยหลีกเลี่ยงการเดินทางไปกลับเครือข่ายเพิ่มเติม รายการใหม่จะแสดงขึ้นทันที เพราะคุณเขียนรายการนั้นลงในแคชที่ useQuery ทุกตัวอ่านข้อมูล
การดึงคำค้นใหม่แทน
หากการแก้ไขแคชด้วยตนเองยุ่งยากเกินไป ให้ใช้ refetchQueries เพื่อเรียกใช้คำค้นที่ระบุอีกครั้งหลังมิวเทชันเสร็จสมบูรณ์
useMutation(ADD_POST, {
refetchQueries: [{ query: GET_POSTS }]
})การตอบสนองเชิงคาดการณ์
optimisticResponse จะอัปเดตส่วนติดต่อผู้ใช้ ก่อน เซิร์ฟเวอร์ตอบกลับ โดยสมมติว่าการดำเนินการจะสำเร็จ หากคำขอล้มเหลว Apollo จะย้อนคืนการเปลี่ยนแปลงให้โดยอัตโนมัติ
mutate(
{ title: 'New' },
{
optimisticResponse: {
addPost: { __typename: 'Post', id: 'temp', title: 'New' }
}
}
)เหตุใดส่วนติดต่อผู้ใช้เชิงคาดการณ์จึงสำคัญ
การอัปเดตเชิงคาดการณ์ทำให้แอปดูตอบสนองทันที — ผู้ใช้เห็นการกระทำของตนมีผลในทันที เมื่อใช้ร่วมกับ update รายการชั่วคราวจะถูกแทนที่ด้วยข้อมูลจริงจากเซิร์ฟเวอร์เมื่อข้อมูลมาถึง
ตรวจสอบความเข้าใจ
ทดสอบความรู้ของคุณเกี่ยวกับมิวเทชัน
สรุปทบทวน
คุณได้เรียนรู้เกี่ยวกับมิวเทชัน:
useMutationคืนฟังก์ชันสำหรับเรียกใช้มิวเทชันเมื่อเกิดเหตุการณ์- ส่งตัวแปรให้ฟังก์ชันเรียกใช้มิวเทชัน ใช้สถานะกำลังโหลดและข้อผิดพลาด รวมถึง
onDone - ฟังก์ชัน
updateแก้ไขแคชหลังมิวเทชัน จึงไม่ต้องดึงข้อมูลใหม่ optimisticResponseอัปเดตส่วนติดต่อผู้ใช้ทันทีและย้อนคืนการเปลี่ยนแปลงโดยอัตโนมัติ
คำถามที่พบบ่อย
บทเรียน “การใช้ useMutation เพื่อเปลี่ยนแปลงข้อมูล” ฟรีหรือไม่
ใช่ — ข้อความเต็มของ “การใช้ useMutation เพื่อเปลี่ยนแปลงข้อมูล” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส Vue Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส Vue Academy มีบทเรียนทั้งหมด 4 บทเรียน
คุณจะเรียนรู้อะไรในบทเรียน “การใช้ useMutation เพื่อเปลี่ยนแปลงข้อมูล”
useMutation(MUTATION), mutate() กลยุทธ์การอัปเดตแคช และการตอบกลับเชิงคาดการณ์ คุณปฏิบัติ Vue Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน
คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน Vue Academy หรือไม่
ไม่จำเป็นต้องมีประสบการณ์มาก่อน Vue Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 3 จากทั้งหมด 4 บทเรียน
บทเรียน “การใช้ useMutation เพื่อเปลี่ยนแปลงข้อมูล” ใช้เวลานานแค่ไหน
บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย
ฉันเขียนและรันโค้ดในบทเรียน Vue Academy นี้ได้ไหม
ได้ บทเรียน Vue Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ
บทเรียนทั้งหมดในหลักสูตรนี้
- การตั้งค่า Apollo Client ใน Vue 3
- การใช้ useQuery เพื่อดึงข้อมูล
- การใช้ useMutation เพื่อเปลี่ยนแปลงข้อมูล
- การสมัครรับข้อมูลแบบเรียลไทม์ด้วย useSubscription