Despídete de tus esquemas de API con tRPC

Rate this content
Bookmark
Slides

¿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. En esta charla, entenderemos los beneficios de tRPC y cómo aplicarlo en una aplicación de NextJs. Si quieres reducir la complejidad de tu proyecto, no te puedes perder esta charla.

29 min
02 Dec, 2022

Video Summary and Transcription

La charla de hoy presenta TRPC, una biblioteca que elimina la necesidad de generación de código y proporciona seguridad de tipos y una mejor colaboración entre el front-end y el back-end. TRPC se demuestra en una aplicación de Next JS integrada con Prisma, lo que permite una implementación y una interacción sencillas con la base de datos. La biblioteca permite un uso sin problemas en el cliente, con renombramiento automático de procedimientos y la capacidad de llamar métodos sin generar tipos. La interacción cliente-servidor de TRPC se basa en solicitudes HTTP y permite una fácil depuración y trazado. La biblioteca también proporciona comprobación y validación de tipos en tiempo de ejecución utilizando Zod.

Available in English

1. Introducción al esquema de API con trPC

Short description:

Hoy hablaremos sobre cómo deshacerte de tu esquema de API con trPC. Hay dos formas principales de comunicarse entre el servidor y el cliente: API abierta y GraphQL. La API abierta requiere aprender una nueva especificación, escribir JSON o YAML sensible a mayúsculas y minúsculas, y generar esquemas y tipos de TypeScript. Con GraphQL, necesitas aprender una nueva especificación, generar tipos de TypeScript y cargarlos en el cliente. Encontré una solución en TRPC, una biblioteca popular con más de 100,000 descargas semanales en npm y 60,000 estrellas en GitHub.

Y hoy hablaremos sobre cómo deshacerte de tu esquema de API con trPC. Así que quiero comenzar mi charla con la fatiga del esquema. Tenemos dos formas principales de comunicarnos entre el servidor y el cliente. Tenemos la API abierta y tenemos GraphQL. La API abierta es una especificación de API abierta, un lenguaje agnóstico final. Así que conoces los verbos HTTP como POST, GET, PATCH, DELETE, etcétera, etcétera. Y es un nuevo lenguaje para aprender.

Si quieres usar la API abierta, debes aprender una nueva especificación. Luego debes escribir JSON o YAML sensible a mayúsculas y minúsculas. Por cierto, YAML es horrible. Y debes generar tu esquema, tus tipos de TypeScript, cada vez que cambies algo en la documentación de la API abierta. De acuerdo. Veamos la parte de GraphQL. Con GraphQL, es un lenguaje de manipulación y consulta de datos de código abierto, nuevamente un lenguaje, y necesitas aprender cosas nuevas. Así que es un formato GraphQL. Y debes aprender la nueva especificación, por lo tanto, consultas, mutaciones, cosas así, etcétera y así sucesivamente. Y luego siempre debes generar tus tipos de TypeScript. Así que si cambias algo en el GraphQL, debes generar este tipo y lo cargas en el cliente. De acuerdo. Estoy luchando mucho con este tipo de cosas porque trabajo en una empresa de consultoría, Flowing, y encontré una solución en TRPC, y luego te mostraré cómo.

Mi nombre de usuario en LinkedIn y Twitter es Giorgio underscore boa. Si quieres tuitear sobre esta charla y etiquetarme y etiquetar también a la conferencia, lo apreciaría mucho.

Así que volvamos a TRPC. TRPC es una biblioteca bastante famosa. Más de 100,000 descargas semanales en npm y más de 60,000 estrellas en GitHub. Bastante popular. De acuerdo.

2. Implementando TRPC con Next JS y Prisma

Short description:

La biblioteca se basa en extraer la forma de un objeto utilizando TRPC. Se utiliza una aplicación Next JS para demostrar la implementación de TRPC y su integración con Prisma. Se define el enrutador de autores con diferentes procedimientos para obtener una lista de autores, agregar autores y eliminar autores. La API de Prisma se utiliza en la lógica empresarial para interactuar con la base de datos. En la carpeta del cliente, se define el archivo TRPC con el enrutador 'up' obtenido de la carpeta del servidor.

