Desarrollo Fullstack con Type-Safety y GraphQL Hasura

Mi nombre es Jesse. Voy a liderar y trabajar contigo hoy en este masterclass. Y soy una persona de divulgación para desarrolladores de Hazura. Hazura es un proveedor de cloud y un proveedor de capa beta que hace todo tipo de cosas increíbles. Si no estás familiarizado con nosotros, definitivamente échale un vistazo. Hoy veremos algunas de las cosas que hace. Y este es el masterclass de seguridad de tipos de atrás hacia adelante. ¿Qué significa eso? Significa que comenzaremos con el concepto de generar una capa de GraphQL que será nuestro punto de partida para los tipos. Y utilizaremos eso para generar un SDK que esencialmente nos dará seguridad de tipos para construir aplicaciones front-end utilizando una aplicación de TypeScript para Next.js.

Ahora, aquí hay algunas piezas críticas que debes saber sobre ese proceso. Una es que no soy un gurú de TypeScript. Así que, estoy en el punto óptimo de lo que TypeScript realmente debería resolver. Y tal vez muchos de ustedes también lo estén. TypeScript en realidad nos ayuda a producir menos errores en nuestro código que enviamos a producción. Entonces, habrá casos en los que tal vez muchos de ustedes sepan la respuesta mejor si surge un error de TypeScript. Y en ese caso, me encantaría que me lo hagas saber. No soy orgulloso. No pretenderé ser la persona de TypeScript. Soy una persona de GraphQL. Soy una persona de modelado de datos. Entonces, estoy feliz de ayudar con preguntas sobre eso. Pero esto es básicamente todos nosotros aprendiendo cómo construir aplicaciones de una manera más futura, más estable, más segura utilizando algunas herramientas y tecnologías que realmente han proporcionado mucha estabilidad y sí, una huella de seguridad de tipos para la comunidad en su conjunto. Entonces, esa es básicamente la premisa.

Lo que tengo, si ves el repositorio de GitHub, vamos a empezar desde cero. Y a medida que avanzamos, estaré pegando código dentro de la ventana. Vamos a construir esto juntos. Y luego haré la mayor parte de ese código disponible a través del repositorio. Y lo que me pregunto, porque en este momento, nadie más está encendiendo sus cámaras. Entonces, puede que solo sea, ya sabes, un poco de verme programar hoy por lo que parece. ¡Oye, tengo a alguien! Lo que podemos hacer es empezar a desarrollar este repositorio a medida que avanzamos y luego podremos seguir avanzando. Así que realmente aprecio que la primera cámara esté encendida. Este es un masterclass informal. No es un aquí están mis diapositivas y por favor no me hagan preguntas. Se permite que todos enciendan sus cámaras. Puedes interrumpir, levantar la mano, hacer una pregunta. Tenemos salas de grupos disponibles. Si hay un momento en el que digamos, vamos a tomar cinco minutos y dividirnos en grupos más pequeños para entender lo que estamos haciendo. Pero hoy se trata de que todos puedan programar juntos. Entonces, ¿suena bien? ¿Hay alguna pregunta antes de que empiece? Estoy mirando Zoom. Estoy mirando Discord.

