tRPC

tRPC permite crear APIs type-safe sin escribir schemas OpenAPI o clients manuales. El cliente puede inferir tipos directamente desde los routers definidos en servidor.

Encaja especialmente bien en aplicaciones fullstack TypeScript donde cliente y servidor viven en el mismo repo o comparten tipos.

Server Components y Server Actions

tRPC puede integrarse con React Server Components. La integración con Server Actions ha existido en estado experimental, así que conviene revisar documentación y estabilidad antes de usarla como base de arquitectura.

Relación con Data Layer

tRPC puede ser una forma de exponer un Data Layer tipado. Aun así, no elimina la necesidad de pensar en permisos, validación y separación entre lógica de aplicación e infraestructura.

Inferir el tipo de una respuesta

Si recibimos un user desde tRPC y luego lo pasamos como prop, podemos inferir el tipo desde el router:

import type { inferProcedureOutput } from "@trpc/server";
 
type User = inferProcedureOutput<AppRouter["user"]["getUser"]>;
 
type Props = {
  user: User;
};
 
export default function UserCard({ user }: Props) {
  return <p>{user.name}</p>;
}

Relacionado