Versión en EspañolES

Elimina tus esquemas de API con tRPC

¿Sabías que podemos reemplazar los esquemas de API con una biblioteca liviana y segura? Con tRPC puedes reemplazar fácilmente GraphQL o REST con formas inferidas sin esquemas ni generación de código.

This talk has been presented at React Summit 2023, check out the latest edition of this React Conference.

FAQ

La API abierta es una especificación que requiere aprender verbos como POST, GET, PATCH, DELETE, y crear archivos JSON y YAML que son sensibles a mayúsculas y minúsculas. A partir de estos archivos, se deben generar los tipos de TypeScript para asegurar la tipificación en el cliente.

Para trabajar con GraphQL es fundamental aprender sobre consultas, mutaciones y otros elementos de GraphQL. Similar a la API abierta, también se requiere generar tipos de TypeScript para cada cambio en la API, asegurándose que el frontend sea seguro en cuanto a tipos.

TRPC es una herramienta que permite evitar la generación manual de tipos y API, facilitando la integración entre el cliente y el servidor con seguridad de tipos por defecto gracias a TypeScript. Ha ganado popularidad con más de 25,000 estrellas en GitHub y 220,000 descargas semanales en NPM.

En una aplicación Next.js, TRPC se puede integrar incluyéndolo en el package.json y utilizándolo tanto en la parte del servidor como en la del cliente. Esto permite crear rutas y lógica de servidor eficientes con la ayuda de Prisma y Zod para la interacción con la base de datos y validación de objetos.

Las desventajas de usar TRPC incluyen la necesidad de tener un stack completo en TypeScript tanto en el frontend como en el backend. Aunque se adapta bien a proyectos con monorepo, también puede ser usado en multi-repo. Además, si se desea exponer la API al público, es necesario utilizar una biblioteca externa como trpc-openAPI.

Prisma es una biblioteca que facilita la comunicación con la base de datos en aplicaciones JavaScript y TypeScript. En proyectos con TRPC, Prisma se usa para definir y manejar las interacciones con la base de datos de manera eficiente y segura.

TypeScript permite extraer y utilizar la forma de los objetos definidos, asegurando que los tipos de datos sean consistentes a través del frontend y el backend. TRPC utiliza estas capacidades de TypeScript para ofrecer una seguridad de tipos por defecto, eliminando la necesidad de generar tipos de manera explícita.

Giorgio Boa

11 min

06 Jun, 2023

Comments

Video Summary and Transcription

Esta charla presenta tRPC, una herramienta que elimina la necesidad de esquemas de API y simplifica la comunicación entre el servidor y el cliente. Explora el uso de tRPC en una aplicación Next.js, mostrando cómo se utilizan TypeScript y Prisma. Se demuestran las capacidades de retroalimentación inmediata y depuración en el backend de tRPC, resaltando sus ventajas y desventajas. También se proporcionan recursos para una exploración adicional.

Available in English: Get Rid of Your API Schemas with tRPC

1. Introducción a TRPC

Short description:

Esta charla trata sobre deshacerse de los esquemas de API con TRPC. Hay dos formas de comunicarse desde el servidor y el cliente: la iniciativa de API abierta y GraphQL. La API abierta requiere aprender una nueva especificación, crear un archivo JSON o YAML que distinga entre mayúsculas y minúsculas, y generar tipos de TypeScript. GraphQL también requiere aprender una nueva especificación y generar tipos de TypeScript. Estos procesos pueden ser difíciles de mantener. TRPC es una herramienta increíble que resuelve estos problemas. Es una biblioteca popular con estadísticas impresionantes en GitHub y NPM. TypeScript nos permite extraer la forma de un objeto.

Hola a todos, bienvenidos a esta charla. Esta charla trata sobre deshacerse de los esquemas de API con TRPC. Así que básicamente quiero comenzar esta charla con un esquema de spadix.