Muy bien. Entonces, vamos a empezar. Para empezar, lo que vamos a necesitar hacer es configurar un proyecto en la nube con Hazura. Para hacer eso, puedes ir a cloud.hazura.io/proyectos. Ahora, ya estoy autenticado. Así que eso es en lo que estamos. Así que les voy a dar a todos unos dos o tres minutos para que se registren y obtengan una cuenta antes de que sigamos adelante. Y voy a presionar el botón de nuevo proyecto aquí y lo dejaré en esa pantalla mientras esperamos. Y estamos configurando nuestras provisiones de SaaS en este momento. Así que, de nuevo, si aún no tienes una, te recomiendo encarecidamente que configures una cuenta de Heroku también, porque esa será la forma más rápida de conectar una base de datos de Postgres a Hazura, ya que tenemos esa integración de nivel superior. Pero siéntete libre de usar tu propia base de datos. Mientras hacen eso, echemos un vistazo rápido a la página de precios. Así que cuando veas el nivel gratuito aquí, que es el que usaremos hoy, siempre me gusta saber qué significa realmente este `gratis` aquí. ¿Se apaga en 30 días? No, es gratis para siempre. Tienes un paso de datos de un gigabyte y 60 solicitudes por minuto. Eso está bastante bien para los niveles gratuitos de los desarrolladores. Así que definitivamente te permitirá hacer un proyecto a nivel de hobby en producción, especialmente porque tenemos almacenamiento en caché incorporado y otras cosas. Así que siéntete libre de usar esto y no te preocupes de que se apague en tus proyectos personales. Mientras eso sucede, y si no captaste el nombre del proveedor de la base de datos, ese será Heroku. De nuevo, ya estoy autenticado, pero puedes crear fácilmente una cuenta, seguir adelante y usarla para crear una cuenta gratuita. Y todo lo que necesitas hacer es tener una cuenta. El resto se automatizará para nosotros. Solo tener la cuenta existente será útil en este caso. Así que, dediquemos otros dos o tres minutos a esto porque esta es la parte lenta. La tercera cosa que será útil en algún momento es que vamos a necesitar tener resolutores de API accesibles en la nube, que he mencionado un par de veces en este punto. Voy a usar ng-rock, que es este servicio aquí. Y lo que hace es crear túneles en la nube directamente a tu computadora. Esto ha existido durante mucho tiempo, así que no es como una solución ultra hacky. Pero tienen un servicio gratuito muy básico aquí. Este será el que usaré hoy. Puedes usar Versal. Puedes usar otra aplicación de Heroku para implementar tu próxima aplicación. Yo elegí esto porque el repositorio en el que nos basamos hoy, y les daré una descripción del código, y luego creo que todos deberían estar al día con sus cosas. Así que lo que tenemos aquí en el nivel superior es una división entre una carpeta backend aquí, que tiene las estructuras de metadatos que necesitarías para configurar una integración continua con Hazura. Eso es un servicio beta en este momento, y esta mañana no me daba confianza de que fuera a ser una buena idea lanzar a los 30 de nosotros al mismo tiempo. Así que voy a guiarnos a través de la utilización de otras formas de configurar un proyecto de Hazura, lo cual no es un problema en absoluto. Si quieres tomar este repositorio, y lo iré completando cada vez más en el próximo día para poner todas las cosas que vamos a hacer hoy. Esta es la primera vez que enseño este masterclass, así que también hay mucho descubrimiento. Así que estoy aprovechando ese aprendizaje y haré que este repositorio esté limpio. Pondremos todo el código allí. Así que podrías usar esto para configurar el backend para una estrategia de implementación continua, y luego la aplicación de front-end es simplemente donde almacenaba la aplicación web que estaba conectada. Esta es una aplicación Next.js. De nuevo, vamos a hacer este paso juntos, así que no te preocupes. Vamos a hacer esto juntos, así que está todo bien. Muy bien, así que espero que en este punto tengas una forma de agregar pronto una base de datos, idealmente una cuenta de Heroku, y luego tienes configurado tu proyecto de Hazura. Idealmente, estás viendo una pantalla similar a la que tengo configurada. Si alguien está atascado, avísame en las preguntas y lo revisamos, pero no veo a nadie en pánico en el chat, así que vamos a seguir adelante. Muy bien, así que vamos a hacer clic en el nivel gratuito aquí. En realidad, antes de hacer eso, vamos a darle un nombre al proyecto, porque los nombres de proyecto son todo, ¿verdad? Así que voy a llamar a este RA Workshop Live. Eso es para React Advanced, para aquellos de ustedes que todavía se están despertando esta mañana. Error al crear el proyecto, el nombre del inquilino no está disponible. Alguien más tomó mi nombre de proyecto. Muy bien, voy a quitar los guiones en el mío, y vamos a llamar a esto RA-Jesse Workshop. Veamos si eso nos da algo. Muy bien, ahora lo que tenemos aquí es nuestro panel de control básico que vamos a utilizar para configurar muchas de las piezas aquí en adelante. Así que en este punto, voy a hacer una prueba rápida aquí que no hice antes. Así que voy a abrir Terminal aquí, porque usar ng-rock va... Y si estoy diciendo mal este nombre, si alguien lo sabe, siéntete libre de corregirme, porque nos va a enojar a todos para cuando terminemos hoy si lo digo mal una y otra vez. Así que voy a probar esto para ver si ng-rock me permite abrir un puerto antes de tener un puerto activo escuchando en este lado. Así que vamos a probar esto aquí rápidamente. Y el comando para eso... Vamos a aumentar el tamaño de fuente. Puedes ver mis errores aquí. Eso es divertido para todos ustedes. Vamos a hacer esto ng-rock HTTP 3000, porque lo que quiere hacer es reenviar una dirección de servidor público al puerto 3000 en mi máquina aquí localmente. Y mi pregunta es, ¿funcionará si no tengo nada escuchando? Parece que sí. Así que esto es lo que vamos a hacer. Vamos a copiar esta dirección reenviada. El HTTP aquí está totalmente bien. Y vamos a necesitar mantener esta sesión activa. De lo contrario, tendrás que cambiar algunas configuraciones aquí en un momento. Y te diré por qué es eso. Porque ahora, en nuestro panel de control, vamos a configurar algunas variables de entorno que nos serán útiles a lo largo del resto de nuestro proyecto. Ahora, si estás siguiendo el repositorio Git... Y déjame poner eso en la pantalla aquí. Ve al readme al principio aquí. Así que lo que necesitamos hacer es inicializar algunas de nuestras variables de entorno. Parece que mi formato está un poco desordenado ahí. Lo siento. Vamos a agregar una URL basada en acciones. Esa es la que acabamos de copiar aquí. Tenemos un rol no autorizado de GraphQL de Hazura. Eso es lo que nos dará acceso abierto a nuestro punto final de GraphQL. De lo contrario, está completamente bloqueado. Y luego vamos a necesitar agregar un secreto JWT, que supongo que todos tienen

