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

Opprette tRPC-kontekst

Forstå hvordan du oppretter og fyller tRPC-kontekstobjektet med forespørselsspesifikke data, for eksempel brukerinformasjon.

Leksjon 1 av 411 trinn

Opprette tRPC-kontekst er en gratis leksjon i Typesikre API-er fra frontend til backend med tRPC på CoddyKit. Dette er leksjon 1 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-kontekst?

Velkommen! I tRPC er konteksten et spesielt objekt som opprettes for hver innkommende forespørsel til serveren.

Tenk på den som en personlig ryggsekk for hver forespørsel. Du kan fylle denne ryggsekken med alle data som må være tilgjengelige for tRPC-prosedyrene dine.

Hvorfor bruke tRPC-kontekst?

tRPC-konteksten er svært nyttig for å dele forespørselsspesifikke data på tvers av alle API-prosedyrene dine. Dette hindrer deg i å sende de samme argumentene gjentatte ganger.

Autentisering: Lagre informasjon om den autentiserte brukeren.
Databaseforbindelser: Gjøre en databaseklient tilgjengelig for den aktuelle forespørselen.
Forespørselsspesifikke data: Få tilgang til headere, IP-adresser eller annen informasjon om forespørselen.
Logging: Knytte en unik forespørsels-ID til forespørselen for sporing.

Definere createContext

Du definerer konteksten ved hjelp av en funksjon, som ofte kalles createContext. Denne funksjonen kjøres én gang for hver innkommende tRPC-forespørsel.

Den mottar et objekt som inneholder detaljer om den innkommende HTTP-forespørselen (for eksempel headere), og skal returnere kontekstobjektet.

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

// This function runs on every request
function createContext(req: { headers: Record<string, string> }) {
  console.log('Context created for a new request!');
  return {
    // We'll add more here later!
  };
}

// We'll use this context to initialize tRPC
const t = initTRPC.context<ReturnType<typeof createContext>>().create();

console.log('tRPC initialized with context.');

Få tilgang til forespørselsdetaljer

Inne i createContext-funksjonen får du tilgang til det underliggende HTTP-forespørselsobjektet. Dette gjør det mulig å hente ut informasjon som forespørselshoder eller spørringsparametere.

La oss for eksempel hente et egendefinert hode.

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

function createContext(req: { headers: Record<string, string> }) {
  const userAgent = req.headers['user-agent'] || 'unknown';
  return {
    userAgent: userAgent
  };
}

type Context = ReturnType<typeof createContext>;
const t = initTRPC.context<Context>().create();

// Simulate a request
const mockRequest = {
  headers: { 'user-agent': 'CoddyKit-Browser' }
};

const ctx = createContext(mockRequest);
console.log('User Agent in context:', ctx.userAgent);

Fylle konteksten med egendefinerte data

Du kan fylle kontekstobjektet med alle data som er avledet fra forespørselen. Et vanlig bruksområde er å legge til brukerens ID eller et fullstendig brukerobjekt etter en autentiseringskontroll.

Foreløpig legger vi bare til en eksempel-ID for brukeren basert på et hode.

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

function createContext(req: { headers: Record<string, string> }) {
  // In a real app, this would come from a JWT or session
  const userId = req.headers['x-user-id'] || 'guest_user';
  return {
    userId: userId,
    timestamp: new Date().toISOString()
  };
}

type Context = ReturnType<typeof createContext>;
const t = initTRPC.context<Context>().create();

// Simulate a request with a custom user ID header
const mockRequest = {
  headers: { 'x-user-id': 'coddykit_student_123' }
};

const ctx = createContext(mockRequest);
console.log('Context for request:', ctx);

Type konteksten

TypeScript er tRPCs superkraft! Det er avgjørende å angi riktig type for kontekstobjektet, slik at tRPC kan gi full typesikkerhet fra ende til ende.

Du kan utlede typen direkte fra createContext-funksjonen ved hjelp av ReturnType.

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

function createContext(req: { headers: Record<string, string> }) {
  const userId = req.headers['x-user-id'] || 'anonymous';
  return {
    userId: userId
  };
}

// Infer the Context type from createContext function
type Context = ReturnType<typeof createContext>;

