Typesikre API-er fra frontend til backend med tRPC · leksjon

Utvikling av mutation-prosedyrer

Bygg prosedyrer for oppretting, oppdatering og sletting av data ved hjelp av tRPC-mutation-prosedyrer.

Leksjon 3 av 411 trinn

Utvikling av mutation-prosedyrer er en gratis leksjon i Typesikre API-er fra frontend til backend med tRPC på CoddyKit. Dette er leksjon 3 av 4. Du kan lese valgfritt 3 leksjoner fra denne læringsstien gratis i sin helhet – deretter låser CoddyKit PRO opp alle leksjoner, samt praktisk øving med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Den er en del av læringsløpet i Typesikre API-er fra frontend til backend med tRPC, og fremdriften din synkroniseres mellom nettet og CoddyKit-appen. Kurset i Typesikre API-er fra frontend til backend med tRPC inneholder totalt 4 leksjoner.

Hva er tRPC-mutasjoner?

Velkommen til tRPC-mutasjonsprosedyrer! Så langt har du sannsynligvis brukt spørringer til å hente data, for eksempel en liste over brukere eller ett enkelt produkt.

Men hva om du må endre data? Det er her mutasjoner kommer inn. Mutasjoner er API-operasjoner som er laget for å endre data på serveren.

  • Opprette: Legge til nye poster (for eksempel opprette en bruker).
  • Oppdatere: Endre eksisterende poster (for eksempel oppdatere e-postadressen til en bruker).
  • Slette: Fjerne poster (for eksempel slette en bruker).

De utgjør «CUD» i CRUD-operasjoner!

Mutasjoner sammenlignet med spørringer

Det er viktig å forstå forskjellen mellom spørringer og mutasjoner i tRPC:

  • Spørringer: Brukes til å hente data. De er vanligvis skrivebeskyttede og skal ikke ha bivirkninger (det vil si at de ikke endrer data på serveren).
  • Mutasjoner: Brukes til å endre data. De er laget for å ha bivirkninger og endre tilstanden på serveren.

tRPC håndhever dette skillet, slik at du kan bygge mer forutsigbare og robuste API-er. Når du må opprette, oppdatere eller slette noe, bør du alltid bruke en mutasjon.

Definere en enkel mutasjon

La oss starte med å definere en svært enkel mutasjon. Akkurat som spørringer er mutasjoner prosedyrer i tRPC-ruteren.

Vi bruker .mutation() i stedet for .query(). Dette eksempelet tar imot et name som inndata og returnerer en hilsentekst.

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.

Opprette data: «Create»-mutasjonen

Et vanlig bruksområde for mutasjoner er å opprette nye data. La oss bygge en createUser-mutasjon som tar imot navnet og e-postadressen til en bruker.

Vi bruker zod (et bibliotek for skjemavalidering) til å definere den forventede strukturen på inndataene. Dette sørger for typesikkerhet og validerer innkommende data automatisk.

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.

Oppdatere data: «Update»-mutasjonen

Deretter skal vi ta for oss oppdatering av eksisterende data. En updateUser-mutasjon trenger id-en til brukeren som skal oppdateres, samt feltene som skal endres.

Legg merke til at vi kan gjøre felt .optional() i Zod-skjemaet hvis de ikke alltid oppgis ved en oppdatering.

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.

Slette data: «Delete»-mutasjonen

Til slutt skal vi lage en mutasjon for å slette data. En deleteUser-mutasjon trenger vanligvis bare id-en til posten som skal fjernes.

Som returverdi kan du sende tilbake en enkel suksessmelding eller ID-en til elementet som ble slettet. Her returnerer vi en boolsk verdi som angir om operasjonen var vellykket.

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.

Kalle mutasjoner på klientsiden

Nå som du har definert mutasjonene på serveren, hvordan kaller du dem fra frontend-applikasjonen?

Med tRPC-klienten åpner du ganske enkelt mutasjonen med navnet dens og kaller metoden .mutate() mens du sender inn dataene.

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.

Håndtere resultater og feil

Når du kaller en mutasjon fra klienten, returnerer den et Promise. Du kan bruke await til å vente på resultatet, akkurat som ved andre asynkrone operasjoner.

For feilhåndtering kan du bruke vanlige JavaScript-blokker med try...catch rundt kallene til .mutate(). tRPC viderefører automatisk feil fra backend til klienten.

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

