Hoppa till huvudinnehållet

Vi presenterar tRPC v11

· 6 minuters läsning
tRPC
tRPC
tRPC-teamet
Inofficiell Beta-översättning

Denna sida har översatts av PageTurner AI (beta). Inte officiellt godkänd av projektet. Hittade du ett fel? Rapportera problem →

Även om tRPC v11 länge varit produktionsredo via @next-taggen har vi fastnat i att lägga till nya funktioner utan att strikt hålla oss till semantisk versionering. Idag är vi glada att äntligen kunna dra av plåstret och meddela den officiella releasen av tRPC v11!

Sedan vårt senaste majorversionssläpp i november 2022 har tRPC-gemenskapen vuxit avsevärt:

Med lanseringen av tRPC v11 är vi glada att dela med oss att v11 redan används i produktion av många stora TypeScript-projekt tack vare dess stabila utveckling på vår @next-kanal

För nya projekt kan du komma igång med ett exempelprogram för att lära dig om tRPC v11. För projekt som fortfarande kör tRPC v10 besök migrationsguiden för v11.

Översikt över förändringar​

v11 är till stor del bakåtkompatibel med v10, men den innehåller många nya funktioner och förbättringar. Här är höjdpunkterna:

Stöd för TanStack Query v5​

När TanStack Query v5 släpptes krävdes några brytande ändringar i tRPC:s react-query-integration. Detta har funnits tillgängligt ganska länge via @next-taggen, men nu är det officiellt släppt. Många projekt har redan valt att uppgradera och njuter av fullt React Suspense-stöd samt många andra förbättringar. För råd om att migrera din tRPC React-klientkod kan du följa TanStack Querys egen migrationsguide.

Ny TanStack React Query-integration​

Se blogginlägget

Stöd för FormData / icke-JSON-innehållstyper​

En av våra mest efterfrågade funktioner är möjligheten att skicka och ta emot mer än bara JSON-data. Med tRPC v11 kan du nu skicka och ta emot data i olika icke-JSON-innehållstyper, FormData, och binära typer som Blob, File och Uint8Array. Du hittar ett exempel på hur du använder dessa innehållstyper här

ts
import { publicProcedure, router } from './trpc';
import { octetInputParser } from '@trpc/server/http';
import { z } from 'zod';
 
const appRouter = router({
  formData: publicProcedure
    .input(z.instanceof(FormData))
    .mutation(async ({ input }) => {
                        
(parameter) input: FormData
    }),
  file: publicProcedure
    .input(octetInputParser)
    .mutation(async ({ input }) => {
                        
(parameter) input: ReadableStream<any>
    }),
});
ts
import { publicProcedure, router } from './trpc';
import { octetInputParser } from '@trpc/server/http';
import { z } from 'zod';
 
const appRouter = router({
  formData: publicProcedure
    .input(z.instanceof(FormData))
    .mutation(async ({ input }) => {
                        
(parameter) input: FormData
    }),
  file: publicProcedure
    .input(octetInputParser)
    .mutation(async ({ input }) => {
                        
(parameter) input: ReadableStream<any>
    }),
});

React Server Components / Next.js App Router​

Även om du kunnat använda tRPC med Next.js App Router sedan dag ett, antingen genom att:

Bron mellan dessa två metoder har varit lite hackig. Valideringsmönster blir inkonsekventa när man måste hantera olika datahämtningsmetoder, vilket resulterar i en mindre optimal utvecklarupplevelse som inte lever upp till tRPC:s standard.

För att åtgärda detta har vi förbättrat stödet för React Server Components (RSC) och lagt till prefetch-hjälpmedel för att underlätta användandet av RSC:ers kraft som körs enbart på servern, i kombination med React Queries mycket dynamiska klientcache. Du kan nu köra en procedur på servern i en RSC, plocka upp det väntande löftet på klienten och automatiskt hydrera React Query-cachen på klientsidan. Detta gör att du kan bygga mycket dynamiska applikationer utan att drabbas av server-klient-vattenfall. Läs mer i vår dokumentation om Server Components.

Utöver dessa nya prefetch-mönster har vi lagt till experimentellt stöd för serverfunktioner. Du kan läsa mer om detta i vårt blogginlägg. Vi planerar att fortsätta iterera på denna funktion när serverfunktioner blir en mer etablerad metod i ekosystemet.

