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

Overblik over tRPC's kernebegreber

Få et overordnet overblik over tRPC's arkitektur, herunder routere, procedurer og context.

Lektion 3 af 411 trin

Overblik over tRPC's kernebegreber 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 hele lektionen gratis nedenfor — og derefter øve dig praktisk i browseren med en indbygget kodeeditor og en AI-vejleder, der er tilgængelig 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.

Introduktion til tRPC's kernebegreber

Nu ser vi på tRPC's byggesten. Vi gennemgår routere (hvordan API'et organiseres), procedurer (de funktioner, klienterne kalder) og kontekst (data for den enkelte forespørgsel).

tRPC-forløbet: Fra klient til server

tRPC-forløbet: Klienten kalder en procedure, routeren dirigerer den, proceduren kører (ofte ved hjælp af kontekst), og et typesikkert svar sendes tilbage til klienten.

Mød tRPC-routere

Routere er rygraden i et tRPC-API. De grupperer relaterede procedurer i moduler, definerer API-strukturen og kan samles til ét komplet API.

Enkel routerstruktur

En router er blot et objekt, der indeholder dine funktioner, som kan kaldes. Her er en konceptuel skitse af en minimal brugerrouter, som du kan udfylde med procedurer.

import { router, publicProcedure } from '../trpc';

// This is a conceptual router definition.
// 'router' and 'publicProcedure' would be defined in your tRPC setup file.
export const userRouter = router({
  // All user-related procedures will be defined here
  // e.g., 'getUser', 'createUser', 'updateUser'
});

Forstå procedurer

Procedurer er de faktiske funktioner, som klienten kalder – dine API-slutpunkter. Hver procedure definerer sit input, sit output og forretningslogikken på serversiden.

Forespørgsler til hentning af data

En forespørgselsprocedure henter data. Den bør være skrivebeskyttet og idempotent – samme input giver samme resultat – hvilket gør den velegnet til caching på klientsiden. Som en HTTP GET.

Grundlæggende forespørgselsprocedure

Her er en konceptuel forespørgsel, der henter en bruger efter ID: Den angiver et input og returnerer et brugerobjekt.

// Inside your userRouter (from previous scene)
// This procedure gets a user by ID.
getUserById: publicProcedure
  .input(z.string()) // Expects a string (the user ID)
  .query(({ input }) => {
    // In a real app, you'd fetch from a database here.
    // For now, imagine we're returning a simple object.
    return { id: input, name: "Jane Doe", email: "jane@example.com" };
  }),

Mutationer til ændring af data

En mutation ændrer data – opretter, opdaterer eller sletter. Den har bivirkninger og er ikke idempotent, så gentagne kald kan give forskellige resultater. Som en HTTP POST, PUT eller DELETE.

Forklaring af tRPC-kontekst

Kontekst oprettes én gang pr. forespørgsel og sendes til alle procedurer i den. Her gemmer du data, der gælder for den enkelte forespørgsel, som den godkendte bruger eller en databaseforbindelse.

Tjek af kernebegreber

Lad os hurtigt tjekke din forståelse af tRPC's centrale byggesten.

Opsummering af kernebegreber

Opsummering: Routere organiserer API'et, procedurer (forespørgsler til læsning og mutationer til skrivning) udfører arbejdet, og kontekst deler data for den enkelte forespørgsel. Næste emne er dit første projekt.

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

Ofte stillede spørgsmål

Er lektionen “Overblik over tRPC's kernebegreber” gratis?

Ja — hele teksten til “Overblik over tRPC's kernebegreber” kan læses gratis her på nettet. Hvis du vil øve dig interaktivt med en indbygget kodeeditor og en AI-vejleder døgnet rundt og få adgang til resten af Typesikre API'er fra frontend til backend med tRPC-kurset, skal du opgradere til CoddyKit PRO. Typesikre API'er fra frontend til backend med tRPC-kurset indeholder 4 lektioner i alt.

Hvad lærer jeg i “Overblik over tRPC's kernebegreber”?

Få et overordnet overblik over tRPC's arkitektur, herunder routere, procedurer og context. 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 “Overblik over tRPC's kernebegreber”?

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

  1. Hvad er tRPC?
  2. Type-sikkerhedens styrke
  3. Overblik over tRPC's kernebegreber
  4. Opsætning af Deres første tRPC-projekt
← Tilbage til Typesikre API'er fra frontend til backend med tRPC