// Now, when initializing tRPC, provide this type
const t = initTRPC.context<Context>().create();

console.log('Context type inferred and used!');
// Example of how TypeScript would see the context:
// const typedContext: Context = { userId: 'some_id' };

Bruke konteksten i prosedyrer

Når konteksten er definert og har fått en type, kan alle tRPC-prosedyrer enkelt få tilgang til den. Prosedyrer mottar et objekt med en ctx-egenskap som inneholder kontekstobjektet.

Dette gjør brukerdata, databaseklienter og andre forespørselsspesifikke data lett tilgjengelige.

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

function createContext(req: { headers: Record<string, string> }) {
  const userId = req.headers['x-user-id'] || 'guest';
  return { userId };
}

type Context = ReturnType<typeof createContext>;
const t = initTRPC.context<Context>().create();

const appRouter = t.router({
  whoAmI: t.procedure.query(({ ctx }) => {
    // Access userId directly from ctx
    return `Hello, ${ctx.userId}!`;
  }),
});

console.log('Procedure defined using context.');

Konteksten i praksis: Fullstendig eksempel

Her er et forenklet, fullstendig eksempel som viser hvordan createContext defineres, og hvordan dataene brukes i en tRPC-prosedyre.

Resultatet simulerer det prosedyren ville returnert hvis den ble kalt med den simulerte forespørselen.

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

// 1. Define your context function
function createContext(req: { headers: Record<string, string> }) {
  const userId = req.headers['x-user-id'] || 'anonymous_user';
  return {
    userId: userId,
    requestTime: new Date().toLocaleTimeString()
  };
}

// 2. Infer the context type for type safety
type Context = ReturnType<typeof createContext>;

// 3. Initialize tRPC with the context type
const t = initTRPC.context<Context>().create();

// 4. Define a simple procedure that uses context
const appRouter = t.router({
  getUserGreeting: t.procedure.query(({ ctx }) => {
    return `Welcome back, ${ctx.userId}! Last accessed at: ${ctx.requestTime}.`;
  }),
});

// --- Simulate a request and context creation ---
const mockRequest = {
  headers: { 'x-user-id': 'CoddyKitUser' }
};

const contextForRequest = createContext(mockRequest);
console.log('Context created:', contextForRequest);

// Simulate the procedure call with the created context
const simulatedOutput = appRouter._def.procedures.getUserGreeting._def.query({ ctx: contextForRequest, input: undefined });
console.log('\nSimulated Procedure Output:');
console.log(simulatedOutput);

Beste praksis for kontekst

For å holde tRPC-applikasjonen din effektiv og vedlikeholdbar:

Hold den slank: Legg bare til data som faktisk trengs på tvers av flere prosedyrer.
Unngå tung logikk: Komplekse operasjoner, som databaseoppslag for brukerdata, bør kanskje heller plasseres i middleware eller tjenester som kalles fra konteksten.
Sikkerhet: Valider og rens alltid data som hentes fra den rå forespørselen, før du legger dem til i konteksten.

Kontroller forståelsen av kontekst

La oss kontrollere forståelsen din av tRPC-kontekst.

Besvar den i den interaktive leksjonen

Oppsummering: tRPC-kontekst

Du har lært om den kraftige tRPC-konteksten!

Det er et objekt som opprettes for hver forespørsel.
Den gjør det mulig å dele data, som brukerinformasjon eller databaseklienter, på tvers av alle prosedyrer.
Du definerer den med en createContext-funksjon.
Typesikkerhet sikres ved å utlede typen og bruke den under initialiseringen av tRPC.
Prosedyrer får tilgang til konteksten via parameteren ctx.

Deretter skal du se hvordan du kan bruke kontekst til å implementere autentisering med middleware!

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

Start læringen gratis Se hele kurset

Ofte stilte spørsmål

Er leksjonen «Opprette tRPC-kontekst» gratis?

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

Forstå hvordan du oppretter og fyller tRPC-kontekstobjektet med forespørselsspesifikke data, for eksempel brukerinformasjon. 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 1 av 4.

Hvor lang tid tar leksjonen «Opprette tRPC-kontekst»?

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

← Tilbake til Typesikre API-er fra frontend til backend med tRPC