Typesikre API'er fra frontend til backend med tRPC · Lektion

Integration af Zod i tRPC-procedurer

Anvend Zod-schemas direkte på input til Deres tRPC-queries og -mutationer for automatisk validering.

Lektion 3 af 411 trin

Integration af Zod i tRPC-procedurer er en gratis Typesikre API'er fra frontend til backend med tRPC-lektion på CoddyKit. Dette er lektion 3 af 4. Du kan læse alle 3 lektioner i dette læringsspor gratis i deres fulde længde — derefter låser CoddyKit PRO alle lektioner op samt praktiske øvelser med en indbygget kodeeditor og en AI-underviser døgnet rundt. Den er en del af læringsforløbet i Typesikre API'er fra frontend til backend med tRPC, og dine fremskridt synkroniseres på tværs af nettet og CoddyKit-appen. Typesikre API'er fra frontend til backend med tRPC-kurset indeholder 4 lektioner i alt.

Zod til tRPC-input

Velkommen! I denne lektion lærer vi, hvordan du integrerer Zod-skemaer direkte i dine tRPC-procedurer. Denne effektive kombination sikrer, at dine API-input altid er gyldige og typesikre fra ende til anden.

Du ser, hvordan du bruger Zod til både forespørgsels- og mutationsprocedurer, så din backend bliver mere robust og udviklervenlig.

Hvorfor validere input?

Inputvalidering er en afgørende del af at bygge sikre og pålidelige API'er. Det er som et kvalitetstjek ved indgangen til din backend.

Sikkerhed: Forhindrer skadelige eller forkert formaterede data i at nå din serverlogik.
Dataintegritet: Sikrer, at din database kun gemmer gyldige og forventede dataformater.
Forudsigelighed: Din backendlogik kan stole på strukturen af de indgående data, hvilket reducerer fejl under kørsel.
Bedre udvikleroplevelse: Udviklere får øjeblikkelig feedback om forkerte input.

Metoden `.input()`

tRPC gør det utrolig enkelt at integrere Zod. Hver tRPC-procedure (forespørgsel, mutation eller abonnement) har en metode kaldet .input().

Metoden tager imod et Zod-skema, som tRPC derefter bruger til automatisk at validere alle indgående data til den pågældende procedure. Hvis inputtet ikke matcher skemaet, håndterer tRPC fejlen for dig!

Validering af forespørgselsinput

Ved forespørgsler forventer du ofte parametre som et ID eller et søgeord. Zod hjælper med at sikre, at disse input har den korrekte type og det korrekte format.

Lad os se på et eksempel, hvor vi vil hente en bruger ud fra dennes unikke ID. Vi bruger Zod til at sikre, at userId er en gyldig UUID-streng.

Eksempel på forespørgselsprocedure

Sådan definerer du en tRPC-forespørgselsprocedure, der bruger et Zod-skema til at validere sit input:

import { initTRPC } from '@trpc/server';
import { z } from 'zod';

// Minimal tRPC context setup
const t = initTRPC.create();

// Define a query procedure with Zod input validation
const getUserById = t.procedure
  .input(z.object({
    userId: z.string().uuid("Invalid user ID format"),
  }))
  .query(({ input }) => {
    // In a real app, this would fetch from a database
    console.log(`Fetching user: ${input.userId}`);
    return { id: input.userId, name: "Alice" }; // Mock data
  });

// To use this, you'd add it to a tRPC router, e.g.:
// export const appRouter = t.router({ getUserById });

Validering af mutationsinput

Mutationer indebærer ofte oprettelse eller opdatering af data, hvilket betyder, at de typisk modtager mere komplekse inputobjekter. Zod er perfekt til at validere disse strukturer.

Forestil dig, at du vil oprette et nyt blogindlæg. Vi validerer dets title og valgfri content for at sikre, at de opfylder bestemte kriterier.

Eksempel på mutationsprocedure

Her er en mutationsprocedure, der validerer input til oprettelse af et nyt indlæg ved hjælp af et Zod-objektskema:

import { initTRPC } from '@trpc/server';
import { z } from 'zod';

// Minimal tRPC context setup
const t = initTRPC.create();

// Define a mutation procedure with Zod input validation
const createPost = t.procedure
  .input(z.object({
    title: z.string().min(5, "Title must be at least 5 characters"),
    content: z.string().optional(),
    authorId: z.string().uuid("Invalid author ID"),
  }))
  .mutation(({ input }) => {
    // This would typically save data to a database
    console.log(`Creating post: "${input.title}" by ${input.authorId}`);
    return { id: "new-post-uuid", ...input, createdAt: new Date() }; // Mock
  });

