Typsäkra API:er från frontend till backend med tRPC · Lektion

Utöka tRPC:s funktionalitet

Upptäck avancerade sätt att utöka tRPC med anpassade builders, plugins och integrationer med andra bibliotek.

Lektion 3 av 411 steg

Utöka tRPC:s funktionalitet är en gratis lektion i Typsäkra API:er från frontend till backend med tRPC på CoddyKit. Detta är lektion 3 av 4. Du kan läsa vilka 3 lektioner som helst i den här lärvägen kostnadsfritt i sin helhet – därefter låser CoddyKit PRO upp alla lektioner, plus praktisk övning med en inbyggd kodredigerare och en AI-lärare dygnet runt. Den ingår i lärvägen för Typsäkra API:er från frontend till backend med tRPC, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i Typsäkra API:er från frontend till backend med tRPC innehåller totalt 4 lektioner.

Utöka tRPC:s kärna

tRPC är mycket kraftfullt direkt från början, men ibland behöver applikationen mer anpassningsmöjligheter och specialiserat beteende. I den här lektionen får du se hur du utökar tRPC bortom grundläggande middleware.

Vi går igenom anpassade procedure builders för att skapa specialiserade API-endpoints och diskuterar hur tRPC kan integreras smidigt med andra bibliotek, till exempel ORM:er.

Varför anpassade builders?

Standardmiddleware är utmärkt för att tillämpa gemensam logik på alla eller en grupp av procedurer, till exempel autentisering eller loggning.

Men tänk om du behöver definiera specifika typer av procedurer, som adminProcedure eller publicProcedure, där varje procedur har unika kontextegenskaper eller förkonfigurerade middleware-kedjor? Då passar anpassade procedure builders perfekt!

Skapa en builder med `createBuilder`

tRPC tillhandahåller verktyget createBuilder som hjälper dig att definiera en egen procedure factory. Denna builder kan utöka kontexten (ctx), lägga till metadata eller automatiskt tillämpa middleware på alla procedurer som byggs med den.

Den låter dig abstrahera gemensam konfigurationslogik till ett återanvändbart mönster, vilket gör dina API-definitioner renare och mer konsekventa.

Builder-exempel: adminprocedur

Vi skapar en adminProcedure. Denna builder säkerställer att användaren inte bara är inloggad (via protectedProcedure) utan även har flaggan isAdmin satt i sin kontext. Denna logik tillämpas sedan automatiskt på alla procedurer som använder adminProcedure.

// Minimal tRPC-like setup for demonstration
type Context = { user?: { id: number; isAdmin?: boolean } };

const mockProcedure = {
  use: (middleware: any) => ({
    use: (nextMiddleware: any) => ({
      _isBuilder: true,
      _middlewares: [middleware, nextMiddleware]
    }),
    _isBuilder: true,
    _middlewares: [middleware]
  }),
  _isBuilder: true,
  _middlewares: []
};

const t = {
  procedure: mockProcedure
};

// --- Actual tRPC Builder Code ---
const protectedProcedure = t.procedure.use(async ({ ctx, next }: any) => {
  if (!ctx.user) {
    throw new Error('Not authenticated');
  }
  return next({ ctx: { ...ctx, user: ctx.user } });
});

const adminProcedure = protectedProcedure.use(async ({ ctx, next }: any) => {
  if (!ctx.user?.isAdmin) {
    throw new Error('Not an admin!');
  }
  return next({ ctx: { ...ctx, user: ctx.user } });
});

console.log("Protected procedure builder defined.");
console.log("Admin procedure builder defined.");
console.log("Admin procedure has " + adminProcedure._middlewares.length + " middlewares.");

Fördelar med anpassade builders

Anpassade builders ger flera betydande fördelar:

  • Återanvändbarhet: Definiera komplex logik en gång och tillämpa den på många procedurer.
  • Typsäkerhet: Framtvinga specifika kontexttyper för grupper av procedurer.
  • Läsbarhet: Procedurerna blir självbeskrivande (till exempel visar adminProcedure.query(...) tydligt vilka krav som gäller).
  • Konsekvens: Säkerställ att alla procedurer av en viss typ följer specifika regler och kontroller.

Integration med externa bibliotek

tRPC föreskriver inte hur ditt datalager ska se ut. Det innebär att du enkelt kan integrera det med valfri ORM (till exempel Prisma eller Drizzle), databasklient eller extern API-tjänst.

Nyckeln till denna smidiga integration är ofta att initiera instanser av dessa klienter och koppla dem till din tRPC-kontext. Då blir de direkt tillgängliga för alla dina procedurer.

Ge en ORM kontext (Prisma)

Ett mycket vanligt mönster i tRPC-applikationer är att initiera din ORM-klient (till exempel Prisma Client) och sedan koppla den instansen till ditt tRPC-kontextobjekt.

Det gör att alla dina tRPC-procedurer kan komma åt databasklienten via ctx.prisma, vilket centraliserar hanteringen och ger typsäkerhet.

// Minimal tRPC-like setup for demonstration
type MockPrismaClient = {
  user: {
    findUnique: (args: { where: { id: number } }) => { id: number; name: string } | null;
  };
};

type ContextWithPrisma = {
  prisma: MockPrismaClient;
};

