Muévete rápido y no rompas nada.\nAPIs con seguridad de tipos de extremo a extremo hechas fácil.

Experimenta todo el poder de la inferencia de TypeScript para impulsar la productividad en tu aplicación full-stack.

Estrella

Inicio Rápido

Supported by

22 more

Many thanks to all of our amazing sponsors!

Seguridad de tipos automática

¿Hiciste un cambio en el servidor? TypeScript te alertará de errores en tu cliente ¡antes de guardar el archivo!

Experiencia de desarrollo ágil

tRPC no requiere pasos de compilación, evitando generación de código, inflamiento en runtime o procesos de build.

Independiente del framework

Compatible con todos los frameworks y entornos JavaScript. Fácil de integrar en proyectos existentes.

Autocompletado

Usar tRPC es como usar un SDK para tu API en el servidor, brindando confianza en tus endpoints.

Tamaño de paquete ligero

tRPC tiene cero dependencias y una huella mínima en el cliente, manteniéndolo liviano.

Baterías incluidas

Ofrecemos adaptadores para React, Next.js, Express, Fastify, AWS Lambda, Solid, Svelte y más.

Utilizado por

tRPC es probado y confiado por equipos tecnológicos líderes y muchas empresas Fortune 500.

Sencillo de usar con
una experiencia de desarrollo inigualable

Es rápido y sencillo comenzar con tRPC para construir una API con seguridad de tipos.

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;

Define tus procedures

El primer paso para crear una API tRPC es definir tus procedures.

Los procedures son las funciones que usaremos para construir tu backend. Son composable y pueden ser queries, mutations o subscriptions. Los Routers contienen múltiples procedures.

En este procedure, usamos un validador Zod para asegurar que la entrada del cliente tenga exactamente la forma que espera nuestro procedure. También devolveremos una cadena de texto simple desde la query.

Al final del archivo, exportamos el tipo del router para poder usarlo en nuestro código frontend en unos momentos.

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

Crea tu servidor HTTP

A continuación, creamos nuestro servidor HTTP usando appRouter. ¡Ahora tenemos un servidor tRPC funcionando!

tRPC cuenta con múltiples adaptadores para integrarse en tu entorno actual: Next.js, Express, Fetch API (Astro, Remix, SvelteKit, Cloudflare Workers, etc.), Fastify, AWS Lambda o un servidor HTTP Node estándar.

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

¡Conecta tu cliente y comienza a consultar!

Con el servidor en funcionamiento, podemos crear un cliente y comenzar a consultar datos.

Al crear el cliente, pasamos el tipo AppRouter para obtener autocompletado de TypeScript e Intellisense que coinciden exactamente con la API del backend, ¡sin necesidad de generación de código!

¡Pruébalo tú mismo!

Node.js

React

Next.js

Esta es una aplicación Node.js mínima usando 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

Usa esta plantilla

Quizás no necesites una API tradicional

"Creé tRPC para permitir a los desarrolladores move faster eliminando la necesidad de una capa API tradicional, manteniendo la confianza en que nuestras aplicaciones no fallarán durante iteraciones rápidas."
¡Pruébalo y cuéntanos tu opinión!