Cómo consumir automáticamente APIs con React

OK, así que solo tenemos cinco minutos, así que voy a llevarlo como si lo hubiera robado. Mi nombre es Teodor, soy un ingeniero de software con sede en Atenas, Grecia, trabajo para Proxima Analytics, que es una plataforma de análisis de código abierto ética. Y hoy voy a hacer otra charla sobre APIs. Y puedo decirte que durante mi carrera he desarrollado tantas APIs. Y realmente puedo decirte que desarrollar APIs es bastante difícil. Tienes que pensar en cambios de código, documentación, romper cosas, seguridad de tipo, como consumir desde diferentes clientes o diferentes aplicaciones y así sucesivamente. Y hay herramientas por ahí, como GraphQL Cogent, ERPC, lo que sea, que pueden generar SDKs de forma semi-automática para consumirlos en tus aplicaciones. Pero eso puede ser un poco complicado y puede estar realmente acoplado con el marco que estamos usando actualmente.

Así que hoy vamos a intentar algo sencillo, en menos de cinco minutos, vamos a intentar construir una sencilla aplicación de menú de pizza. Vamos a utilizar React y Fastify, React obviamente, y Fastify como servidor. Y como siempre, la seguridad de tipo es imprescindible. Así que vamos a empezar rápidamente con esto.

Tenemos una configuración realmente básica sobre nuestro servidor, tenemos un tipo que identifica qué es realmente una pizza, como con un ID y un nombre, y luego podemos exponer dos puntos finales, uno para listar todas las pizzas en el menú, y otro para crear un nuevo elemento de pizza en el menú. Y para documentar nuestra API y empezar a generar nuestros SDKs, vamos a utilizar dos herramientas.

La primera se llama Swagger, que es una forma de documentar APIs RESTful, y encima de eso vamos a utilizar OpenAPI, que es en realidad una especificación para hacerlo. Trabajan con diferentes marcos, diferentes lenguajes, tienen demasiados clientes que también puedes consumir. Y para hacerlo, vamos a instalar dos paquetes para nuestro servidor Fastify, el primero es el módulo Swagger de Fastify, y el otro es la interfaz de usuario que queremos traer arriba.

Para iniciar estos dos módulos, la configuración es bastante básica, así que primero necesitamos incluir los módulos en nuestro servidor, añadir algunas especificaciones sobre las APIs, como una descripción, y luego en la última línea vamos a tomar la salida del módulo Swagger y escribirla en nuestro sistema de archivos. Así que vamos a empezar a describir nuestras APIs.

Primero, tenemos un ID, que es único en toda nuestra base de código, y luego vamos a utilizar etiquetas. Podemos usar etiquetas para separar diferentes recursos, APIs, y así sucesivamente. Y para describir nuestra API, tenemos que describir realmente sólo la respuesta, porque no tenemos parámetros ni parámetros de consulta, y así sucesivamente. Así que nuestra respuesta es un objeto, y estamos devolviendo una matriz de dos elementos de menú de pizza, que tienen un ID y un nombre también. Y por último, pero no menos importante, tenemos que incluir el esquema en nuestra ruta en nuestro servidor Fastify.

De manera similar, vamos a hacer lo mismo para el punto final de creación, pero esta vez tenemos que proporcionar realmente un parámetro, que es el nombre del elemento de pizza. De manera similar, la respuesta devuelve ese ID al cliente. De la misma manera, vamos a adjuntar el esquema a nuestra ruta.

Una vez que tenemos todo listo, esta es la interfaz de usuario de Fastify React, donde puedes tener la completa documentación sobre cada punto final. Realmente tienes valores predeterminados inteligentes allí. Puedes probar la API en el navegador, y así sucesivamente. Pero podrías estar preguntándote dónde entra React en esa ecuación, ¿verdad?

Para generar nuestro SDK, vamos a utilizar Orval. Orval es una herramienta de código abierto que toma la especificación OpenAVI y genera el cliente SDK. Funciona con diferentes marcos como Svelte, Vue, con diferentes bibliotecas de búsqueda como SWR, y React Query también. Tenemos que instalar, globalmente o dentro de nuestro proyecto, el SDK de Orval, y luego vamos a ejecutar el CLI de Orval utilizando la especificación OpenAVI como entrada, y luego apuntando a donde queremos que se genere nuestro cliente.

Para listar... Y este es un componente bastante simple que realmente lista todo, lista todos los elementos del menú de pizza. Como puedes ver, la primera línea es realmente lo que generó Orval. Y de manera similar, podemos crear un formulario realmente simple.

Tenemos una mutación allí. Así que Orval genera la mutación, y también podemos consumirla dentro de nuestros componentes. Y podrías estar preguntándote acerca de las testing. Orval también toma eso en cuenta.

Así que, de serie, tenemos simulacros generados por el trabajador de servicio de simulacro. Así que es bastante fácil probar todo lo que necesitamos. Y hay más que puedes hacer, porque todo es uniforme. Puedes usar Zod, por ejemplo, para proporcionar una validation uniforme en tu back-end y también en el front-end.

No tienes que quedarte con Fastify, así que puedes usar Rails o Next.js o Express, tú eliges. Así que hay implementaciones en el ecosystem para muchos lenguajes y frameworks. Puedes consumir APIs de diferentes recursos, incluso APIs públicas disponibles. Como todo se compromete, el SDK se compromete con nuestro sistema de control de fuente, todo está en su lugar para que podamos rastrear los cambios y así sucesivamente. Y por último, pero no menos importante, puedes tomar esa especificación de Open API y generar tus propios documentos y demás utilizando la interfaz de usuario de Swagger y Redux doc asserts y demás. El código está disponible públicamente en mi perfil de GitHub, así que no dudes en echarle un vistazo, ver cómo funciona, tal vez darme algunos comentarios y demás. Muchas gracias por tu tiempo y paciencia.