Flyg framåt utan att bryta saker. Enkelt skapande av typsäkra API:er från slutpunkt till slutpunkt.

Upplev den fulla kraften av TypeScript-inferens för att öka produktiviteten i din fullstack-applikation.

Stjärna (på GitHub)

Snabbstart

Supported by

22 more

Many thanks to all of our amazing sponsors!

Automatisk typsäkerhet

Gjorde du en ändring på serversidan? TypeScript varnar dig för fel på din klient innan du ens sparar filen!

Smidig DX (Developer Experience)

tRPC har inga bygg- eller kompileringssteg, vilket innebär ingen kodgenerering, runtime-uppblåsthet eller byggsteg.

Ramverksoberoende

Kompatibel med alla JavaScript-ramverk och runtime-miljöer. Det är enkelt att lägga till i dina befintliga projekt.

Autokomplettering

Att använda tRPC är som att använda ett SDK för din API:s serverkod, vilket ger dig tillförsikt i dina slutpunkter.

Lätt paketstorlek

tRPC har noll beroenden och en minimal klient-sida storlek vilket gör det lättviktigt.

Batterier ingår

Vi tillhandahåller adapters för React, Next.js, Express, Fastify, AWS Lambda, Solid, Svelte och fler.

Används av

tRPC är testat och betrott av ledande teknikteam och många Fortune 500-företag.

Enkelt att använda med
oöverträffad utveckarupplevelse

Det är snabbt och enkelt att komma igång med tRPC för att bygga ett typsäkert API.

ts
const t = initTRPC.create();
 
const router = t.router;
const publicProcedure = t.procedure;
 
const appRouter = router({
  greeting: publicProcedure
    .input(z.object({ name: z.string() }))
    .query((opts) => {
      const { input } = opts;
               const input: {
    name: string;
}
 
      return `Hello ${input.name}` as const;
  }),
});
 
export type AppRouter = typeof appRouter;

ts
const t = initTRPC.create();
 
const router = t.router;
const publicProcedure = t.procedure;
 
const appRouter = router({
  greeting: publicProcedure
    .input(z.object({ name: z.string() }))
    .query((opts) => {
      const { input } = opts;
               const input: {
    name: string;
}
 
      return `Hello ${input.name}` as const;
  }),
});
 
export type AppRouter = typeof appRouter;

Definiera dina procedurer

Första steget för att skapa ett tRPC-API är att definiera dina procedurer.

Procedurer är funktionerna vi kommer använda för att bygga din backend. De är composable och kan vara queries, mutations eller subscriptions. Routers innehåller flera procedurer.

I denna procedur använder vi en Zod-validerare för att säkerställa att indatan från klienten har exakt den form som vår procedur förväntar sig. Vi kommer också returnera en enkel textsträng från queryn.

I slutet av filen exporterar vi router-typen så vi kan använda den i vår frontend-kod inom bara några ögonblick.

ts
const { listen } = createHTTPServer({
  router: appRouter,
});
 
// The API will now be listening on port 3000!
listen(3000);

ts
const { listen } = createHTTPServer({
  router: appRouter,
});
 
// The API will now be listening on port 3000!
listen(3000);

Skapa din HTTP-server

Därefter skapar vi vår HTTP-server med vår appRouter. Nu har vi en tRPC-server igång!

tRPC har många adaptrar så att den kan möta dig där du är: Next.js, Express, Fetch API (Astro, Remix, SvelteKit, Cloudflare Workers, etc.), Fastify, AWS Lambda eller en vanlig Node HTTP-server.

ts
const trpc = createTRPCClient<AppRouter>({
  links: [
    httpBatchLink({
      url: 'http://localhost:3000',
    }),
  ],
});
 
const res = await trpc.greeting.query({ name: 'John' });

ts
const trpc = createTRPCClient<AppRouter>({
  links: [
    httpBatchLink({
      url: 'http://localhost:3000',
    }),
  ],
});
 
const res = await trpc.greeting.query({ name: 'John' });

Anslut din klient och börja skicka queries!

Nu när servern är igång kan vi skapa en klient och börja hämta data.

Vi skickar med AppRouter-typen när vi skapar klienten för att få TypeScript-autocompletion och Intellisense som matchar backend-API:et utan någon kodgenerering!

Prova själv!

Node.js

React

Next.js

Detta är en minimal Node.js-applikation som använder tRPC.

Loading sandbox...

⚠️

Heads up!

WebContainers require modern Web APIs that likely aren't supported by your browser. Either open this page in a Chrome, or download this sandbox from StackBlitz and run it locally.

You can dismiss this warning to see the code, although you'll likely see unexpected errors.

Open in StackBlitz

Använd denna mall

Du kanske inte behöver ett traditionellt API

"Jag byggde tRPC för att låta människor move faster genom att ta bort behovet av ett traditionellt API-lager, samtidigt som vi kan vara säkra på att våra appar inte kommer att brytas när vi itererar snabbt."
Prova själv och låt oss veta vad du tycker!