¿Qué es tRPC?

Como Typescript es un lenguaje que puede ser usado en todos los lugares donde se use Javascript. Es muy comun verlo siendo usado junto con frameworks de Frontend (React, Angular, Vue, Svelte) y tambien en el Backend (con Nodejs, Deno o Bun).

Ahora si hablamos de como comunicar el Backend con el Frontend, es decir practicamente como enviar datos en formato JSON, tipicamente tenemos 2 opciones:

REST APIs
GraphQL APIs

Estas son ampliamente utilizadas, y hay mucha informacion al respecto.

Pero si ya estas usando Typescript tanto en el frontend como en el backend deberias saber que hay una forma más de como comunicarlos usando una biblioteca más llamada tRPC.

La cual su proposito es exactamente el mismo enviar dato en formato JSON desde el servidor al ciente y viceversa.

Solo que como estaras usando typescript en ambos proyectos, cuando escribas consultas en el clinte, podras solicitar solo los datos que necesite tu interfaz en lugar de obtener una respuesta gigante, o tambien obtendras autocompletado para poder saber que puedes consultar y que no. Y lo genial es que no tienes que aprender nada nuevo, solo conocer una biblioteca mas.

Es decir que al final tRPC es solo una biblioteca que simplica la comunicacion HTTP entre el cliente y el servidor, lo que te evita que tengas que crear una REST API o graphql api

Tipicamente tRPC se usa en Proyectos del ecosistema de React y Typescript. Por ejemplo con Frameworks como Nextjs. aunque tambien es posible usarlo con frameworks como solidjs, sveltejs, o astro

https://media.sitepen.com/blog-images/2022/12/Intro-to-tRPC-1024x538.jpg

Ahroa, Para aquello que no conocen GraphQL hya un video completo en ete cana

pero en resumen es basicamente usar un lenguaje en medio del servidor y el ciente que permita obtener solo los datos que se necesiten. Estos tienen muchos beneficios en aplicaciones grandes, es por esto que empresas como AIrbnb, Meta, Twitter, o Paypal, Pinterest y muchas otras lo usan al dia de hoy.

Sin embargo si eres desarrollador y quieres implemntar tu propia api de GraphQL, este necesitara que aprendas las bases de otro lenguajes con herramientas y conceptos nuevos.

Lo que si estas creando un proyecto pequeño, puede ser demasiado trabajo.

Asi que tRPC en comparacion es mas simple.

de hecho Los pasos para implementarlos basicamente son asi.

Primero creamos un servidor con las consultas o Queries que vas hacer desde el cliente, este puede estar creado usado un Framework como express o con cualquier otro

const appRouter = router({
  greeting: publicProcedure.query(() => 'hello tRPC v10!'),
});

Por cierto las queries son como los metodos GET

y las consultas que el cliente enviara con datos se les llama mutaciones, estas serian equivalentes a los metodos POST, PUT, DELETE

Luego extraemos los tipos de datos de esta funcion y lo exportamos para que el cliente sepa que solicitar

export type AppRouter = typeof appRouter;

quedando el codigo del backend asi

const appRouter = router({
  greeting: publicProcedure.query(() => 'hello tRPC v10!'),
});
 
export type AppRouter = typeof appRouter;

Finalmente desde el frontend o el framework de javascript que uses, podemos ahora obtener autocompletado de que cosas podemos consular:

const user = await trpc.greeting.usQuery();

Y con esto ya estaria. Claro hay unas bibliotecas que tienes que instalar y configurar, pero en esencia tRPC solo trata de esto.

Ahora todo esto es posible solo si el proyecto del backend y el frontend estan en el mismo repositorio. Es decir si es un monorepo:

Ya que el frontend sabe en donde encontrar el codigo del backend y poder extraer los tipos de datos. Ademas tRPC funciona muy bien con una biblioteca de validaciones de datos como lo es Zod, que en conjunto con typescript, analiza los errores no solo en produccion sino tambien en desarrollo

Esto hace que tRPC sea una opcion mas practica que REST pero mas simple que Graphql, dejandolo en el medio:

Untitled

Usando tRPC tendriamos un Stack web completo de Typescript es decir un backend de Nodejs, y algun framework como express. Escribiendo nuestras rutas con tRPC,

y algun clinete que use React, Solid o Svelte, junto con Typescript que puede consultar lo que el backen permita.

De hecho en lado cliente tRPC hace uso de React Query,

https://trpc.io/docs/react#3-add-trpc-providers

<trpc.Provider client={trpcClient} queryClient={queryClient}>
      <QueryClientProvider client={queryClient}>
        {/* Your app here */}
      </QueryClientProvider>
    </trpc.Provider>

LO que tambien es una ventaja al estar usando una biblioteca que optimiza las consultas, esto lo pueden ver mejo en el video de REact QUery.

Todo esto nos deja un Stack como este:

Untitled

Es decir una aplicacion web completa uando Typescript de iniico a fin, para proyectos MonoRepos.

En fin he estado usadolo estos ultimos meses, y es bastante simple usarlo, sin embargo diria que su complejidad esta en configurarlo, asi que muy pronto voy a crear un curso de esta herramienta para que pudan usarlo en sus proximos proyecto.

trpc

DigitalOcean