Toda la biblioteca se basa en este tipo que puedes ver en la pantalla. De acuerdo. Aquí tenemos un objeto. Mi objeto de trabajo con mi nombre y apellido. Y con el tipo, podemos extraer la forma de este objeto para obtener un tipo. De acuerdo. Y ahora mostraremos cómo funciona con TRPC.

Aquí tengo una aplicación Next JS, una simple, y decidí agregar TRPC desde cero para mostrarte lo fácil que es implementarlo. También creé una conexión con Prisma porque TRPC y Prisma son realmente una gran combinación. De acuerdo. Aquí tenemos nuestro esquema, el esquema de Prisma es nuestro modelo, modelo autor, y tenemos una semilla porque Prisma puede ayudarnos con la semilla en nuestra base de datos si está vacía. De acuerdo, tenemos una carpeta de origen y, como puedes ver, en las páginas tenemos la carpeta API. Dentro de la carpeta API, necesitamos crear una carpeta TRPC, y dentro de la carpeta TRPC, necesitamos definir un archivo como este con corchetes cuadrados, y luego para nosotros, obtener todos los parámetros de consulta y darnos la información. Así que necesitamos exponer este punto final. En este punto final, definimos desde TRPC next con esta API, definimos nuestro punto final. En este punto final, tenemos algunas configuraciones, pero lo más importante es este enrutador 'up'. En este enrutador 'up', tenemos la posibilidad de definir muchos enrutadores. Aquí solo tenemos el enrutador de autores y aquí tenemos el tipo del que mencioné antes. Entonces, a partir de este objeto, estamos extrayendo la forma del objeto y definiendo el enrutador 'up'. Este tipo es realmente importante para el cliente. Y ahora veremos cómo. Este es mi enrutador de autores y en este enrutador de autores, tengo algunos procedimientos diferentes. Entonces, defino obtener una lista de autores, puedo agregar autores y luego puedo eliminar uno, por supuesto. Esta es mi lógica empresarial y en la lógica empresarial, utilizo la API de Prisma. Por ejemplo, Prisma.author.findMany o, por ejemplo, si quiero agregar un nuevo autor, Prisma.author.findFirst y luego, si no está presente, crearé el registro.

De acuerdo, pero pasemos al cliente. Vimos antes que exportamos el tipo 'up router'. Entonces, estamos extrayendo la forma de este enrutador y ahora, en la carpeta del cliente, definimos el archivo TRPC, y en este archivo, hay algunas configuraciones, pero la parte más importante es esta, crear TRPC next con el genérico y aquí definimos el enrutador 'up'. El enrutador 'up' llega directamente desde la carpeta que vimos antes, 'server routers_app'.

3. Usando TRPC en la Parte del Cliente

Short description:

De esta manera, podemos usar TRPC en la parte del cliente. Podemos llamar a los métodos add, delete y list sin generar ningún tipo. Gestionamos el manejo de delete y save, e invalidamos la lista cada vez que guardo o elimino para actualizarla. Una cosa genial es que TypeScript renombra automáticamente los procedimientos cuando se modifican. Interactuar con TRPC desde la parte del servidor y del cliente es un gran beneficio. Ahora profundicemos en la biblioteca y veamos cómo funciona internamente. Definimos los métodos en el cliente TRPC, y la consulta es un get mientras que la mutación es un post.

De esta manera, podemos usar TRPC en la parte del cliente. Así que aquí está nuestro slash index, ok, la propia página de nuestra aplicación. Podemos usar TRPC de esta manera, TRPC.author.list, pero si elimino esta lista y presiono control espacio, como puedes ver con TypeScript, podemos saber que puedo llamar a add, delete y list. Y esto es genial porque no generamos ningún tipo para hacerlo, todo está listo para usar.

Ok, genial, como puedes ver aquí, estamos buscando los autores. Luego gestionamos el manejo de delete y save, e invalidamos la lista cada vez que guardo o elimino para actualizarla. Así que podemos iniciar nuestra aplicación. Aquí hay algunos códigos de Prisma. Ok. Y si vamos aquí, tenemos esta lista, y con el botón save guardamos un nuevo autor, y luego podemos eliminarlos. Genial. Una cosa realmente genial es que si vamos a los enrutadores, en el enrutador de autores, genial, y decidimos cambiar el nombre del procedimiento, así que cambiemos este a new, y boom, en el index aquí, puedes ver que TypeScript lo renombró automáticamente para mí, así que es realmente genial. Pero si decidimos no hacerlo con el símbolo renombrado, sino hacerlo manualmente, así que elimino aquí head, ok, si lo hacemos manualmente, como este, tan pronto como me mueva al index, podemos ver que TypeScript me notifica que algo ha cambiado internamente. Así que es un gran beneficio interactuar desde tu parte del servidor y del cliente, y creo que esto es genial.