Dette gjør feilhåndteringen enkel og typesikker.

Når bør du bruke mutasjoner?

Husk å bruke mutasjoner for alle operasjoner som endrer data på serveren. Dette omfatter:

  • Sende inn et skjema (for eksempel brukerregistrering eller publisering av en kommentar).
  • Slå en innstilling av eller på (for eksempel preferansen for mørk modus).
  • Utføre administrative handlinger (for eksempel utestenge en bruker).
  • Laste opp filer (selv om dette kan kreve særskilt håndtering).

Ved konsekvent å bruke mutasjoner for disse handlingene får du tydelighet og typesikkerhet, samtidig som du utnytter tRPCs kraftige funksjoner for datamodifisering.

Test kunnskapene dine om mutasjoner

Du har lært hvordan du definerer og bruker tRPC-mutasjonsprosedyrer. På tide med en rask test!

Oppsummering: Mutasjonsprosedyrer

Godt jobbet! I denne leksjonen har du fått god kontroll på tRPC-mutasjonsprosedyrer:

  • Du har lært at mutasjoner brukes til operasjoner som endres data (opprette, oppdatere og slette).
  • Du har sett hvordan du definerer mutasjoner med t.procedure.mutation() og validering av inndata gjennom Zod.
  • Du har bygget eksempler på å opprette, oppdatere og slette data på serveren.
  • Du har forstått hvordan du kaller disse mutasjonene fra klienten og håndterer resultatene.

Mutasjoner er en sentral del av å bygge interaktive og datadrevne applikasjoner med tRPC. Deretter skal vi utforske validering av inndata grundigere med Zod!

Gratis å komme i gang

Lær deg Typesikre API-er fra frontend til backend med tRPC med en AI-veileder – gratis

Skriv og kjør ekte kode i nettleseren, få umiddelbar hjelp fra en AI-veileder som er tilgjengelig døgnet rundt, og fortsett der du slapp – på nettet eller i appen.

Kurs
10
Leksjoner
40

Ofte stilte spørsmål

Er leksjonen «Utvikling av mutation-prosedyrer» gratis?

Ja – du kan lese valgfritt 3 av leksjonene i læringsstien Typesikre API-er fra frontend til backend med tRPC, inkludert «Utvikling av mutation-prosedyrer», gratis i sin helhet her på nettet. Deretter låser CoddyKit PRO opp alle leksjoner, samt interaktiv øving med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Kurset i Typesikre API-er fra frontend til backend med tRPC inneholder totalt 4 leksjoner.

Hva lærer jeg i «Utvikling av mutation-prosedyrer»?

Bygg prosedyrer for oppretting, oppdatering og sletting av data ved hjelp av tRPC-mutation-prosedyrer. Du øver på Typesikre API-er fra frontend til backend med tRPC med praktisk kode som du kjører direkte i nettleseren, mens en AI-veileder som er tilgjengelig døgnet rundt, svarer på spørsmålene dine mens du jobber deg gjennom leksjonen.

Trenger jeg erfaring for å begynne med Typesikre API-er fra frontend til backend med tRPC?

Ingen tidligere erfaring er nødvendig. Typesikre API-er fra frontend til backend med tRPC på CoddyKit er lagt opp for både nybegynnere og viderekomne, så De kan begynne her eller helt fra start og lære i Deres eget tempo. Dette er leksjon 3 av 4.

Hvor lang tid tar leksjonen «Utvikling av mutation-prosedyrer»?

De fleste CoddyKit-leksjoner tar omtrent 5–10 minutter. Hver leksjon er kort og interaktiv, slik at De gjør jevne fremskritt og kan fortsette akkurat der De slapp – både på nettet og i appen.

Kan jeg skrive og kjøre kode i denne Typesikre API-er fra frontend til backend med tRPC-leksjonen?

Ja. Alle Typesikre API-er fra frontend til backend med tRPC-leksjoner har en innebygd kodeeditor, slik at De kan skrive og kjøre ekte kode direkte i nettleseren og få umiddelbar tilbakemelding fra AI – uten lokal konfigurering.

Alle leksjonene i dette kurset

  1. Strukturering med tRPC-rutere
  2. Implementering av query-prosedyrer
  3. Utvikling av mutation-prosedyrer
  4. Sammenslåing og nøsting av rutere
← Tilbake til Typesikre API-er fra frontend til backend med tRPC