Eso podría ser por qué la escritura no funcionó. Sí. Parece que eso está bien. Y vamos a necesitar poner un no TS check allí porque es el mismo problema. Entonces, vamos a seguir adelante y poner TS. No check. Y lo arreglaré después de depurar un poco más tarde.

De acuerdo. Entonces, si estás vamos a seguir adelante y parchear eso rápidamente a algo con lo que también puedas trabajar. Muy bien. Y eso está en camino para todos ustedes. Entonces, si volvemos ahora al archivo readme, veamos qué tenemos aquí. Solo estoy revisando los diferentes chats. Parece que todo debería estar bien hasta ahora. De acuerdo. Entonces, aquí hay algunos problemas. De acuerdo. Entonces, Jesse, elimina el delete de los parámetros. Alguien tiene un consejo útil aquí. De acuerdo. De acuerdo. Entonces, alguien tiene una sugerencia aquí. Tal vez este sea el problema. Esto podría ser porque estaba intentando resolverlo porque creo que estaba depurando o resolviendo esto de una manera diferente anteriormente. Oh, ahí lo tienes. Así que todos agradecen a Adam Turner. De acuerdo. Gracias, Adam, por la solución allí. Entonces, vamos a seguir adelante e ingresar. La razón por la que eso había llegado allí era porque estaba depurando eso de varias maneras para intentar destruir una cookie, lo cual no es tan sencillo como podrías pensar. Y supongo que el código funcional que tenía se borró o algo así. Pero bueno. De acuerdo. Busquen el agradecimiento en el commit de Adam por el código funcional allí. Pero también necesito, ¿no es divertido verme programar en vivo? ¿No lo disfruta todo el mundo? Aprecio el voto de confianza. De acuerdo. Así que aquí vamos. Tenemos todo en teoría funcionando. Me pregunto por qué creo que es porque sí, el problema es que puse el archivo de cierre de sesión en el lugar correcto para todos ustedes. Lo puse en el lugar equivocado para mí. Entonces, no quería que estuviera en la carpeta de acciones porque no está mapeando una acción en Hazura. De acuerdo. En este punto, si bajamos aquí, deberíamos ver que tenemos el SDK generado. Tenemos los diferentes archivos creados. Ahora podemos probar nuestra API. Entonces, lo que vamos a hacer ahora es abrir la terminal. Y tengo que descubrir mi teclado raro aquí. Tengo este teclado mecánico. Y he mapeado la tecla de escape con una tilde. Pero como, tiene como cuatro teclas de función. No sé. Sí, estoy, sí. Entonces, tenemos esto ahora donde vamos a seguir adelante y tratar de ejecutar este proyecto localmente. Vamos a seguir adelante y decir yarn dev en esto. Y si todo funciona correctamente, lo que deberíamos obtener es un ejemplo en ejecución en localhost 3000, lo cual tenemos. Ahora para probar esto. Entonces, ng rock teóricamente todavía está funcionando para nosotros con nuestros puertos. Y esos puertos están siendo mapeados públicamente. Así que necesito encontrar la sesión de la terminal que lo está ejecutando aquí. Creo que probablemente está ahí, ahí está. De acuerdo. Creo que alguien intentó hacer una solicitud a eso. Alguien tomó la dirección IP. Son chicos divertidos. De acuerdo. Entonces, vamos a seguir adelante y probarlo ahora y esperar que nadie haya eliminado algo importante. Entonces, vamos a ir a la consola de Hasura ahora. Vamos a probar esto ahora que nuestro proyecto está en ejecución. Veré si alguien está metiendo mano. No, está bien. De acuerdo. Entonces, voy a entrar aquí en el Explorador de API. Este es uno diferente. Entonces, aquí está el taller de RHSC. Voy a ir y abrir la consola de nuevo. Supongo que lo escribí antes. Así que probablemente sea el mismo correcto. De acuerdo. Aquí dentro del Explorador de API, vamos a ir a la pestaña de historial. Y voy a sacar esta mutación que probamos. Y vamos a intentar ejecutarla y ver si obtenemos data. Mira eso. Obtenemos un token. Así que aquí tenemos el token real que vuelve del servidor. Así que estamos un poco pasados. Casi... tengo que tratar de recordar a qué hora comenzamos. Pero estamos