Pero quiero mostrarte más. Ahora vamos a profundizar en la biblioteca, porque quiero mostrarte cómo funciona internamente. Así que voy a refactorizar mi clase. Aquí, añadir nuevo, eliminar, guardar. Creo que ahora está bien. Así que si voy aquí. Sí, perfecto. Si abro la inspección, coloco algunos puntos de interrupción en la biblioteca cliente de TRPC. Ok, si hago clic en este, genial. Y actualizo. Como puedes ver aquí, estamos definiendo, estamos dentro del cliente TRPC. Tal vez no puedas verlo. Tal vez sí. Ok, estamos dentro del cliente TRPC, y estamos definiendo los métodos. La consulta es un get, la mutación es un post, por supuesto, porque una mutación necesita tener alguna información adicional. Ok, si continuamos, hicimos un depurador, y habilitamos esto para debug.

4. Understanding TRPC Client-Server Interaction

Short description:

Dentro del cliente, la biblioteca desencadena una solicitud HTTP con una estructura de URL específica. Esto permite que la parte del cliente de TRPC llame a la lógica del negocio. Al depurar la aplicación, se pueden establecer puntos de interrupción en la parte de la lógica del negocio y rastrearlos hasta la biblioteca. La propiedad OPTS contiene procedimientos como list, add y delete, que son funciones internas del servidor TRPC. El procedimiento delete incluye el resolvedor de subrayado def, que en última instancia llama a la función Prisma.author.findMany.

De acuerdo, actualicemos. Quizás pueda, de acuerdo. Ampliemos un poco. De acuerdo, como puedes ver, estamos usando useQuery. Esta es nuestra función interna, y dentro de useQuery, tenemos la ruta, por ejemplo, author.list. Si continuamos con el depurador, tenemos la mutación, por lo tanto, tenemos author.add y también author.delete. Genial.

Y quiero mostrarte otras cosas desde el cliente. Si continuamos, aquí tenemos la solicitud HTTP, por lo tanto, bajo el capó, la biblioteca va a desencadenar una solicitud HTTP y mira la URL. Como puedes ver, slash API slash TRPC slash blah blah blah. Entonces, author.list es nuestro procedimiento, y luego tienes muchos parámetros que Next.js, bajo el capó, recopila para nosotros, y luego nosotros, la parte del cliente de TRPC, podemos llamar a nuestra lógica del negocio. Pero ¿cómo? Veamos en acción la parte del cliente, la parte del servidor.

Entonces, si coloco un depurador aquí y lo ejecuto, tal vez detenga este, y ejecuto el depurador desde Visual Studio Code, la aplicación, por supuesto, es la misma, porque es la misma base de código. De acuerdo. Como puedes ver aquí, tenemos un punto de interrupción en nuestra parte de la lógica del negocio. Pero si retrocedemos un poco, podemos ir a la biblioteca. Aquí puedes ver TRPC server, este índice punto blah, blah, blah. ¿De acuerdo? Si actualizo la aplicación, quiero mostrarte esta propiedad en particular. Así que vamos a comprobar. De acuerdo. Genial. Dentro de OPTS, tenemos procedimientos. Dentro de estos procedimientos, tenemos list, add y delete. Y esta es la función interna del servidor TRPC. Y dentro de delete, tenemos underscore def. Y dentro de underscore def, tenemos el resolvedor. El resolvedor es una función. Tenemos cosas de Webpack. Pero al final, la función es nuestra función. Entonces, Prisma.author.findMany.

5. TRPC Server Pros and Cons

Short description:

