tRPC End-to-End Type Safe APIs · บทเรียน

การพัฒนากระบวนงานการกลายข้อมูล

สร้างกระบวนงานสำหรับการสร้าง การปรับปรุง และการลบข้อมูลด้วยกระบวนงานการกลายข้อมูลของ tRPC

บทเรียน 3 จาก 411 ขั้นตอน

การพัฒนากระบวนงานการกลายข้อมูล เป็นบทเรียน tRPC End-to-End Type Safe APIs ฟรีบน CoddyKit นี่คือบทเรียนที่ 3 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน tRPC End-to-End Type Safe APIs และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส tRPC End-to-End Type Safe APIs มีบทเรียนทั้งหมด 4 บทเรียน

บางส่วนของบทเรียนนี้ยังไม่ได้รับการแปล และแสดงเป็นภาษาอังกฤษ

What Are tRPC Mutations?

Welcome to tRPC mutation procedures! So far, you've likely used queries to fetch data, like getting a list of users or a single product.

But what if you need to change data? This is where mutations come in. Mutations are API operations designed to modify data on your server.

Create: Add new records (e.g., create a user).
Update: Modify existing records (e.g., update a user's email).
Delete: Remove records (e.g., delete a user).

They are the 'CUD' in CRUD operations!

Mutations vs. Queries

It's important to understand the difference between queries and mutations in tRPC:

Queries: Used for fetching data. They are typically read-only and should not have side effects (i.e., they don't change data on the server).
Mutations: Used for changing data. They are designed to have side effects and modify your server's state.

tRPC enforces this separation, helping you build more predictable and robust APIs. When you need to create, update, or delete anything, always reach for a mutation.

Defining a Simple Mutation

Let's start by defining a very simple mutation. Just like queries, mutations are procedures within your tRPC router.

We use .mutation() instead of .query(). This example takes a name as input and returns a greeting string.

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.

Creating Data: The 'Create' Mutation

A common use case for mutations is creating new data. Let's build a createUser mutation that accepts a user's name and email.

We'll use zod (a schema validation library) to define the expected input structure. This ensures type safety and validates incoming data automatically.

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.

Updating Data: The 'Update' Mutation

Next, let's tackle updating existing data. An updateUser mutation will need the id of the user to update, plus the fields that need changing.

Notice how we can make fields .optional() in our Zod schema if they might not always be provided during an update.

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.

Deleting Data: The 'Delete' Mutation

Finally, let's create a mutation to delete data. A deleteUser mutation typically only needs the id of the record to remove.

For the return value, you might send back a simple success message or the ID of the deleted item. Here, we'll return a boolean indicating success.

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.

Client-Side Mutation Calls

Now that you've defined your mutations on the server, how do you call them from your frontend application?

Using the tRPC client, you simply access the mutation by its name and call the .mutate() method, passing your input data.

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.

Handling Results and Errors

When you call a mutation from the client, it returns a Promise. You can use await to wait for the result, just like with any asynchronous operation.

For error handling, you can use standard JavaScript try...catch blocks around your .mutate() calls. tRPC will automatically propagate errors from your backend to the client.

try {
  const result = await trpc.createUser.mutate({ ... });
  // Handle success
} catch (error) {
  // Handle error
  console.error('Mutation failed:', error.message);
}

This makes error management straightforward and type-safe.

When to Use Mutations

Remember to use mutations for any operation that changes data on your server. This includes:

Submitting a form (e.g., user registration, posting a comment).
Toggling a setting (e.g., dark mode preference).
Performing administrative actions (e.g., banning a user).
Uploading files (though this can involve special handling).

By consistently using mutations for these actions, you maintain clarity, type safety, and leverage tRPC's powerful features for data modification.

Check Your Mutation Knowledge

You've learned how to define and use tRPC mutation procedures. Time for a quick check!

ตอบคำถามในบทเรียนแบบโต้ตอบ

Recap: Mutation Procedures

Great job! In this lesson, you've mastered tRPC mutation procedures:

You learned that mutations are for operations that change data (Create, Update, Delete).
You saw how to define mutations using t.procedure.mutation() with input validation via Zod.
You built examples for creating, updating, and deleting data on the server.
You understood how to call these mutations from the client and handle their results.

Mutations are a core part of building interactive and data-driven applications with tRPC. Next, we'll explore input validation more deeply with Zod!

เริ่มต้นได้ฟรี

เรียนรู้ tRPC End-to-End Type Safe APIs ด้วย AI tutor — ฟรี

เขียนและเรียกใช้โค้ดจริงในเบราว์เซอร์ของคุณ รับความช่วยเหลือทันทีจาก AI tutor 24/7 และเรียนรู้ต่อจากที่คุณหยุดบนเว็บหรือในแอป

คอร์ส: 10
บทเรียน: 40

เริ่มเรียนฟรี ดูหลักสูตรเต็ม

คำถามที่พบบ่อย

บทเรียน “การพัฒนากระบวนงานการกลายข้อมูล” ฟรีหรือไม่

ใช่ — ข้อความเต็มของ “การพัฒนากระบวนงานการกลายข้อมูล” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส tRPC End-to-End Type Safe APIs ให้อัปเกรดเป็น CoddyKit PRO คอร์ส tRPC End-to-End Type Safe APIs มีบทเรียนทั้งหมด 4 บทเรียน

คุณจะเรียนรู้อะไรในบทเรียน “การพัฒนากระบวนงานการกลายข้อมูล”

สร้างกระบวนงานสำหรับการสร้าง การปรับปรุง และการลบข้อมูลด้วยกระบวนงานการกลายข้อมูลของ tRPC คุณปฏิบัติ tRPC End-to-End Type Safe APIs ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน

คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน tRPC End-to-End Type Safe APIs หรือไม่

ไม่จำเป็นต้องมีประสบการณ์มาก่อน tRPC End-to-End Type Safe APIs บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 3 จากทั้งหมด 4 บทเรียน

บทเรียน “การพัฒนากระบวนงานการกลายข้อมูล” ใช้เวลานานแค่ไหน

บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย

ฉันเขียนและรันโค้ดในบทเรียน tRPC End-to-End Type Safe APIs นี้ได้ไหม

ได้ บทเรียน tRPC End-to-End Type Safe APIs ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ

บทเรียนทั้งหมดในหลักสูตรนี้

← กลับไปที่ tRPC End-to-End Type Safe APIs