const mockProcedure = {
  query: (handler: (opts: { ctx: ContextWithPrisma }) => any) => ({
    _handler: handler,
    _isQuery: true
  })
};

const t = {
  procedure: mockProcedure
};

// --- Actual tRPC Context Integration ---
const publicProcedure = t.procedure;

const getUserProcedure = publicProcedure.query(async ({ ctx }) => {
  const user = await ctx.prisma.user.findUnique({ where: { id: 1 } });
  return user ? `User name: ${user.name}` : 'User not found.';
});

// --- Demonstration (conceptual execution) ---
const mockPrisma: MockPrismaClient = {
  user: {
    findUnique: (args) => {
      if (args.where.id === 1) {
        return { id: 1, name: 'Alice' };
      }
      return null;
    }
  }
};

const mockContext: ContextWithPrisma = { prisma: mockPrisma };

console.log("Prisma client attached to context type.");
console.log("Conceptual handler output for user 1:");
console.log(await getUserProcedure._handler({ ctx: mockContext }));

Kraften i plugins (konceptuellt)

Utöver builders erbjuder tRPC ett experimentellt API, createTRPCPlugin. Plugins ger ännu djupare kopplingar till tRPC:s interna funktioner och låter dig anpassa fel formatering, lägga till egna datatransformatorer eller ändra begärans livscykel på avancerade sätt.

De är avsedda för verkligt komplexa utökningar på kärnnivå som påverkar hur tRPC fungerar på en grundläggande nivå.

När ska vad användas?

Valet mellan anpassade builders och plugins beror på vad du behöver utöka:

  • Anpassade builders: Bäst för att definiera specifika typer av procedurer, berika kontextobjektet eller tillämpa gemensamma middleware-kedjor. De verkar på nivån för procedurdefinitioner.
  • Plugins: Idealiska för att ändra tRPC:s kärnbeteende, till exempel anpassad felhantering, serialisering/deserialisering av data eller integration med externa system på en global och grundläggande nivå.

Snabb kontroll

Vilka av följande är viktiga fördelar med att använda anpassade tRPC procedure builders?

Sammanfattning av utökningar

I den här lektionen har vi gått igenom hur du utökar tRPC:s funktioner. Vi lärde oss att använda anpassade procedure builders för att skapa specialiserade och återanvändbara procedurer som adminProcedure, vilket förbättrar återanvändbarhet, typsäkerhet och konsekvens.

Vi såg också hur externa bibliotek, till exempel ORM:er, kan integreras genom att koppla dem till tRPC-kontexten. Slutligen berörde vi den avancerade potentialen hos tRPC-plugins för djupare ändringar i kärnan. Dessa verktyg ger dig möjlighet att anpassa tRPC efter applikationens unika behov.

Gratis att börja

Lär dig Typsäkra API:er från frontend till backend med tRPC med en AI-lärare – gratis

Skriv och kör riktig kod i webbläsaren, få omedelbar hjälp av en AI-lärare dygnet runt och fortsätt där du slutade – på webben eller i appen.

Kurser
10
Lektioner
40

Vanliga frågor

Är lektionen ”Utöka tRPC:s funktionalitet” gratis?

Ja – du kan läsa vilka 3 lektioner som helst i lärvägen Typsäkra API:er från frontend till backend med tRPC, inklusive ”Utöka tRPC:s funktionalitet”, kostnadsfritt i sin helhet här på webben. Därefter låser CoddyKit PRO upp alla lektioner, plus interaktiv övning med en inbyggd kodredigerare och en AI-lärare dygnet runt. Kursen i Typsäkra API:er från frontend till backend med tRPC innehåller totalt 4 lektioner.

Vad lär jag mig i ”Utöka tRPC:s funktionalitet”?

Upptäck avancerade sätt att utöka tRPC med anpassade builders, plugins och integrationer med andra bibliotek. Ni övar på Typsäkra API:er från frontend till backend med tRPC med praktisk kod som körs direkt i webbläsaren, medan en AI-handledare som är tillgänglig dygnet runt svarar på Era frågor under lektionen.

Behöver jag någon erfarenhet för att börja lära mig Typsäkra API:er från frontend till backend med tRPC?

Du behöver inga förkunskaper. Utbildningen i Typsäkra API:er från frontend till backend med tRPC på CoddyKit är upplagd för allt från nybörjare till avancerade elever, så att du kan börja här eller från början och gå fram i din egen takt. Detta är lektion 3 av 4.

Hur lång tid tar lektionen ”Utöka tRPC:s funktionalitet”?

De flesta CoddyKit-lektioner tar cirka 5–10 minuter. Varje lektion är kort och interaktiv, så att du gör stadiga framsteg och kan fortsätta precis där du slutade – på webben eller i appen.

Kan jag skriva och köra kod i den här Typsäkra API:er från frontend till backend med tRPC-lektionen?

Ja. Varje Typsäkra API:er från frontend till backend med tRPC-lektion innehåller en inbyggd kodredigerare, så att du kan skriva och köra riktig kod direkt i webbläsaren och få omedelbar AI-feedback – utan lokal installation.

Alla lektioner i den här kursen

  1. Konfigurera ett tRPC-monorepo
  2. Koddelning och återanvändning
  3. Utöka tRPC:s funktionalitet
  4. Versionshantera och publicera delade tRPC-paket
← Tillbaka till Typsäkra API:er från frontend till backend med tRPC