El servidor TRPC funciona seleccionando los procedimientos y ejecutando la aplicación. La biblioteca tiene ventajas como la ausencia de generación de código, seguridad de tipos y una mejor colaboración entre el front-end y el back-end. Sin embargo, también tiene desventajas como la necesidad de utilizar un stack de TypeScript y la creación de más procedimientos para la versión y la selección selectiva de campos. Para exponer la API públicamente, se utiliza la biblioteca TRPC-openAPI. Un resumen de TRPC incluye la opción de utilizar create.t3.gg para una configuración rápida y el reconocimiento de empresas como Netflix e InterValcal.com como usuarios de TRPC.

Seleccionarlos. Blah, blah, blah. Así que si ejecuto la aplicación, como puedes ver, todo el flujo termina aquí. Así es más o menos como funciona el servidor TRPC.

Genial. Volvamos a las diapositivas. Para hablar de las ventajas y desventajas de la biblioteca.

Entonces, las ventajas. Sin generación de código, como viste antes. No generamos ningún tipo de código para nuestros procedimientos, mutaciones, etc. Seguridad de tipos por defecto. Si cambiamos el nombre del procedimiento, TypeScript nos alertará de inmediato si algo está mal. Y luego, una mejor colaboración entre el front-end y el back-end. Tenemos un lenguaje común, porque en el back-end llamamos a la función add, y en el front-end hacemos lo mismo. Con una API REST, a veces el nombre de la función es diferente. Así que ahora, con esta biblioteca, creo que la colaboración es mejor.

¿Cuáles son las desventajas? Stack de TypeScript. Necesitas tener el back-end y el front-end en TypeScript. Si quieres tener una versión de tu API o seleccionar algunos campos específicos en un modelo, como seleccionar solo un campo, cosas así, necesitas crear más procedimientos. Uno para la versión 1, otro para la versión 2, y así sucesivamente. Y otra desventaja, que en realidad no es una desventaja. Si necesitas exponer esta API al público, necesitas utilizar esta biblioteca en particular. Esta biblioteca se llama TRPC-openAPI. Con un decorador, puedes exponer esta API públicamente y también crear la documentación de la API abierta.

Genial. En resumen, si quieres empezar ahora mismo con TRPC, puedes utilizar create.t3.gg. Esta biblioteca inicia una aplicación TRPC con Tailwind, Prisma, NextAuthentication, etc., etc. Hay muchas cosas que hacer sin necesidad de configuración manual y es realmente genial. ¿Quién está utilizando TRPC? Netflix, InterValcal.com, pero en este problema en particular, puedes encontrar muchas empresas que han firmado para mostrar que están utilizando TRPC. Si quieres probarlo ahora, puedes ir a trpc.io y encontrarás muchos recursos sobre TRPC.

QnA

Q&A Session: Elon Musk and TRPC Calls

Short description:

Durante la sesión de preguntas y respuestas, el orador aborda la pregunta de si Elon Musk aprobaría más de 200 llamadas TRPC y cómo evitar una mala agrupación. El orador explica que la respuesta depende del contexto y sugiere dividir los procedimientos en varios servicios y comunicarse con ellos a través de TRPC u otros canales.

Así que aquí inserto una diapositiva para tomar una foto de ustedes porque necesito demostrarle a mi esposa que estuve en la conferencia. ¿Pueden decir hola? Hola. Genial, genial. Gracias. Muchas gracias, Giorgio. Por favor, pasen a nuestro stand de preguntas y respuestas.

Esa fue una gran charla. Yo mismo he sido un poco vago al aprender sobre TRPC y me alegra no haberlo hecho porque ahora lo aprendí de ti. Así que ese tiempo fue bien invertido. Eso es increíble. Y creo que muchas otras personas también han aprendido mucho porque tenemos muchas buenas preguntas aquí.

Y por supuesto, tenemos que empezar con la primera pregunta. Es la pregunta de Elon. Vale. ¿Elon Musk aprobaría más de 200 llamadas TRPC y cómo te aseguras de que no estén mal agrupadas? Vale. Creo que Elon Musk es demasiado exigente. Permíteme decirlo. Vale, depende de tu contexto. Tienes que razonar sobre el stack de TRPC. Y si tienes muchos procedimientos, necesitas dividirlos en muchos servicios y luego comunicarte con los servicios, con TRPC o tal vez otros canales. Sí, vale. Así que básicamente él no sabe de qué está hablando. Sí, sí. Nunca, nunca. Ellie está aplaudiendo allí. Sí, un aplauso muy triste. Vale. Sigamos adelante.