Entonces, vamos a obtener el estado de uso de almacenamiento. Y voy a obtener el usuario. Y acabo de chocar algo. No importa. No solo voy a obtener el usuario. Voy a obtener la condición de autenticación actual también. Está iniciada la sesión. Y voy a hacer eso como state.auth.isloggedin. Muy bien. Entonces, ahora estamos utilizando estas condiciones. Esta será mi comprobación condicional aquí en la parte superior. Si estoy, simplemente vamos a ocultar el formulario de registro. Si no estoy iniciado sesión. Y luego, si estoy iniciado sesión, estamos llegando al final de esto. Si estoy iniciado sesión, vamos a mostrar user.name. Creo que eso funciona. Entonces, lo que tenemos aquí. Tenemos los valores predeterminados de los usuarios que se pasan en user-dash-one en fake.said. Y tenemos la contraseña 123 en caso de que necesitemos hacer referencia a eso más adelante. Lo que va a suceder es que, toma los valores predeterminados del formulario. Cuando presiono registrarme, lo que quiero asegurarme es de usar el comportamiento correcto, usé inicio de sesión. Entonces, eso ya me habría hecho una persona triste. Así que vamos a ir y registrarnos aquí. Entonces, el comportamiento de registro me permitirá registrarme con estos usuarios. Necesito un nombre allí. Entonces, lo que podemos hacer aquí es ¿qué estás buscando? No se puede asignar el tipo buscado, correo electrónico, contraseña. Falta la propiedad nombre. Entonces, sí, necesitas el nombre. Muy bien. Vamos a ponerlo aquí rápidamente. Tenemos nombre, establecer nombre, fakeyzed. De acuerdo. Entonces, vamos a obtener ese comportamiento aquí abajo. Simplemente vamos a pasar ese valor. En realidad, no es necesario, supongo, porque vamos a poder pasarlo de todos modos. Pero, ya sabes, hagámoslo correctamente aquí. Y tenemos el establecer nombre allí. Verifiquemos. Fakeyzed. Muy bien. Todo debería estar bien. Lo que esperamos que suceda es que cuando ejecute ese registro, espero iniciar sesión. Espero ocultar el formulario. Y espero poder configurar todo. Entonces, vamos a probarlo. Vamos a intentarlo. Está haciendo el comportamiento. Veremos en un segundo. Puedo inspeccionar las conexiones de red. Entonces, tal vez hubo un problema. Volvamos atrás y veamos la consola. Sin errores en la consola. Entonces, ¿por qué se queja la consola? Vamos a poner esta consola en su propia ventana aquí para poder depurar rápidamente. Así que vamos a la pestaña de red. Vamos a intentar hacer eso de nuevo. ¿Y qué obtenemos? Entonces, el comportamiento de búsqueda indefinido. Entonces, lo que podemos hacer es verificar qué está sucediendo debajo de esa mutación de registro. Que está debajo del modelo. Entonces, el registro está obteniendo esta carga útil. Vamos a inspeccionar esa carga útil a medida que llega aquí. Y luego la mutación del cliente aquí de registro. Creo que necesitamos obtener el nombre, el correo electrónico. Entonces, vamos a ver si estamos viendo las cosas que necesitamos ver. Así que vamos a intentar registrarnos de nuevo. ¿Vemos esa carga útil incluso llegando aquí? Entonces, parece que tal vez en realidad mi formulario está roto porque ni siquiera llega aquí. Así que echemos un vistazo rápido al formulario aquí. Entonces, volvamos a la página de índice. Correcto. Página de índice. Entonces, en ese clic del botón, vamos a echar un vistazo rápido aquí y ver que, de hecho, estamos obteniendo el nombre, el correo electrónico, la contraseña. Así que lo estamos obteniendo llamado. Y de hecho, parece que lo estamos obteniendo también dentro del modelo. Entonces, la ruta para el registro, no sé por qué está intentando llamar eso. Tal vez me registro, me registro. De acuerdo. Entonces, está funcionando. Está llegando al punto donde esperamos que llegue. Las acciones de uso de almacenamiento, actions.signup. Ni siquiera estoy hablando al micrófono ya. De acuerdo. Actions.signup. Entonces, vamos a echar un vistazo rápido aquí para ver qué está sucediendo. Acciones de uso de almacenamiento, uso de almacenamiento. Sí, sí, sí. Solo verifiquemos mi otra lógica aquí en el formulario de registro. Asegurémonos de no haber introducido algo estúpido por accidente. No. Ese debería ser el comportamiento correcto. Entonces, queremos la página de índice.

