tRPC End-to-End Type Safe APIs · Lezione

Creare il context tRPC

Comprenda come creare e popolare l'oggetto context di tRPC con dati specifici della richiesta, come le informazioni sull'utente.

Lezione 1 di 411 passaggi

Creare il context tRPC è una lezione tRPC End-to-End Type Safe APIs gratuita su CoddyKit. Questa è la lezione 1 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento tRPC End-to-End Type Safe APIs, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso tRPC End-to-End Type Safe APIs include 4 lezioni in totale.

Parti di questa lezione non sono ancora state tradotte e vengono mostrate in inglese.

What is tRPC Context?

Welcome! In tRPC, the context is a special object that's created for each incoming request to your server.

Think of it as a personalized backpack for every request. You can fill this backpack with any data that needs to be accessible by your tRPC procedures.

Why Use tRPC Context?

The tRPC context is incredibly useful for sharing request-specific data across all your API procedures. This prevents you from passing the same arguments repeatedly.

Authentication: Store authenticated user details.
Database Connections: Provide a database client for the current request.
Request-specific Data: Access headers, IP addresses, or other request info.
Logging: Attach a unique request ID for tracing.

Defining createContext

You define the context using a function, often named createContext. This function runs once for every incoming tRPC request.

It receives an object containing details about the incoming HTTP request (like headers) and should return the context object.

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.');

Accessing Request Details

Inside your createContext function, you get access to the underlying HTTP request object. This allows you to extract information like request headers or query parameters.

Let's grab a custom header, for example.

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);

Populating Context with Custom Data

You can populate the context object with any data derived from the request. A common use case is adding a user's ID or a full user object after an authentication check.

For now, let's just add a dummy user ID based on a 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);

Typing Your Context

TypeScript is tRPC's superpower! It's crucial to properly type your context object so tRPC can provide full end-to-end type safety.

You can infer the type of your context directly from your createContext function using 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' };

Using Context in Procedures

Once your context is defined and typed, any tRPC procedure can easily access it. Procedures receive an object with a ctx property, which holds your context object.

This makes user data, database clients, and other request-scoped data readily available.

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.');

Context in Action: Full Example

Here's a simplified full example showing how createContext is defined and how its data is used within a tRPC procedure.

The output simulates what the procedure would return if called with the mock request.

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);

Context Best Practices

To keep your tRPC application performant and maintainable:

Keep it Lean: Only add data that's truly needed across multiple procedures.
Avoid Heavy Logic: Complex operations (like database queries for user data) might be better placed in middleware or services called from context.
Security: Always validate and sanitize any data extracted from the raw request before adding it to context.

Context Understanding Check

Let's check your understanding of tRPC context.

Rispondi nella lezione interattiva

Recap: tRPC Context

You've learned about the powerful tRPC context!

It's an object created per-request.
It allows sharing data like user info or database clients across all procedures.
You define it with a createContext function.
Type safety is ensured by inferring its type and using it during tRPC initialization.
Procedures access context via the ctx parameter.

Next, you'll see how to use context to implement authentication with middleware!

Gratis per iniziare

Impara tRPC End-to-End Type Safe APIs con un tutor IA — gratis

Scrivi ed esegui vero codice nel tuo browser, ricevi aiuto istantaneo da un tutor IA disponibile 24/7, e riprendi da dove hai lasciato sul web o nell'app.

Corsi: 10
Lezioni: 40

Inizia a imparare gratis Visualizza il corso completo

Domande Frequenti

La lezione «Creare il context tRPC» è gratuita?

Sì — il testo completo di «Creare il context tRPC» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso tRPC End-to-End Type Safe APIs, passa a CoddyKit PRO. Il corso tRPC End-to-End Type Safe APIs include 4 lezioni in totale.

Cosa imparerò in «Creare il context tRPC»?

Comprenda come creare e popolare l'oggetto context di tRPC con dati specifici della richiesta, come le informazioni sull'utente. Eserciti tRPC End-to-End Type Safe APIs con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.

Ho bisogno di esperienza per iniziare tRPC End-to-End Type Safe APIs?

Non è richiesta alcuna esperienza precedente. tRPC End-to-End Type Safe APIs su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 1 di 4.

Quanto tempo richiede la lezione «Creare il context tRPC»?

La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.

Posso scrivere ed eseguire codice in questa lezione tRPC End-to-End Type Safe APIs?

Sì. Ogni lezione tRPC End-to-End Type Safe APIs include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.

Tutte le lezioni di questo corso

Creare il context tRPC
Middleware di autenticazione
Catene di middleware personalizzate
Middleware per logging e misurazione delle prestazioni

← Torna a tRPC End-to-End Type Safe APIs