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.
GraphQL Galaxy 2021