Handling Multiple Repos and Scale with TRPC

Short description:

¿Cómo maneja TRPC múltiples front-ends que no están en un mono-repo con un back-end? Es posible incluir TRPC en su aplicación con múltiples repositorios, pero puede presentar desafíos en términos de refactorización de código y versionado. TRPC es más adecuado para microservicios y la creación de múltiples servicios. Las ventajas de TRPC sobre Relay, el marco de Relay de Facebook, son subjetivas. El almacenamiento en caché y la invalidación de caché en TRPC se pueden manejar utilizando React Query, y TRPC también ofrece agrupación para múltiples llamadas.

Esta es una pregunta en la que también estaba pensando. ¿Cómo manejarías una situación en la que tienes múltiples front-ends que no están en un mono-repo con un back-end, ¿verdad? ¿Es algo que TRPC puede admitir o solo es para ese tipo de arquitectura de back-end para front-end?

De acuerdo. Entonces tienes un mono-repo con un... No tienes un mono-repo. No tienes un mono-repo. Entonces tienes un cliente en un repositorio y tienes un servidor en otro repositorio. ¿Cómo se mantienen sincronizadas estas dos cosas y cómo se comunican? De acuerdo. Esta es una pregunta realmente buena. Desafortunadamente, tengo la respuesta. Entonces puedes... Si tienes múltiples repositorios, pierdes la función de refactorización, por supuesto, porque tienes la base de código en dos partes diferentes. Pero si encapsulas el tipo de enrutador dentro de nuestra biblioteca, puedes incluir esa biblioteca en el cliente. Pero al final, tendrás problemas con la versión de las cosas y cosas así. Así que puedes hacerlo. ¿Lo recomendarías? Creo que el enfoque de TypeScript de pila completa es el mejor. Pero si quieres incluir TRPC en tu aplicación con múltiples repositorios, puedes hacerlo.

La siguiente pregunta es una pregunta sobre escala, como siempre. ¿Puede TRPC funcionar para aplicaciones a gran escala, especialmente monolitos? ¿O es más adecuado para aplicaciones más pequeñas y microservicios? Creo que es mejor con microservicios y crear múltiples servicios. Hay algunas pruebas de concepto del autor de TRPC que muestran cómo integrar múltiples servicios para comunicarse y crear una arquitectura de microservicios. Eso es genial.

Hay una pregunta. ¿Cuáles son las ventajas de TRPC sobre Relay, específicamente, el marco de Relay de Facebook? ¿Lo has usado y sabes cuáles podrían ser las ventajas? No. Sí, esa es una pregunta complicada, creo. Relay es una de esas cosas en las que las personas que lo aman realmente lo aman y todos los demás no lo entienden. Así que hablen entre ustedes, encuentren a un compañero de Relay y convéncanse mutuamente de usarlo. Creo que tampoco he respondido esta pregunta.

Es una pregunta de Elon Musk. ¿Cómo manejas el almacenamiento en caché y la invalidación de caché de entidades en TRPC? ¿Está incorporado o tienes que hacerlo tú mismo? Hander De Hoody está usando una React query para que puedas aprovechar todas las funciones de una React query. También una característica interesante de TRPC es la agrupación. Entonces, si en un segundo realizas muchas llamadas, Hander De Hoody las agrupa para crear cosas interesantes.

Q&A: Resolución de conflictos y casos de uso de tRPC

Short description:

tRPC maneja la resolución de conflictos en la lógica empresarial mediante la verificación de la existencia de claves primarias antes de crear nuevas entradas. El cliente de tRPC depende del servidor de tRPC y se utiliza para llamar al punto de conexión de tRPC. Si bien tRPC es una solución potente en ciertos contextos, las API REST y GraphQL pueden ser mejores opciones para exponer API públicas y manejar múltiples clientes con requisitos de propiedades específicas. tRPC no reemplaza las API REST o GraphQL, sino que es una solución adecuada en ciertos escenarios.

Genial. Permíteme ver, hay un par de preguntas más, déjame que las pase por moderación y luego las leeremos juntos. Aquí vamos.