Vi har också samarbetat med TanStack-teamet för att hjälpa till att designa API:er för deras serverfunktioner. Vårt mål är att dela upp delar av tRPC:s kraftfulla mellanvarussystem i ett separat paket som kan användas i hela ekosystemet.

Strömmade svar från queries och mutationer​

Vi har introducerat httpBatchStreamLink som möjliggör strömmade svar från queries. Detta är användbart när du arbetar med stora dataset eller när du behöver bearbeta data i realtid och skicka dem till frontend under tiden. Detta är inte en ersättning för prenumerationer, utan ytterligare ett verktyg i din verktygslåda.

ts
// @filename: server.ts
import { publicProcedure, router } from './trpc';
 
const appRouter = router({
  examples: {
    iterable: publicProcedure.query(async function* () {
      let i = 0;
      while (true) {
        await new Promise((resolve) => setTimeout(resolve, 500));
        yield i++;
      }
    }),
  },
});
 
export type AppRouter = typeof appRouter;
 
 
// @filename: client.ts
import { createTRPCClient, httpBatchStreamLink } from '@trpc/client';
import type { AppRouter } from './server';
 
const trpc = createTRPCClient<AppRouter>({
  links: [
    httpBatchStreamLink({
      url: 'http://localhost:3000',
    }),
  ],
});
const iterable = await trpc.examples.iterable.query();
         
const iterable: AsyncIterable<number, never, unknown>
 
for await (const value of iterable) {
  console.log('Iterable:', value);
                            
const value: number
}
ts
// @filename: server.ts
import { publicProcedure, router } from './trpc';
 
const appRouter = router({
  examples: {
    iterable: publicProcedure.query(async function* () {
      let i = 0;
      while (true) {
        await new Promise((resolve) => setTimeout(resolve, 500));
        yield i++;
      }
    }),
  },
});
 
export type AppRouter = typeof appRouter;
 
 
// @filename: client.ts
import { createTRPCClient, httpBatchStreamLink } from '@trpc/client';
import type { AppRouter } from './server';
 
const trpc = createTRPCClient<AppRouter>({
  links: [
    httpBatchStreamLink({
      url: 'http://localhost:3000',
    }),
  ],
});
const iterable = await trpc.examples.iterable.query();
         
const iterable: AsyncIterable<number, never, unknown>
 
for await (const value of iterable) {
  console.log('Iterable:', value);
                            
const value: number
}

Förenklade routerdefinitioner​

Vi har introducerat en ny förkortad syntax för att definiera din router för att förenkla processen att skapa routes. Dokumentation

ts
const appRouter = router({
  // Shorthand plain object for creating a sub-router
  nested1: {
    proc: publicProcedure.query(() => '...'),
  },
  // Equivalent of:
  nested2: router({
    proc: publicProcedure.query(() => '...'),
  }),
});
ts
const appRouter = router({
  // Shorthand plain object for creating a sub-router
  nested1: {
    proc: publicProcedure.query(() => '...'),
  },
  // Equivalent of:
  nested2: router({
    proc: publicProcedure.query(() => '...'),
  }),
});

Prenumerationer: Server-Sent Events och andra förbättringar​

  • tRPC v11 introducerar ett nytt sätt att hantera prenumerationer med Server-Sent Events (SSE). Detta är ett utmärkt sätt att hantera realtidsuppdateringar i din applikation utan behov av mer komplexa WebSockets. Vi rekommenderar att använda detta som första val framöver.

  • Vi har lagt till stöd för JavaScript- generatorer i prenumerationer. Detta gör att du kan skriva mer komplexa prenumerationshanterare som kan leverera flera värden över tid och städa upp efter sig på ett mycket JS-nativt sätt.

  • Prenumerationer stöder nu utvalidering vilket förbättrar typsäkerheten i dina prenumerationshanterare.

Adjö v9 .interop()-läge​

I tRPC v10 introducerade vi .interop()-läget för att ge en smidig migreringsväg för tRPC v9-användare. Med tRPC v11 har vi tagit bort .interop()-läget. Om du fortfarande använder .interop()-läget kan du följa v10-migreringsguiden för att slutföra din övergång till de API:er som används av dagens tRPC.

Migrera till v11​

Om du för närvarande använder tRPC v10 kan du följa migreringsguiden för att uppgradera till v11. Guiden täcker alla brytande ändringar och nya funktioner i v11.

Tack!​

Från hela tRPC Core Team - tack för att du använder och stöder tRPC.