Mengembangkan Prosedur Mutasi

What Are tRPC Mutations?

Mutations vs. Queries

Defining a Simple Mutation

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

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

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

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

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

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

When to Use Mutations

Check Your Mutation Knowledge

Recap: Mutation Procedures