Mutasi dengan useMutation dan Pembatalan Cache
Gunakan useMutation untuk menghantar data melalui POST, batalkan pertanyaan berkaitan apabila berjaya supaya senarai disegarkan secara automatik, dan paparkan maklum balas UI optimistik ketika permintaan sedang diproses.
Mutasi dengan useMutation dan Pembatalan Cache ialah pelajaran React Native Academy percuma di CoddyKit. Ini ialah pelajaran 2 daripada 4. Sebanyak 3 pelajaran dalam laluan pembelajaran ini boleh dibaca sepenuhnya secara percuma — selepas itu, CoddyKit PRO membuka akses kepada semua pelajaran, serta latihan praktikal dengan penyunting kod terbina dalam dan tutor kecerdasan buatan yang tersedia 24/7. Pelajaran ini merupakan sebahagian daripada laluan pembelajaran React Native Academy, dan kemajuan anda disegerakkan merentas web serta aplikasi CoddyKit. Kursus React Native Academy merangkumi sejumlah 4 pelajaran.
Apakah Itu Mutasi?
Dalam istilah React Query, mutasi ialah sebarang operasi yang mengubah data pelayan — permintaan POST, PUT, PATCH atau DELETE. Jika useQuery mengambil dan mencache data, useMutation mengendalikan pengubahsuaian data dengan keadaan pemuatan, ralat dan kejayaan, serta panggilan balik kesan sampingan yang berkuasa.
Memisahkan query (bacaan) daripada mutasi (penulisan) ialah corak konsep yang penting. Mutasi tidak mencache hasilnya — mutasi mencetuskan kesan sampingan dan kemudian menyebabkan query berkaitan mengambil semula data terkini.
Asas useMutation
useMutation menerima mutationFn — fungsi tak segerak yang melaksanakan operasi penulisan. Ia mengembalikan fungsi mutate (atau mutateAsync untuk penggunaan berasaskan Promise) yang anda panggil apabila pengguna mencetuskan tindakan tersebut.
Tidak seperti useQuery, mutasi tidak berjalan secara automatik. Mutasi menunggu sehingga anda memanggil mutate(variables). Cangkuk ini menyediakan keadaan isPending, isError, isSuccess, error dan data daripada respons mutasi.
import { useMutation } from '@tanstack/react-query';
async function createPost(newPost) {
const response = await fetch('https://api.example.com/posts', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(newPost),
});
if (!response.ok) throw new Error('Failed to create post');
return response.json();
}
const { mutate, isPending, isError } = useMutation({
mutationFn: createPost,
});Memanggil mutate dan mutateAsync
Panggil mutate(variables) untuk mencetuskan mutasi. Argumen variables dihantar terus kepada mutationFn anda. mutate berjalan tanpa menunggu hasil — ia tidak mengembalikan Promise. Gunakan panggilan balik onSuccess dan onError bagi cangkuk tersebut untuk memberi respons kepada hasilnya.
Gunakan mutateAsync(variables) apabila anda perlu menunggu hasilnya dalam fungsi tak segerak (contohnya, untuk berpindah selepas hantaran berjaya). Sentiasa bungkus mutateAsync dalam try/catch — penolakan yang tidak dikendalikan akan menyebabkan ralat.
const { mutate, mutateAsync, isPending } = useMutation({
mutationFn: createPost,
});
// Using mutate (fire-and-forget):
function handleSubmit() {
mutate({ title: 'My Post', body: postContent });
}
// Using mutateAsync (awaitable):
async function handleSubmitAndNavigate() {
try {
const newPost = await mutateAsync({ title: 'My Post', body: postContent });
navigation.navigate('PostDetail', { id: newPost.id });
} catch (err) {
Alert.alert('Error', err.message);
}
}onSuccess: Panggilan Balik Selepas Mutasi
Panggilan balik onSuccess dijalankan apabila mutasi selesai dengan jayanya. Ia menerima data hasil mutasi dan pemboleh ubah yang dihantar kepada mutate. Gunakan onSuccess untuk membatalkan query berkaitan, memaparkan maklum balas kejayaan, menetapkan semula borang atau berpindah ke skrin lain.
Anda boleh mentakrifkan onSuccess pada aras cangkuk (untuk logik yang sentiasa terpakai) dan juga menghantarnya sebagai argumen kedua kepada mutate(variables, { onSuccess }) untuk penyesuaian bagi setiap panggilan.
import { useMutation, useQueryClient } from '@tanstack/react-query';
const queryClient = useQueryClient();
const { mutate } = useMutation({
mutationFn: createPost,
onSuccess: (newPost, variables) => {
// Refresh the posts list:
queryClient.invalidateQueries({ queryKey: ['posts'] });
// Show success:
Alert.alert('Post created!', newPost.title);
// Reset form:
resetForm();
},
onError: (error) => {
Alert.alert('Error', error.message);
},
});Pembatalan Cache Selepas Mutasi
Pembatalan cache ialah proses menandakan query yang dicache sebagai lapuk selepas mutasi supaya data terkini diambil semula. Gunakan queryClient.invalidateQueries dengan kunci query. Padanan kunci separa disokong — membatalkan ['posts'] akan membatalkan semua query yang kuncinya bermula dengan ['posts'], termasuk ['posts', userId].
Pembatalan mencetuskan pengambilan semula di latar belakang bagi semua query aktif (yang dipasang) dengan kunci sepadan. Komponen yang menggunakan query tersebut akan memaparkan data terkini dalam satu pusingan pergi balik rangkaian.
const { mutate: deletePost } = useMutation({
mutationFn: (postId) =>
fetch('/api/posts/' + postId, { method: 'DELETE' }),
onSuccess: (data, postId) => {
// Invalidate the posts list:
queryClient.invalidateQueries({ queryKey: ['posts'] });
// Also invalidate the specific post's cache:
queryClient.invalidateQueries({ queryKey: ['post', postId] });
},
});Kemas Kini Optimistik
Kemas kini optimistik mengemas kini antara muka pengguna dengan serta-merta sebelum pelayan mengesahkan mutasi. Jika mutasi berjaya, perubahan sementara itu disahkan. Jika mutasi gagal, antara muka pengguna dikembalikan kepada keadaan sebelumnya. Interaksi terasa berlaku serta-merta — tanpa menunggu pelayan.
Laksanakan kemas kini optimistik dalam onMutate: simpan petikan cache semasa, kemas kini cache dengan serta-merta, kemudian kembalikan keadaan dalam onError jika perlu. React Query menyediakan queryClient.setQueryData untuk mengemas kini cache secara manual.
const { mutate: likePost } = useMutation({
mutationFn: (postId) => fetch('/api/posts/' + postId + '/like', { method: 'POST' }),
onMutate: async (postId) => {
await queryClient.cancelQueries({ queryKey: ['posts'] });
const snapshot = queryClient.getQueryData(['posts']);
// Optimistically add like:
queryClient.setQueryData(['posts'], (old) =>
old.map(p => p.id === postId ? { ...p, likes: p.likes + 1 } : p)
);
return { snapshot }; // return for rollback
},
onError: (err, postId, context) => {
queryClient.setQueryData(['posts'], context.snapshot); // rollback
},
});Status Mutasi dan Maklum Balas Antara Muka
Gunakan medan status mutasi untuk menyediakan maklum balas antara muka yang sesuai. isPending bernilai true semasa mutasi sedang diproses — nyahdayakan butang hantar dan paparkan penunjuk pemuatan. isSuccess bernilai true selepas selesai — paparkan mesej kejayaan. isError bernilai true jika mutasi gagal — paparkan mesej ralat.
React Query menetapkan semula status mutasi secara automatik selepas tempoh gcTime yang boleh dikonfigurasikan. Untuk menetapkannya semula secara manual (contohnya, supaya pengguna boleh mencuba lagi), panggil fungsi reset() yang dikembalikan oleh cangkuk tersebut.
const { mutate, isPending, isError, isSuccess, error, reset } = useMutation({
mutationFn: submitForm,
});
return (
<View>
<TextInput value={text} onChangeText={setText} editable={!isPending} />
<Button
title={isPending ? 'Submitting...' : 'Submit'}
onPress={() => mutate({ text })}
disabled={isPending}
/>
{isError && <Text style={{ color: 'red' }}>{error.message}</Text>}
{isSuccess && <Text style={{ color: 'green' }}>Saved!</Text>}
</View>
);Mengemas Kini Cache Secara Terus Selepas Mutasi
Daripada membatalkan dan mengambil semula data, anda boleh mengemas kini cache secara terus dengan respons mutasi menggunakan queryClient.setQueryData. Kaedah ini lebih cekap apabila pelayan mengembalikan data yang dikemas kini dalam respons mutasi — anda boleh menambahkannya ke dalam senarai tanpa permintaan rangkaian tambahan.
Corak ini — menetapkan cache daripada respons pelayan dan bukannya membatalkannya — menjimatkan satu pusingan pergi balik rangkaian dan berguna untuk senarai yang memerlukan item baharu ditambah serta-merta.
const { mutate } = useMutation({
mutationFn: createPost,
onSuccess: (newPost) => {
// Append new post to cached list directly:
queryClient.setQueryData(['posts'], (oldPosts) => {
if (!oldPosts) return [newPost];
return [newPost, ...oldPosts]; // prepend new post
});
// No invalidation needed — cache is already up to date!
},
});Panggilan Balik Mutasi Global melalui QueryClient
Anda boleh mentakrifkan panggilan balik mutasi global dalam defaultOptions.mutations milik QueryClient untuk pengelogan, pelaporan ralat atau penyegaran token yang perlu digunakan pada setiap mutasi dalam aplikasi. Pilihan mutasi setempat mengatasi pilihan global — kedua-duanya boleh digunakan bersama.
Satu kes penggunaan biasa ialah panggilan balik onError global yang menyemak respons 401 Tidak Dibenarkan dan mencetuskan aliran log keluar atau penyegaran token bagi setiap mutasi, tanpa mengulangi logik ini dalam setiap panggilan useMutation.
const queryClient = new QueryClient({
defaultOptions: {
mutations: {
onError: (error) => {
// Global error handling for all mutations:
if (error.status === 401) {
handleUnauthorized();
} else {
console.error('Mutation error:', error.message);
}
},
},
},
});Mutasi dengan Muat Naik Fail
Mutasi mengendalikan muat naik fail dengan menerima FormData sebagai pemboleh ubah. mutationFn mencipta objek FormData dan menghantarnya dengan fetch menggunakan jenis kandungan multipart/form-data. React Query menguruskan keadaan pemuatan dan ralat dengan cara yang sama seperti mutasi lain.
Bagi muat naik fail yang besar, jejak kemajuan menggunakan pembalut fetch tersuai dengan XHR, dan simpan kemajuan dalam pemboleh ubah keadaan berasingan yang dikemas kini melalui corak onUploadProgress.
const { mutate: uploadPhoto, isPending } = useMutation({
mutationFn: async ({ uri, userId }) => {
const formData = new FormData();
formData.append('photo', {
uri,
type: 'image/jpeg',
name: 'photo.jpg',
});
formData.append('userId', userId);
const response = await fetch('/api/photos', {
method: 'POST',
body: formData,
// Do NOT set Content-Type — let fetch set multipart boundary
});
return response.json();
},
onSuccess: () => queryClient.invalidateQueries({ queryKey: ['photos'] }),
});Merangkaikan Mutasi
Bagi aliran kerja yang memerlukan beberapa operasi pelayan secara berurutan (contohnya, mencipta pesanan kemudian memproses bayaran), rangkaikan mutasi menggunakan mutateAsync secara berturutan. Setiap mutasi boleh menggunakan hasil mutasi sebelumnya sebagai inputnya. Bungkus rantaian tersebut dalam try/catch untuk mengendalikan ralat.
Jika langkah perantaraan gagal, anda mungkin perlu mengembalikan langkah terdahulu secara manual atau mencetuskan transaksi pampasan. Reka bentuk API anda supaya bersifat atom jika boleh bagi memudahkan pemulihan ralat pada pihak klien.
const { mutateAsync: createOrder } = useMutation({ mutationFn: apiCreateOrder });
const { mutateAsync: processPayment } = useMutation({ mutationFn: apiProcessPayment });
async function handleCheckout(cartData, paymentInfo) {
try {
const order = await createOrder(cartData);
const payment = await processPayment({ orderId: order.id, ...paymentInfo });
queryClient.invalidateQueries({ queryKey: ['orders'] });
navigation.navigate('OrderConfirmation', { orderId: order.id });
} catch (error) {
Alert.alert('Checkout failed', error.message);
}
}Semakan Pantas
Uji pemahaman anda tentang konsep Pembangunan Aplikasi Mudah Alih React Native daripada pelajaran ini.
Ulang Kaji Pelajaran
Dalam pelajaran ini, anda telah mempelajari bahawa: useMutation mengendalikan operasi penulisan (POST/PUT/DELETE) dengan keadaan isPending, isError dan isSuccess, onSuccess ialah tempat utama untuk memanggil queryClient.invalidateQueries bagi memuat semula data berkaitan yang dicache, dan kemas kini optimistik melalui onMutate mengemas kini cache serta-merta dengan petikan untuk mengembalikan keadaan jika permintaan pelayan gagal. Seterusnya, kita akan menyimpan cache React Query dalam AsyncStorage untuk tingkah laku mengutamakan luar talian.
Pelajari JavaScript dengan tutor kecerdasan buatan — percuma
Tulis dan jalankan kod sebenar dalam pelayar anda, dapatkan bantuan segera daripada tutor kecerdasan buatan yang tersedia 24/7, dan sambung semula dari tempat anda berhenti di web atau dalam aplikasi.
- Kursus
- 30
- Pelajaran
- 120
Soalan Lazim
Adakah pelajaran “Mutasi dengan useMutation dan Pembatalan Cache” percuma?
Ya — sebanyak 3 pelajaran dalam laluan pembelajaran React Native Academy, termasuk “Mutasi dengan useMutation dan Pembatalan Cache”, boleh dibaca sepenuhnya secara percuma di web ini. Selepas itu, CoddyKit PRO membuka akses kepada semua pelajaran, serta latihan interaktif dengan penyunting kod terbina dalam dan tutor kecerdasan buatan yang tersedia 24/7. Kursus React Native Academy merangkumi sejumlah 4 pelajaran.
Apakah yang akan saya pelajari dalam “Mutasi dengan useMutation dan Pembatalan Cache”?
Gunakan useMutation untuk menghantar data melalui POST, batalkan pertanyaan berkaitan apabila berjaya supaya senarai disegarkan secara automatik, dan paparkan maklum balas UI optimistik ketika permin… Anda berlatih React Native Academy menggunakan kod praktikal yang dijalankan terus dalam pelayar, manakala tutor kecerdasan buatan 24/7 menjawab soalan anda semasa anda mengikuti pelajaran.
Adakah saya memerlukan pengalaman untuk memulakan React Native Academy?
Tiada pengalaman terdahulu diperlukan. Pembelajaran React Native Academy di CoddyKit disusun untuk pelajar daripada peringkat pemula hingga lanjutan, jadi anda boleh bermula di sini atau dari awal dan belajar mengikut kadar anda sendiri. Ini ialah pelajaran 2 daripada 4.
Berapa lamakah pelajaran “Mutasi dengan useMutation dan Pembatalan Cache” diambil?
Kebanyakan pelajaran CoddyKit mengambil masa kira-kira 5–10 minit. Setiap pelajaran ringkas dan interaktif, jadi anda boleh membuat kemajuan secara berterusan dan menyambung tepat dari tempat anda berhenti di web atau aplikasi.
Bolehkah saya menulis dan menjalankan kod dalam pelajaran React Native Academy ini?
Ya. Setiap pelajaran React Native Academy menyertakan penyunting kod terbina dalam, jadi anda boleh menulis dan menjalankan kod sebenar terus dalam pelayar serta menerima maklum balas kecerdasan buatan serta-merta — tanpa memerlukan persediaan setempat.
Semua pelajaran dalam kursus ini
- QueryClient, QueryClientProvider dan useQuery
- Mutasi dengan useMutation dan Pembatalan Cache
- Mengekalkan Cache Pertanyaan dengan AsyncStorage
- Konfigurasi Pengambilan Semula Latar Belakang dan Masa Lapuk