Membangunkan Prosedur Mutasi
Bina prosedur untuk operasi penciptaan, pengemaskinian dan pemadaman data menggunakan prosedur mutasi tRPC.
Membangunkan Prosedur Mutasi ialah pelajaran API tRPC Selamat Jenis dari Hujung ke Hujung percuma di CoddyKit. Ini ialah pelajaran 3 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 API tRPC Selamat Jenis dari Hujung ke Hujung, dan kemajuan anda disegerakkan merentas web serta aplikasi CoddyKit. Kursus API tRPC Selamat Jenis dari Hujung ke Hujung merangkumi sejumlah 4 pelajaran.
Apakah Mutasi tRPC?
Selamat datang ke prosedur mutasi tRPC! Setakat ini, anda mungkin telah menggunakan pertanyaan untuk mendapatkan data, seperti mendapatkan senarai pengguna atau satu produk.
Namun, bagaimana jika anda perlu mengubah data? Di sinilah mutasi digunakan. Mutasi ialah operasi API yang direka untuk mengubah suai data pada pelayan anda.
- Cipta: Tambahkan rekod baharu (contohnya, cipta pengguna).
- Kemas kini: Ubah suai rekod sedia ada (contohnya, kemas kini e-mel pengguna).
- Padam: Buang rekod (contohnya, padam pengguna).
Mutasi ialah 'CUD' dalam operasi CRUD!
Mutasi berbanding Pertanyaan
Penting untuk memahami perbezaan antara pertanyaan dengan mutasi dalam tRPC:
- Pertanyaan: Digunakan untuk mendapatkan data. Biasanya pertanyaan adalah baca sahaja dan tidak sepatutnya mempunyai kesan sampingan (iaitu, tidak mengubah data pada pelayan).
- Mutasi: Digunakan untuk mengubah data. Mutasi direka untuk mempunyai kesan sampingan dan mengubah keadaan pelayan anda.
tRPC menguatkuasakan pengasingan ini, sekali gus membantu anda membina API yang lebih mudah dijangka dan teguh. Apabila anda perlu mencipta, mengemas kini atau memadam sesuatu, sentiasa gunakan mutasi.
Mentakrifkan Mutasi Mudah
Mari mulakan dengan mentakrifkan mutasi yang sangat mudah. Seperti pertanyaan, mutasi ialah prosedur dalam penghala tRPC anda.
Kita menggunakan .mutation() dan bukannya .query(). Contoh ini menerima name sebagai input dan mengembalikan rentetan sapaan.
import { initTRPC } from '@trpc/server';
import { z } from 'zod';
const t = initTRPC.create();
const appRouter = t.router({
sayHello: t.procedure
.input(z.object({ name: z.string() }))
.mutation(({ input }) => {
// In a real app, this might save 'name' to a log
return `Hello, ${input.name}!`;
}),
});
export type AppRouter = typeof appRouter;
// This defines a valid tRPC router with one mutation.Mencipta Data: Mutasi 'Cipta'
Kes penggunaan mutasi yang biasa ialah mencipta data baharu. Mari bina mutasi createUser yang menerima nama dan e-mel pengguna.
Kita akan menggunakan zod (pustaka pengesahan skema) untuk mentakrifkan struktur input yang dijangka. Hal ini memastikan keselamatan jenis dan mengesahkan data yang masuk secara automatik.
import { initTRPC } from '@trpc/server';
import { z } from 'zod';
const t = initTRPC.create();
interface User {
id: string;
name: string;
email: string;
}
const users: User[] = []; // Our 'database'
const appRouter = t.router({
createUser: t.procedure
.input(z.object({
name: z.string().min(1),
email: z.string().email(),
}))
.mutation(({ input }) => {
const newUser: User = {
id: `user-${users.length + 1}`,
name: input.name,
email: input.email,
};
users.push(newUser); // Add to our fake database
return newUser; // Return the new user object
}),
});
export type AppRouter = typeof appRouter;
// This router defines how to create a user.Mengemas Kini Data: Mutasi 'Kemas Kini'
Seterusnya, mari tangani pengemaskinian data sedia ada. Mutasi updateUser memerlukan id pengguna yang hendak dikemas kini, serta medan yang perlu diubah.
Perhatikan bahawa kita boleh menjadikan medan sebagai .optional() dalam skema Zod jika medan tersebut mungkin tidak sentiasa diberikan semasa pengemaskinian.
import { initTRPC } from '@trpc/server';
import { z } from 'zod';
const t = initTRPC.create();
interface User {
id: string;
name: string;
email: string;
}
const users: User[] = [
{ id: 'user-1', name: 'Alice', email: 'alice@example.com' },
];
const appRouter = t.router({
updateUser: t.procedure
.input(z.object({
id: z.string(),
name: z.string().min(1).optional(),
email: z.string().email().optional(),
}))
.mutation(({ input }) => {
const userIndex = users.findIndex(u => u.id === input.id);
if (userIndex === -1) {
throw new Error('User not found');
}
// Merge existing data with new input
users[userIndex] = { ...users[userIndex], ...input };
return users[userIndex]; // Return the updated user
}),
});
export type AppRouter = typeof appRouter;
// This router defines how to update a user.Memadam Data: Mutasi 'Padam'
Akhir sekali, mari cipta mutasi untuk memadam data. Mutasi deleteUser biasanya hanya memerlukan id rekod yang hendak dibuang.
Untuk nilai yang dikembalikan, anda boleh menghantar mesej kejayaan yang ringkas atau ID item yang dipadam. Di sini, kita akan mengembalikan boolean yang menunjukkan kejayaan.
import { initTRPC } from '@trpc/server';
import { z } from 'zod';
const t = initTRPC.create();
interface User {
id: string;
name: string;
email: string;
}
const users: User[] = [
{ id: 'user-1', name: 'Alice', email: 'alice@example.com' },
{ id: 'user-2', name: 'Bob', email: 'bob@example.com' },
];
const appRouter = t.router({
deleteUser: t.procedure
.input(z.object({ id: z.string() }))
.mutation(({ input }) => {
const initialLength = users.length;
const userIndex = users.findIndex(u => u.id === input.id);
if (userIndex !== -1) {
users.splice(userIndex, 1); // Remove from array
}
// Return true if an item was removed
return { success: users.length < initialLength };
}),
});
export type AppRouter = typeof appRouter;
// This router defines how to delete a user.Panggilan Mutasi pada Klien
Setelah anda mentakrifkan mutasi pada pelayan, bagaimanakah anda memanggilnya daripada aplikasi bahagian hadapan?
Dengan menggunakan klien tRPC, anda hanya perlu mengakses mutasi berdasarkan namanya dan memanggil kaedah .mutate() sambil menghantar data input anda.
import { createTRPCProxyClient, httpBatchLink } from '@trpc/client';
// A simplified AppRouter type for this client-side example.
// In a real app, you'd import 'AppRouter' from your shared types.
interface User { id: string; name: string; email: string; }
type AppRouter = {
sayHello: (input: { name: string }) => Promise<string>;
createUser: (input: { name: string; email: string }) => Promise<User>;
deleteUser: (input: { id: string }) => Promise<{ success: boolean }>;
};
const trpc = createTRPCProxyClient<AppRouter>({
links: [
httpBatchLink({
url: 'http://localhost:3000/trpc', // Your tRPC server URL
}),
],
});
async function runMutationCalls() {
console.log('1. Calling sayHello...');
const helloRes = await trpc.sayHello.mutate({ name: 'Coddy' });
console.log(`Result: ${helloRes}`);
console.log('2. Calling createUser...');
const newUser = await trpc.createUser.mutate({
name: 'Eve',
email: 'eve@example.com',
});
console.log('Created:', newUser);
console.log('3. Calling deleteUser...');
const deleteRes = await trpc.deleteUser.mutate({ id: newUser.id });
console.log('Deleted:', deleteRes.success);
}
runMutationCalls();
// This script simulates client-side mutation calls.Mengendalikan Keputusan dan Ralat
Apabila anda memanggil mutasi daripada klien, mutasi tersebut mengembalikan Promise. Anda boleh menggunakan await untuk menunggu keputusan, sama seperti operasi tak segerak yang lain.
Untuk pengendalian ralat, anda boleh menggunakan blok try...catch JavaScript standard di sekeliling panggilan .mutate() anda. tRPC akan menyebarkan ralat daripada bahagian belakang anda kepada klien secara automatik.
try {
const result = await trpc.createUser.mutate({ ... });
// Handle success
} catch (error) {
// Handle error
console.error('Mutation failed:', error.message);
}Hal ini menjadikan pengurusan ralat mudah dan selamat dari segi jenis.
Bila Hendak Menggunakan Mutasi
Ingat untuk menggunakan mutasi bagi sebarang operasi yang mengubah data pada pelayan anda. Ini termasuk:
- Menghantar borang (contohnya, pendaftaran pengguna atau menyiarkan komen).
- Menogol tetapan (contohnya, pilihan mod gelap).
- Melakukan tindakan pentadbiran (contohnya, menyekat pengguna).
- Memuat naik fail (walaupun hal ini mungkin memerlukan pengendalian khas).
Dengan menggunakan mutasi secara konsisten untuk tindakan ini, anda mengekalkan kejelasan dan keselamatan jenis, serta memanfaatkan ciri berkuasa tRPC untuk pengubahsuaian data.
Uji Pengetahuan Mutasi Anda
Anda telah mempelajari cara mentakrifkan dan menggunakan prosedur mutasi tRPC. Tiba masanya untuk semakan ringkas!
Imbas Kembali: Prosedur Mutasi
Syabas! Dalam pelajaran ini, anda telah menguasai prosedur mutasi tRPC:
- Anda telah mempelajari bahawa mutasi digunakan untuk operasi yang mengubah data (Cipta, Kemas Kini, Padam).
- Anda telah melihat cara mentakrifkan mutasi menggunakan
t.procedure.mutation()dengan pengesahan input melalui Zod. - Anda telah membina contoh untuk mencipta, mengemas kini dan memadam data pada pelayan.
- Anda telah memahami cara memanggil mutasi ini daripada klien dan mengendalikan keputusannya.
Mutasi ialah bahagian teras dalam pembinaan aplikasi interaktif dan dipacu data dengan tRPC. Seterusnya, kita akan meneroka pengesahan input dengan lebih mendalam menggunakan Zod!
Pelajari API tRPC Selamat Jenis dari Hujung ke Hujung 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
- 10
- Pelajaran
- 40
Soalan Lazim
Adakah pelajaran “Membangunkan Prosedur Mutasi” percuma?
Ya — sebanyak 3 pelajaran dalam laluan pembelajaran API tRPC Selamat Jenis dari Hujung ke Hujung, termasuk “Membangunkan Prosedur Mutasi”, 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 API tRPC Selamat Jenis dari Hujung ke Hujung merangkumi sejumlah 4 pelajaran.
Apakah yang akan saya pelajari dalam “Membangunkan Prosedur Mutasi”?
Bina prosedur untuk operasi penciptaan, pengemaskinian dan pemadaman data menggunakan prosedur mutasi tRPC. Anda berlatih API tRPC Selamat Jenis dari Hujung ke Hujung 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 API tRPC Selamat Jenis dari Hujung ke Hujung?
Tiada pengalaman terdahulu diperlukan. Pembelajaran API tRPC Selamat Jenis dari Hujung ke Hujung 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 3 daripada 4.
Berapa lamakah pelajaran “Membangunkan Prosedur Mutasi” 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 API tRPC Selamat Jenis dari Hujung ke Hujung ini?
Ya. Setiap pelajaran API tRPC Selamat Jenis dari Hujung ke Hujung 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
- Penstrukturan dengan Penghala tRPC
- Melaksanakan Prosedur Pertanyaan
- Membangunkan Prosedur Mutasi
- Menggabung dan Menyarang Penghala