Elimina tus esquemas de API con tRPC

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.

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.

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.