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

Integrering av Zod i tRPC-prosedyrer

Bruk Zod-skjemaer direkte på inndataene til tRPC-spørringer og mutasjoner for automatisk validering.

Leksjon 3 av 411 trinn

Integrering av Zod i tRPC-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.

Zod for tRPC-inndata

Velkommen! I denne leksjonen lærer vi hvordan du integrerer Zod-schemaer direkte i tRPC-prosedyrene dine. Denne kraftige kombinasjonen sikrer at API-inndataene dine alltid er gyldige og typesikre fra ende til ende.

Du får se hvordan du bruker Zod både for query- og mutation-prosedyrer, slik at backend-løsningen din blir mer robust og utviklervennlig.

Hvorfor validere inndata?

Validering av inndata er en kritisk del av å bygge sikre og pålitelige API-er. Det fungerer som en kvalitetskontroll ved inngangen til backend-løsningen din.

  • Sikkerhet: Hindrer ondsinnede eller feilformaterte data i å nå serverlogikken.
  • Dataintegritet: Sikrer at databasen bare lagrer gyldige og forventede dataformater.
  • Forutsigbarhet: Backend-logikken kan stole på strukturen til innkommende data, noe som reduserer feil ved kjøring.
  • Bedre utvikleropplevelse: Utviklere får umiddelbar tilbakemelding på ugyldige inndata.

Metoden `.input()`

tRPC gjør det utrolig enkelt å integrere Zod. Hver tRPC-prosedyre (query, mutation eller subscription) har en .input()-metode.

Denne metoden tar imot et Zod-schema, som tRPC deretter bruker til å validere alle innkommende data for prosedyren automatisk. Hvis inndataene ikke samsvarer med schemaet, håndterer tRPC feilen for deg!

Validering av query-inndata

For query-er forventer du ofte parametere som en ID eller et søkeord. Zod hjelper deg med å sikre at disse inndataene har riktig type og format.

La oss se på et eksempel der vi vil hente en bruker ved hjelp av den unike ID-en. Vi bruker Zod til å sikre at userId er en gyldig UUID-streng.

Eksempel på query-prosedyre

Slik definerer du en tRPC-query-prosedyre som bruker et Zod-schema til å validere inndataene:

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 av mutation-inndata

Mutation-er innebærer ofte å opprette eller oppdatere data, noe som betyr at de vanligvis tar imot mer komplekse inndataobjekter. Zod egner seg perfekt til å validere slike strukturer.

Tenk deg at du vil opprette et nytt blogginnlegg. Vi validerer title og det valgfrie content for å sikre at de oppfyller bestemte kriterier.

Eksempel på mutation-prosedyre

Her er en mutation-prosedyre som validerer inndataene for å opprette et nytt innlegg ved hjelp av et Zod-objektskjema:

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 valideringsfeil

En av de største fordelene ved å integrere Zod direkte med tRPC er automatisk feilhåndtering.

  • Hvis en klient sender inndata som ikke samsvarer med Zod-schemaet ditt, fanger tRPC automatisk opp valideringsfeilen.
  • Deretter sender den et standardisert BAD_REQUEST-svar til klienten, med detaljer om hvorfor valideringen mislyktes.
  • Det betyr at du ikke trenger å skrive manuelle try/catch-blokker for grunnleggende inndatavalidering!

Fordeler med direkte integrasjon

Kombinasjonen av Zod og tRPCs .input()-metode gir flere kraftige fordeler:

  • Typesikkerhet fra ende til ende: Zod-schemaet definerer den nøyaktige inndatatypen, som tRPC automatisk utleder og deler med klienten.
  • Én sannhetskilde: Definer valideringsreglene én gang, så gjelder de både på serveren (ved kjøring) og klienten (ved kompilering).
  • Mindre standardkode: Du trenger ikke manuelle valideringskontroller eller separate DTO-er (Data Transfer Objects).
  • Tydelige API-kontrakter: Prosedyrene angir tydelig kravene til inndata gjennom Zod-schemaene sine.

Rask sjekk: Zod i tRPC

Du har lært hvordan Zod-schemaer integreres i tRPC-prosedyrer. La oss teste forståelsen din!

Oppsummering: Samspillet mellom Zod og tRPC

Godt jobbet! Du har lært hvordan du integrerer Zod-schemaer i tRPC-prosedyrene dine.

  • Vi så at metoden .input() er nøkkelen til å bruke Zod-schemaer i både query-er og mutation-er.
  • Denne integrasjonen gir automatisk validering, typesikkerhet fra ende til ende og tydelige API-kontrakter.
  • Ved å bruke Zod i tRPC kan du bygge mer robuste, sikre og utviklervennlige API-er med mindre innsats.

Deretter skal vi utforske mer avanserte Zod-schemaer!

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 «Integrering av Zod i tRPC-prosedyrer» gratis?

Ja – du kan lese valgfritt 3 av leksjonene i læringsstien Typesikre API-er fra frontend til backend med tRPC, inkludert «Integrering av Zod i tRPC-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 «Integrering av Zod i tRPC-prosedyrer»?

Bruk Zod-skjemaer direkte på inndataene til tRPC-spørringer og mutasjoner for automatisk validering. 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 «Integrering av Zod i tRPC-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. Introduksjon til Zod-skjemaer
  2. Definering av komplekse Zod-skjemaer
  3. Integrering av Zod i tRPC-prosedyrer
  4. Transformering og viderevalidering av Zod-data
← Tilbake til Typesikre API-er fra frontend til backend med tRPC