¿tRPC maneja las condiciones de carrera cuando varias personas acceden a la API para realizar la misma acción? ¿O se encarga de eso Prisma? Básicamente, creo que la pregunta se refiere a la resolución de conflictos. La resolución de conflictos se encuentra dentro de tu lógica empresarial. Como mostré antes, si quiero crear otro autor con el mismo apellido, el apellido en este caso es la clave, la clave primaria, debes verificar antes si la clave primaria existe o no. Y luego, si existe, lanzar una excepción. Muy bien.

Esta es una pregunta interesante. Entonces, ¿tRPC solo para clientes? ¿Tiene algún uso tRPC si en realidad no tienes un componente de servidor? No puedes hacer mucho con él, ¿verdad? Creo que no. No. Entonces, el cliente de tRPC no tiene sentido sin el servidor de tRPC. Porque está llamando al punto de conexión trcp, trpc, y no. Sí. Por cierto, tRPC, es difícil de pronunciar. RPC son llamadas a procedimientos remotos. Pero, ¿qué significa la T? ¿Es TypeScript o tipos? TypeScript, creo que es RPC de TypeScript. Porque RPC es llamar a una función de otro servidor. Me equivoco mucho al escribir trcp, trcp. Es un lío. Sí.

Muy bien. Bueno, entremos en nuestro tema candente, la patata caliente. ¿Crees que GraphQL o REST son mejores que tRPC en algunos casos? ¿Hay casos en los que tRPC no será la solución adecuada y GraphQL o REST serían un enfoque mejor? Sí, estoy sonriendo. Porque sé la respuesta. ¿De acuerdo? En algunos contextos, tRPC es muy bueno. Pero si necesitas exponer una API pública, tal vez una API REST sea mejor, GraphQL también. Si tienes múltiples clientes, como digamos TV, móvil y una aplicación de frontend, y necesitas obtener alguna propiedad de un modelo, tal vez GraphQL sea más adecuado para ti. Así que hay muchos casos de uso para usar GraphQL y API REST también. Esto no será un reemplazo para ellos, por lo que puede ser una buena solución en algunos contextos.

TRPC Runtime Type Check and Validation

Short description:

TRPC proporciona verificación de tipo y validación en tiempo de ejecución de los datos que ingresan a la API utilizando bibliotecas como Zod. Zod se ha vuelto popular en el mundo del desarrollo de TypeScript por su API fácil de usar.

Genial, sí. Siempre usa la mejor herramienta para el trabajo. No hay una bala de plata o martillo mágico. Y siempre depende. Depende, por supuesto. ¿TRPC proporciona una verificación de tipo en tiempo de ejecución o la validación de los datos que ingresan a la API? Sí, esta es una parte que debo omitir por el momento. Pero cuando llamas a una mutación, tienes en el objeto de entrada, por supuesto, si quiero agregar un autor, necesito pasar el nombre, apellido y en este caso, el país. Y luego tienes Zod y muchas otras bibliotecas para validar la entrada y lanzar una excepción y notificarte que estás pasando algo incorrecto. Entonces, Zod está en la capa base de TRPC y hay muchas otras bibliotecas de validación que pueden ser útiles en este caso. Es increíble cuánto ha ganado popularidad Zod en el mundo del desarrollo de TypeScript, porque ha habido bibliotecas para esto desde siempre, pero creo que Zod simplemente hace algo bien con la API. Es tan fácil de usar. Es realmente asombroso. Es muy bueno. También lo uso para todo. Es maravilloso. Muy bien, sigamos adelante. Tenemos tiempo para un par de preguntas más. Esta es interesante. ¿Podemos usar TRPC para la comunicación entre servicios? ¿O solo cuando tienes una interfaz de usuario que se comunica contigo? Mencionamos antes la arquitectura de múltiples microservicios, por lo que puedes usarlo para la comunicación. Permíteme hacer mi propia pregunta porque esto es algo que me preguntaba. Por ejemplo, si miras otros marcos de RPC como gRPC de Google, una de las razones por las que es muy bueno para la comunicación entre servicios es que maneja cosas como la versión de las cosas que siempre puedes agregar a los documentos sin romper los servicios existentes y hace el empaquetado binario, por lo que es muy eficiente para las cosas. ¿TRPC se preocupa por estas cosas o es principalmente una solución más simple donde TRPC podría ser excesivo? Creo que si tienes múltiples servicios en múltiples repositorios, tienes el mismo problema porque necesitas versionar el tipo y luego usar la versión correcta para el servicio correcto, por lo que si cambias algo en múltiples servicios, terminas con una implementación masiva. Así que eso va a ser un desafío, por lo que tal vez TRPC sea mejor para la comunicación entre servicios. Aquí hay una pregunta, parece que los CMS sin cabeza son un tema importante hoy en día, ¿has utilizado TRPC para casos de uso clásicos de CMS sin cabeza y es beneficioso allí? No, no he utilizado TRPC para CMS sin cabeza. Actualmente estoy trabajando con DATO CMS y estoy usando GraphQL y termino con fatiga de esquema. Si cambio algo en el esquema, necesito crear todo el tipo de TypeScript y es un lío. Genial. De acuerdo, y la última pregunta. Esta es fácil. Aquí vamos, esta. En primer lugar, felicidades por hacer una presentación de codificación en vivo y no arruinar nada. ¿Podemos aplaudir a Giorgio? Eres un hombre valiente. Bien hecho. Entonces, ¿dónde podemos encontrar el código de tu demostración? ¿Está disponible en algún lugar donde la gente pueda verlo? Sí, puedo compartir mi repositorio en mi Twitter. Y etiqueto también a la conferencia, por supuesto. Entonces puedes encontrar todo el código y las diapositivas allí. Sí, por favor, tuitea fotos sobre Giorgio para Giorgio, para que su esposa no se ponga demasiado celosa de nosotros y de su amor por JavaScript. Ahora demos un gran aplauso a Giorgio. Muchas gracias.

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