Y lo estoy, lo estoy llamando. De acuerdo. Así que vamos a verificar qué piensa el cliente que es. Veamos qué piensa el cliente que es aquí. Cuando intenta hacerlo de la manera correcta. Así que vamos a la consola aquí. Por supuesto, sí, consulta. Bueno, ahora, lo que podemos hacer es esto porque técnicamente, técnicamente eso debería estar bien ahí. Porque esa carga útil tiene la forma que debe tener. Se llama, se llama una solicitud de envío a local también, lo cual no, una solicitud no definida a POCAL, a POCAL host, a localhost. Entonces la ruta, se llama una ruta extraña. Tal vez tener que.

Entonces, está conectado. Obtén el correo electrónico, si no, devuelve falso. Entonces, deberías seguir obteniendo usuarios porque en realidad no estás solicitando ese campo. Pero lo estás. Algo me dice que deberíamos hacerlo de esta manera. Entonces, enfoque de fuerza bruta, a veces tienes que intentarlo. Entonces, en ese, en ese correo electrónico. Si es falso. No intentes solicitarlo. Oh, De acuerdo, probablemente dejaré de perder el tiempo aquí. Veamos si podemos hacer que ese usuario se autentique nuevamente con un registro correcto. Sí, como lo logras de inmediato. Voy a intentar autenticar a otro usuario aquí. Usuario tres. Dale un segundo para procesarlo. También puede ser que esté trabajando con algunas respuestas lentas aquí. Esto fue el registro y la respuesta está configurando la cookie, lo cual también puede que no esté contento con el hecho de que lo esté enviando. Lo estoy enviando a través de HTTP. Respuesta. Entonces, el usuario se crea, pero ¿por qué no se está configurando ahora? Pequeño problema con mi gestión de estado en cuanto a lo que se está verificando, pero luego si fue enviada esa última solicitud. Echemos un vistazo. Esta es una solicitud para el usuario, y ¿dónde se envía la cookie? Sí. De acuerdo. Está. Permíteme hacer una última prueba aquí, donde si entro en un navegador diferente. Correcto, no he tocado las cookies, solo estoy un poco desesperado. Probémoslo rápido. Y luego tendré que darle fin. Dame una sesión de navegador. Lo que sea. Aquí vamos. Veamos qué sucede si hacemos una solicitud para asegurarnos de que estoy viendo la pestaña de estado de la red aquí. Haz una solicitud aquí con el usuario cinco. Y luego la solicitud se envía bien, así que viste que funcionó rápidamente y de manera efectiva. Este es uno de los problemas con Chrome en este momento, si estás jugando con los navegadores, y no estoy seguro de por qué es así. Pero eso es. Configuremos la cookie nuevamente, veamos si realmente se configura la cookie. Entonces, me dijo que debería. Aquí es donde empieza a entrar en un mundo en el que tienes que depurar como loco para el NG rock podría estar causando un problema aquí, que es un puerto HTTP y así sucesivamente. Entonces, tal vez eso sea todo por ahora. Solo por curiosidad. Última pequeña prueba aquí, qué tan rápido puedo implementar esto en Russell. Y luego darle la actualizar la URL, así que tal vez cierre la brecha del error. De acuerdo. De acuerdo. De acuerdo. De acuerdo. De acuerdo. Implementar índice. De acuerdo. De acuerdo. De acuerdo. Ahora solo necesito variables de entorno. Hay un atajo para esto. De acuerdo. De acuerdo. De acuerdo. Desde que agregué lo bueno. No creo que vayan a funcionar. Puedes visitar la página de todos modos. Ahora los usuarios. Supongo que eso solicitud para eso. De acuerdo. De acuerdo. De acuerdo. De acuerdo. De acuerdo. Tienes el código. Este patrón funciona. Lo tengo en un par de aplicaciones en producción. Y necesito averiguar dónde está fallando aquí. Estoy viendo que lo observamos funcionando una vez. No estoy seguro de por qué ya no está enviando la por qué ya no está configurando la cookie. Eso es algo que tendré que depurar un poco más. Actualizaré el repositorio para que tengas acceso a eso. Desafortunadamente, eso es un poco deprimente, pero es el patrón de tener esa conexión de TypeScript a tu servidor y poder usar los hooks y poder tener los tipos dentro del ID. Ahí es donde está la magia. Así que el patrón de autenticación. Es agradable cuando funciona. Tengo que averiguar dónde está el error en mi código. Seguro que está en algún lugar tonto, como realmente tonto. Actualizaré, corregiré y solucionaré para asegurarme de que esto sea infalible. Creo que tendré acceso a los correos electrónicos para notificar, así como en el canal de Discord. Actualizaré cuando tenga noticias.

Entonces, averigüemos eso. También lo publicaré en Twitter. Cuando el esqueleto esté listo, pueden encontrarme allí. Sí, funciona para las partes no autenticadas, lo cual es genial. Tengo que decirlo, porque cuando todas las cookies están, puedes configurarlas más oscuras, y puede ser cuando estaba tocando algo en el archivo de cookies hoy que eso se movió algo que no debería haberse movido. Esto también es parcialmente por qué no se debe poner TS no check en las cosas, para detectar problemas.

No, sé que cambié esta parte. Me pregunto, solo por curiosidad. Esa es una solicitud de red en esa cookie, ¿cuál era la edad máxima, la edad máxima debería ser suficiente. No lo sé. No lo sé. Eso es todo. Es como después de ti. Entonces, gracias por ver. Gracias por unirse. Espero que hayan podido obtener algún valor de eso, y GraphQL y las cookies pueden hacernos. De hecho, de hecho. Muy bien, que les vaya bien. Gracias por ver y sí, nos vemos en otras conferencias. Adiós.