Oprettelse af tRPC-context
Forstå, hvordan De opretter og udfylder tRPC-context-objektet med request-specifikke data som brugeroplysninger.
Oprettelse af tRPC-context er en gratis Typesikre API'er fra frontend til backend med tRPC-lektion på CoddyKit. Dette er lektion 1 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.
Hvad er tRPC-kontekst?
Velkommen! I tRPC er konteksten et særligt objekt, der oprettes for hver indgående forespørgsel til din server.
Tænk på den som en personlig rygsæk til hver forespørgsel. Du kan fylde denne rygsæk med alle de data, som dine tRPC-procedurer skal kunne tilgå.
Hvorfor bruge tRPC-kontekst?
tRPC-konteksten er utrolig nyttig til at dele forespørgselsspecifikke data på tværs af alle dine API-procedurer. Det forhindrer dig i at sende de samme argumenter gentagne gange.
- Godkendelse: Gem oplysninger om den godkendte bruger.
- Databaseforbindelser: Stil en databaseklient til rådighed for den aktuelle forespørgsel.
- Forespørgselsspecifikke data: Få adgang til headere, IP-adresser eller andre oplysninger om forespørgslen.
- Logning: Tilknyt et unikt forespørgsels-ID til sporing.
Definition af createContext
Du definerer konteksten ved hjælp af en funktion, der ofte hedder createContext. Funktionen kører én gang for hver indgående tRPC-forespørgsel.
Den modtager et objekt med oplysninger om den indgående HTTP-forespørgsel, f.eks. 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.');Adgang til oplysninger om forespørgslen
Inde i din createContext-funktion får du adgang til det underliggende HTTP-anmodningsobjekt. Det giver dig mulighed for at udtrække oplysninger som anmodningsheadere eller forespørgselsparametre.
Lad os for eksempel hente en brugerdefineret header.
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);Udfyldning af konteksten med brugerdefinerede data
Du kan udfylde kontekstobjektet med alle data, der er afledt af anmodningen. Et almindeligt anvendelsesområde er at tilføje en brugers ID eller et komplet brugerobjekt efter en godkendelseskontrol.
Indtil videre tilføjer vi blot et eksempel på et bruger-ID baseret på en header.
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);Typning af din kontekst
TypeScript er tRPC's superkraft! Det er afgørende at angive den korrekte type for dit kontekstobjekt, så tRPC kan levere fuld typesikkerhed fra ende til anden.
Du kan udlede typen direkte fra din createContext-funktion ved hjælp af 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' };Brug af kontekst i procedurer
Når din kontekst er defineret og har fået en type, kan alle tRPC-procedurer nemt få adgang til den. Procedurer modtager et objekt med en ctx-egenskab, som indeholder dit kontekstobjekt.
Det gør brugerdata, databaseklienter og andre data, der er knyttet til den aktuelle anmodning, let tilgængelige.
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.');Kontekst i praksis: Komplet eksempel
Her er et forenklet komplet eksempel, der viser, hvordan createContext defineres, og hvordan dens data bruges i en tRPC-procedure.
Outputtet simulerer det, som proceduren ville returnere, hvis den blev kaldt med den simulerede anmodning.
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);Bedste praksis for kontekst
Sådan holder du din tRPC-applikation effektiv og nem at vedligeholde:
- Hold den enkel: Tilføj kun data, der reelt er nødvendige på tværs af flere procedurer.
- Undgå tung logik: Komplekse handlinger, f.eks. databaseforespørgsler efter brugerdata, bør måske placeres i middleware eller tjenester, der kaldes fra konteksten.
- Sikkerhed: Valider og rens altid data, der udtrækkes fra den rå anmodning, før du tilføjer dem til konteksten.
Kontrol af din forståelse af kontekst
Lad os kontrollere, om du har forstået tRPC-konteksten.
Opsummering: tRPC-kontekst
Du har lært om den effektive tRPC-kontekst!
- Det er et objekt, der oprettes for hver anmodning.
- Den gør det muligt at dele data som brugeroplysninger eller databaseklienter på tværs af alle procedurer.
- Du definerer den med en
createContext-funktion. - Typesikkerheden sikres ved at udlede dens type og bruge den under initialiseringen af tRPC.
- Procedurer får adgang til konteksten via parameteren
ctx.
Dernæst skal du se, hvordan du bruger kontekst til at implementere godkendelse med middleware!
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 “Oprettelse af tRPC-context” gratis?
Ja — alle 3 lektioner i læringssporet Typesikre API'er fra frontend til backend med tRPC, inklusive “Oprettelse af tRPC-context”, 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 “Oprettelse af tRPC-context”?
Forstå, hvordan De opretter og udfylder tRPC-context-objektet med request-specifikke data som brugeroplysninger. 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 1 af 4.
Hvor lang tid tager lektionen “Oprettelse af tRPC-context”?
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
- Oprettelse af tRPC-context
- Godkendelses-middleware
- Tilpassede middleware-kæder
- Middleware til logging og måling af ydeevne