GraphQL Galaxy 2022GraphQL Galaxy 2022
16 min
Step aside resolvers: a new approach to GraphQL execution
Though GraphQL is declarative, resolvers operate field-by-field, layer-by-layer, often resulting in unnecessary work for your business logic even when using techniques such as DataLoader. In this talk, Benjie will introduce his vision for a new general-purpose GraphQL execution strategy whose holistic approach could lead to significant efficiency and scalability gains for all GraphQL APIs.
React Advanced Conference 2021React Advanced Conference 2021
20 min
Advanced Patterns for API Management in Large-Scale React Applications
Top Content
In this talk, you will discover how to manage async operations and request cancellation implementing a maintainable and scalable API layer and enhancing it with de-coupled cancellation logic. You will also learn how to handle different API states in a clean and flexible manner.
GraphQL Galaxy 2022GraphQL Galaxy 2022
22 min
Handling Breaking Changes in GraphQL
Top Content
Requirements change, but API contracts are forever - I wish! A breaking change is something that is not backwards compatible. This means that a consumer of your API would not be able to use the new version without making a code change themselves. We avoid breaking changes if possible, but there are cases when they are inevitable. It could be something small: like making a mandatory field optional. Or it could be something big: like removing a query or a mutation. In this talk we'll review the types of breaking changes you may encounter and how to deal with them gracefully.
Node Congress 2021Node Congress 2021
29 min
Safely Handling Dynamic Data with TypeScript
TypeScript makes JavaScript safer adding static type definitions. Static definitions are wonderful; they prevent developers from making trivial mistakes ensuring every assignment and invocation is done correctly. A variable typed as a string cannot be assigned a number, and a function expecting three arguments cannot be called with only two. These definitions only exist at build time though; the code that is eventually executed is just JavaScript. But what about the response from an API request? In this talk Ethan Arrowood, Software Engineer 2 @ Microsoft, he will cover various solutions for safely typing dynamic data in TypeScript applications. This talk features popular technologies such as Fastify, JSON Schema, Node.js, and more!
JSNation 2023JSNation 2023
28 min
APIs are Evolving. Again.
As developers we stand on the shoulders of giants, and it can be helpful to take a look at the past to gain a better perspective. In this talk we’ll briefly explore the past decade of backend development and architectural patterns.
We’ve often ditched technologies in an attempt to make the developer experience frictionless. However we sometimes forget what we can learn from “the good old days”.
What are you building: a monolith, a microservices system or something in between? A shift in how we see things can help us keep moving forwards.
React Summit 2023React Summit 2023
28 min
Advanced GraphQL Architectures: Serverless Event Sourcing and CQRS
GraphQL is a powerful and useful tool, especially popular among frontend developers. It can significantly speed up app development and improve application speed, API discoverability, and documentation. GraphQL is not an excellent fit for simple APIs only - it can power more advanced architectures. The separation between queries and mutations makes GraphQL perfect for event sourcing and Command Query Responsibility Segregation (CQRS). By making your advanced GraphQL app serverless, you get a fully managed, cheap, and extremely powerful architecture.