// To use this, you'd add it to a tRPC router, e.g.:
// export const appRouter = t.router({ createPost });

Automatiske valideringsfejl

En af de største fordele ved at integrere Zod direkte med tRPC er automatisk fejlhåndtering.

Hvis en klient sender input, der ikke matcher dit Zod-skema, fanger tRPC automatisk valideringsfejlen.
Derefter sender den et standardiseret BAD_REQUEST-svar med en fejl til klienten, inklusive oplysninger om, hvorfor valideringen mislykkedes.
Det betyder, at du ikke behøver at skrive manuelle try/catch-blokke til grundlæggende inputvalidering!

Fordele ved direkte integration

Kombinationen af Zod og tRPC's metode .input() giver flere effektive fordele:

Typesikkerhed fra ende til anden: Dit Zod-skema definerer den nøjagtige inputtype, som tRPC automatisk udleder og deler med din klient.
Én fælles sandhedskilde: Definer valideringsreglerne én gang, så de gælder både på serveren (ved kørsel) og klienten (ved kompilering).
Mindre standardkode: Du behøver ikke manuelle valideringstjek eller separate DTO'er (dataoverførselsobjekter).
Tydelige API-kontrakter: Dine procedurer angiver tydeligt deres inputkrav gennem deres Zod-skemaer.

Hurtigt tjek: Zod i tRPC

Du har lært, hvordan Zod-skemaer integreres i tRPC-procedurer. Lad os teste din forståelse!

Besvar den i den interaktive lektion

Opsummering: Samspillet mellem Zod og tRPC

Godt gået! Du har lært, hvordan du integrerer Zod-skemaer i dine tRPC-procedurer.

Vi så, at metoden .input() er afgørende for at anvende Zod-skemaer på både forespørgsler og mutationer.
Denne integration giver automatisk validering, typesikkerhed fra ende til anden og tydelige API-kontrakter.
Ved at bruge Zod i tRPC bygger du mere robuste, sikre og udviklervenlige API'er med mindre indsats.

Nu skal vi udforske mere avancerede Zod-skemaer!

Gratis at komme i gang

Lær Typesikre API'er fra frontend til backend med tRPC med en AI-underviser — gratis

Skriv og kør rigtig kode i din browser, få øjeblikkelig hjælp fra en AI-underviser døgnet rundt, og fortsæt, hvor du slap, på web eller i appen.

Kurser: 10
Lektioner: 40

Start gratis Se hele kurset

Ofte stillede spørgsmål

Er lektionen “Integration af Zod i tRPC-procedurer” gratis?

Ja — alle 3 lektioner i læringssporet Typesikre API'er fra frontend til backend med tRPC, inklusive “Integration af Zod i tRPC-procedurer”, kan læses gratis i deres fulde længde her på webstedet. Derefter låser CoddyKit PRO alle lektioner op samt interaktive øvelser med en indbygget kodeeditor og en AI-underviser døgnet rundt. Typesikre API'er fra frontend til backend med tRPC-kurset indeholder 4 lektioner i alt.

Hvad lærer jeg i “Integration af Zod i tRPC-procedurer”?

Anvend Zod-schemas direkte på input til Deres tRPC-queries og -mutationer for automatisk validering. Du øver dig i Typesikre API'er fra frontend til backend med tRPC med praktisk kode, som du kører direkte i browseren, og en AI-vejleder døgnet rundt besvarer dine spørgsmål, mens du arbejder dig gennem lektionen.

Skal jeg have erfaring for at begynde på Typesikre API'er fra frontend til backend med tRPC?

Der kræves ingen tidligere erfaring. Typesikre API'er fra frontend til backend med tRPC på CoddyKit er tilrettelagt for både begyndere og øvede, så du kan starte her eller fra begyndelsen og lære i dit eget tempo. Dette er lektion 3 af 4.

Hvor lang tid tager lektionen “Integration af Zod i tRPC-procedurer”?

De fleste CoddyKit-lektioner tager cirka 5–10 minutter. Hver lektion er kort og interaktiv, så du gør løbende fremskridt og kan fortsætte, hvor du slap – på både web og app.

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

Ja. Alle Typesikre API'er fra frontend til backend med tRPC-lektioner har en indbygget kodeeditor, så du kan skrive og køre rigtig kode direkte i din browser og få øjeblikkelig feedback fra AI – uden lokal opsætning.

Alle lektioner i dette kursus

← Tilbage til Typesikre API'er fra frontend til backend med tRPC