Así que tenemos dos formas de comunicarnos desde el servidor y el cliente. Tenemos la iniciativa de API abierta y tenemos GraphQL. Comencemos desde la API abierta. La API abierta, básicamente, si eres nuevo en esta tecnología, es una nueva especificación para aprender. Así que necesitas aprender los verbos, POST, GET, PATCH, DELETE, y así sucesivamente. Necesitas crear un archivo JSON y YAML que distinga entre mayúsculas y minúsculas. Así que necesitas crear un archivo, o más o menos un archivo más, para describir todas las APIs. Y luego a partir de este archivo, tienes que generar los tipos de TypeScript. Así que si quieres que tu cliente sea seguro en cuanto a tipos, TypeScript te permite entender básicamente cuáles son las API que necesitas crear todos los tipos.

Vale, con GraphQL, el otro lado es que necesitamos entender el formato de GraphQL. Así que es una nueva especificación para aprender. De nuevo, necesitas aprender consulta, mutación y todas las cosas que necesita GraphQL. Y luego necesitas generar los tipos de TypeScript nuevamente. Así que esto es un gran problema para la API abierta. Y GraphQL es un problema para generar cada vez que cambias algo en tu API, generar estos tipos para que sean seguros en la parte del frontend.

Así que básicamente trabajo para CloudAnet. Es una empresa de consultoría. Soy un desarrollador full stack. Mi nombre de usuario es Giorgio underscore Boa. Puedes encontrarme en Twitter, en LinkedIn. Solía publicar y republicar artículos sobre frontend. Así que si quieres seguirme, estoy muy feliz al respecto. Y estoy investigando mucho cómo evitar esta lucha para generar la API y los tipos. Y encontré en TRPC, esta increíble herramienta, una nueva forma de evitar todos estos problemas. Esta biblioteca es bastante popular, con más de 25,000 estrellas en GitHub y 220,000 descargas semanales de NPM. Así que es realmente impresionante. Así que toda la biblioteca se basa en este tipo de, así que TypeScript nos da la posibilidad de extraer la forma de un objeto.

2. Explorando TRPC en una aplicación Next.js

Short description:

Esta parte explica cómo TypeScript nos permite extraer el tipo de un objeto de trabajo y cómo TRPC se basa en este tipo. El orador luego demuestra una aplicación Next.js utilizando TRPC, Prisma y el enrutador de la aplicación. El enrutador de la aplicación contiene métodos para listar, agregar y eliminar autores, con Prisma manejando la lógica de la base de datos. Se utiliza Zod para la validación en el lado del servidor, y la parte del cliente incluye un punto de conexión de API para la comunicación. El orador concluye mostrando cómo realizar consultas y mutaciones en la aplicación Next.js.

Entonces, este es un objeto de trabajo, y puedes extraer el tipo de este objeto, y tienes mi tipo que tiene un nombre y apellido como cadena. Así que TypeScript nos brinda esta posibilidad, y TRPC se basa más o menos en este tipo de.

Entonces, pasemos a una demostración. Aquí preparo una aplicación Next.js y, en lugar de package.json, incluyo TRPC, la parte del servidor de TRPC y la parte del cliente. Bien, y para la base de datos, también incluyo Prisma. Prisma es una biblioteca realmente excelente para comunicarse con tu base de datos.

Bien, sumerjámonos en el proyecto. En lugar de las rutas del servidor de origen, tenemos este tipo particular que vimos antes en nuestras diapositivas. Así que extraemos la forma de este enrutador de la aplicación, este enrutador de la aplicación es un enrutador grande. Así que puedes dividir tus mini enrutadores con toda la lógica. Así que puedes crear tu enrutador de tareas pendientes, como un enrutador de tareas pendientes para dividir muchas otras cosas. Y saltemos al enrutador de la aplicación. El enrutador de la aplicación aquí.

Bien, tenemos muchos métodos, así que podemos listar a todos los autores en este caso. Podemos agregar un autor. Y luego podemos eliminar un autor. Bien, así que aquí en esta parte, estamos poniendo nuestra lógica. Nuestra lógica de Prisma, para que podamos interactuar con la base de datos. Bien, ahora creamos el enrutador y luego tenemos nuestro modelo de Prisma. El autor con nombre, apellido y país. Luego, para la parte del servidor, también tenemos Zod. Esta es una gran biblioteca para prevenir problemas con objetos. Así que estamos analizando un objeto para verificar que la forma del objeto sea realmente la que queremos. Y luego tenemos nuestra parte del cliente. Así que tenemos una API, tenemos un punto de conexión. Estamos exponiendo este punto de conexión para comunicarnos desde el cliente y el servidor. Luego finalmente podemos crear nuestra aplicación Next, nuestra ruta Next. Así que dentro de esta ruta Next, podemos usar una consulta. Queremos obtener todos los autores, podemos mutarlos, podemos agregar y podemos eliminar. Bien, básicamente aquí puedes ver que si hago esto, ctrl espacio autor.punto agregar, eliminar y listar.