Workshops on related topic

GraphQL Galaxy 2021GraphQL Galaxy 2021
48 min
Building GraphQL APIs on top of Ethereum with The Graph
WorkshopFree
The Graph is an indexing protocol for querying networks like Ethereum, IPFS, and other blockchains. Anyone can build and publish open APIs, called subgraphs, making data easily accessible.

In this workshop you’ll learn how to build a subgraph that indexes NFT blockchain data from the Foundation smart contract. We’ll deploy the API, and learn how to perform queries to retrieve data using various types of data access patterns, implementing filters and sorting.

By the end of the workshop, you should understand how to build and deploy performant APIs to The Graph to index data from any smart contract deployed to Ethereum.
React Summit 2022React Summit 2022
147 min
Hands-on with AG Grid's React Data Grid
WorkshopFree
Get started with AG Grid React Data Grid with a hands-on tutorial from the core team that will take you through the steps of creating your first grid, including how to configure the grid with simple properties and custom components. AG Grid community edition is completely free to use in commercial applications, so you'll learn a powerful tool that you can immediately add to your projects. You'll also discover how to load data into the grid and different ways to add custom rendering to the grid. By the end of the workshop, you will have created an AG Grid React Data Grid and customized with functional React components.- Getting started and installing AG Grid- Configuring sorting, filtering, pagination- Loading data into the grid- The grid API- Using hooks and functional components with AG Grid- Capabilities of the free community edition of AG Grid- Customizing the grid with React Components
Node Congress 2022Node Congress 2022
98 min
Database Workflows & API Development with Prisma
WorkshopFree
Prisma is an open-source ORM for Node.js and TypeScript. In this workshop, you’ll learn the fundamental Prisma workflows to model data, perform database migrations and query the database to read and write data. You’ll also learn how Prisma fits into your application stack, building a REST API and a GraphQL API from scratch using SQLite as the database.
Table of contents:
- Setting up Prisma, data modeling & migrations- Exploring Prisma Client to query the database- Building REST API routes with Express- Building a GraphQL API with Apollo Server
React Advanced Conference 2022React Advanced Conference 2022
206 min
Best Practices and Patterns for Managing API Requests and States
Workshop
With the rise of frameworks, such as React, Vue or Angular, the way websites are built changed over the years. Modern applications can be very dynamic and perform multiple API requests to populate a website with fresh content or submit new data to a server. However, this paradigm shift introduced new problems developers need to deal with. When an API request is pending, succeeds, or fails, a user should be presented with meaningful feedback. Other problems can comprise API data caching or syncing the client state with the server. All of these problems require solutions that need to be coded, but these can quickly get out of hand and result in a codebase that is hard to extend and maintain. In this workshop, we will cover how to handle API requests, API states and request cancellation by implementing an API Layer and combining it with React-Query.
Prerequisites: To make the most out of this workshop, you should be familiar with React and Hooks, such as useState, useEffect, etc. If you would like to code along, make sure you have Git, a code editor, Node, and npm installed on your machine.
GraphQL Galaxy 2021GraphQL Galaxy 2021
175 min
Building GraphQL APIs With The Neo4j GraphQL Library
WorkshopFree
This workshop will explore how to build GraphQL APIs backed Neo4j, a native graph database. The Neo4j GraphQL Library allows developers to quickly design and implement fully functional GraphQL APIs without writing any resolvers. This workshop will show how to use the Neo4j GraphQL Library to build a Node.js GraphQL API, including adding custom logic and authorization rules.

Table of contents:
- Overview of GraphQL and building GraphQL APIs
- Building Node.js GraphQL APIs backed a native graph database using the Neo4j GraphQL Library
- Adding custom logic to our GraphQL API using the @cypher schema directive and custom resolvers
- Adding authentication and authorization rules to our GraphQL API