3. Explorando Retroalimentación Inmediata y Depuración en el Backend

Short description:

Esta parte explora la retroalimentación inmediata proporcionada por TypeScript al realizar cambios en el backend que afectan al frontend. El orador demuestra una aplicación básica donde se pueden guardar y eliminar autores, se realizan solicitudes HTTP y se utilizan puntos de interrupción para la depuración. También se explora el backend, con un análisis detallado de la parte del servidor y los procedimientos involucrados. Se discuten los pros y los contras de TRPC, junto con recursos para una mayor exploración.

Bien, así que si entro en la descripción de esta API y cambio algo, inmediatamente en el frontend, así que si cambio algo en el backend, inmediatamente en el frontend TypeScript me dice, okay, estás haciendo algo mal. Y esto es genial porque básicamente no generamos ningún tipo de tipo, pero de forma predeterminada, TypeScript nos brinda esta posibilidad.

Bien, podemos, okay, podemos hacerlo así. Nuevamente, ejecuto un servidor para mostrarte la aplicación. Esta es una aplicación básica, por lo que podemos guardar autores y también eliminar autores. Si inspeccionamos nuestra pestaña de red, podemos ver que cada vez que hago clic en guardar, estamos haciendo una solicitud HTTP. Y si miramos el código fuente, si pongo un punto de interrupción dentro de la biblioteca, aquí estamos dentro de trpc slash client slash dist, el archivo dentro de la biblioteca, puedes ver que si hago clic en guardar aquí, tengo un punto de interrupción en mi Visual Studio code, y básicamente estamos llamando a slash API slash trpc author list para obtener todos los autores. Estamos haciendo una consulta, por lo que la consulta es un get, la mutación es un post, luego tenemos una señal para abortar la recuperación. Y si ejecuto nuevamente mi código, puedes ver que estamos agregando un autor básicamente.

Genial, también quiero profundizar en la parte del backend. Así que si ponemos dentro del otro archivo, aquí en el autor, puedo poner un punto de interrupción aquí en la parte de agregar para poder guardar. Y luego aquí en la parte izquierda puedo inspeccionar la pila de llamadas y podemos pasar a la parte del servidor. Así que trpc server, te animo a depurar la biblioteca, no solo esta, sino las bibliotecas en general, para entender cómo funciona internamente, es realmente divertido. Y como puedes ver, si guardamos algo, nuevamente, creo que estamos en los puntos de interrupción, tal vez podamos seguir un poco. Puedes ver que aquí tenemos nuestra información y en lugar de estos OPTS tenemos estos procedimientos. Tenemos Agregar, Eliminar, Listar, genial. Y también tenemos nuestros archivos. Así que nuestra definición. Este es nuestro código. Genial. Volvamos a las diapositivas.

Hay muchas ventajas de TRPC, no hay generación de código. Tenemos TypeSafe de forma predeterminada porque usamos TypeScript y podemos colaborar mejor entre el frontend y el backend. Hay algunas desventajas. Necesitamos tener un stack de TypeScript, frontend y backend en TypeScript. El monorepo se adapta muy bien a esta biblioteca, pero también se puede tener un multi-repo. Si queremos tener versiones o seleccionar características de campo, necesitamos implementar nuestro propio código. Y si queremos exponer nuestra API al público, necesitamos usar una biblioteca externa, trpc-openAPI. Bueno, resumamos un poco con este sitio web. Puedes comenzar con una aplicación nueva con Prisma, Next, Tailwind y Next.js, por supuesto. ¿Quién está usando trpc en este problema? Puedes encontrar muchas empresas que están usando trpc, y ahora es tu turno. Pruébalo. Con este sitio web, puedes encontrar muchas colecciones y recursos sobre trpc. Gracias por ver. Puedes encontrarme en Twitter. Mi nombre de usuario es giorgio underscore boa. Que tengas una buena conferencia. Adiós.