Construyendo aplicaciones GraphQL de pila completa con Hasura y Vue 3

Entonces, um, trataremos de ir a un ritmo moderado. Algunas personas pueden estar muy familiarizadas con esto, otras no tanto. Pero, uh, sí, vamos a cubrir esto. Así que hay un par de cosas realmente increíbles sobre la API de GraphQL, GraphQL y una de ellas es la ergonomía de la API. Esto básicamente va a explicar, um, la arquitectura RESTful en comparación con la construcción de API de GraphQL, lo cual creo que es algo con lo que todos podremos establecer paralelismos seguro que todos hemos construido una aplicación CRUD en nuestras vidas. Así que soy un evangelista técnico de una empresa llamada Hasura. Es un motor de GraphQL. Um, muy genial. Básicamente, te permite tomar una fuente de datos, que puede ser Postgres, podría ser MySQL, SQL Server, podrían ser otras API que pueden ser REST o GraphQL y básicamente crea automáticamente una API CRUD en tiempo real con autenticación y algunas otras cosas interesantes encima de ella y te permite asignar permisos y unir data entre fuentes de data como si fuera un solo gráfico de data unificado. Uh, ah, y también es de código abierto. Así que uh, hablaremos de una llamada a la API. Entonces, en una API REST, cuando haces una llamada a la API, ¿verdad? Um, haces algo como obtener API, barra diagonal usuario, y pasas un ID y obtienes esta, uh, respuesta HTTP. Uh, vamos a verificar. Lo siento. ¿Alguien tiene sonido? Lo siento, hay como un montón de mensajes. Uh, ¿funciona mi audio para todos? Sí. Sí. De acuerdo. De acuerdo. Gracias. Gracias a todos. Um, de acuerdo. Sí, entonces tienes alguna aplicación, uh, y tu aplicación va a hacer una llamada a una API. Las solicitudes GET podrían verse así y va a devolver una respuesta HTTP, ¿verdad? Algo de JSON que se ve así, ¿verdad? Así que tenemos a Elmo. Si queremos más información, ¿verdad? Como, ¿qué pasa si queremos la dirección de Elmo?, entonces necesitamos llamar a la API de dirección y necesitamos darle el ID de usuario que acabamos de solicitar a través de REST. Así que eso son dos llamadas a la API. Y eso solo empeora. Um, y puedes paralelizar estas llamadas a la API en REST, puedes agruparlas. Puedes crear API personalizadas que devuelvan, ya sabes, formas exactas de data. Pero básicamente este problema va a persistir sin importar lo que hagas porque esa es la naturaleza de REST. Voy a mover esta ventana de chat. Si piensas en una página, ¿verdad? No estás renderizando solo una entidad aislada. Entonces, si piensas en un usuario y tienes un modelo de data jerárquico, probablemente quieras renderizar ese usuario. Es posible que desees renderizar su dirección, es posible que desees renderizar su historial de pedidos, es posible que desees renderizar una lista de amigos. Hay esta jerarquía en cascada de dependencias e interrelaciones, y todas estas necesitan resolverse en las solicitudes a la API. Así que digamos que tenemos un problema, ¿verdad? Obtenemos una nueva... Como una aplicación móvil diseñada para una página y es realmente complicada, y requeriría como ocho llamadas REST. Así que volvemos a nuestros desarrolladores de API y ellos dicen, oye... ¿Podrías escribirme solo esta llamada especial a la API que devuelve esta forma exacta de data? Porque eso me facilitaría mucho la vida. Y así obtienes esta nueva llamada especializada a la API, ¿verdad? Entonces dicen, de acuerdo, bien. Y obtienes este punto final de la API de información de usuario y ahora tienes a Elmo y su dirección. Entonces el problema es que si sigues haciendo esto, lo que va a suceder es que tu architecture de API se convertirá en un absoluto desastre. Y terminas con más y más de estas llamadas especializadas a la API, o simplemente tienes más y más llamadas REST intercaladas y dependientes en cascada. Y entonces una cosa que podrías hacer es decir, bueno, ya sabes qué, voy a implementar algún tipo de filtro de campos. Así que solo voy a pedir los campos que quiero. Y eso funciona. Es un poco de un parche de cinta adhesiva, pero funciona. Pero con GraphQL, no tienes que hacer eso. Con GraphQL, la forma en que funciona es que los data que quieres se obtienen automáticamente es el data que solicitaste. Así que si quieres a Elmo, quieres su nombre, quieres su dirección en la calle,

Entonces, la forma en que funciona GraphQL es que tienes un único punto final y, uh, acepta solicitudes POST. Por lo general, puedes permitir que acepte solicitudes GET, pero es inusual. Y básicamente solo envías una, uh, una solicitud fetch a esta API, que es de tipo application/json. Y solo hay dos campos, uh, que necesitas incluir aquí. Entonces uno es la consulta. Aquí está nuestra consulta. Y, um, esto simplemente se incluiría en un objeto de cuerpo de solicitud fetch, uh, en JavaScript. Uh, el otro, uh, que probablemente veremos en un segundo, son las variables, uh, que te permitirán sustituir una variable real por cosas como el ID. Y luego el tercero, uh, esto es opcional, es darle un nombre de operación y eso se usa principalmente para cosas como métricas, análisis y seguimiento, solo para que puedas saber qué operaciones se están ejecutando. Es como, um, es como una etiqueta de operación, ¿verdad? Entonces enviamos la consulta de GraphQL como una cadena en JSON a nuestra API. Y lo que obtenemos a cambio, uh, es solo un objeto JSON que se ve exactamente como el objeto de consulta, uh, que enviamos en la solicitud. Entonces, cuando escribirías a una API REST, uh, normalmente harías una solicitud POST a algo como /API/tarea, uh, le darías una tarea, y luego enviaría este 200. De acuerdo. Y diría, bien, hombre, hice esta tarea y aquí está tu nuevo ID de tarea. Um, la forma de hacer esto en GraphQL es usando mutaciones y las mutaciones cumplen el papel de varios verbos HTTP. Um, que podríamos ver en un segundo. Entonces, las mutaciones actúan como publicaciones, las mutaciones actúan como parches o actualizaciones y las mutaciones también actúan como eliminaciones. Entonces, puede ser obvio por el nombre, pero la consulta se utiliza para obtener información y las mutaciones se utilizan para modificar, uh, datos. Aquí vemos un ejemplo de mutación donde agregamos una tarea, y toma este signo de dólar como una variable. Entonces decimos que toma una tarea, um, variable llamada nueva tarea y devuelve el ID. Y luego, cuando enviamos esto en nuestra solicitud HTTP, lo único que necesitamos hacer es darle una nueva clave de variables que tenga la nueva tarea y la tarea que queremos. Entonces, uh, puedes verlo aquí mismo, es la nueva tarea de GraphQL. Vamos a retroceder la diapositiva. Um, ahora quiero volver atrás. Uh, es lo mismo. Así que solo toma, toma tus datos y colócalos bajo el nombre de variable y la mutación. Y luego, nuevamente, obtendrás esta respuesta 200 y te dará este ID porque el ID es

Además, este siguiente es reciclado de mi, sí, Vue.js para ganar, hombre. Soy un fiel seguidor, fiel seguidor desde hace medio década. Todavía me encanta. Pensé que el desarrollo web no podía mejorar más que con Vue 2, pensé que eso era lo mejor que podía ser y luego llegó Vue 3 con la API de composición y luego llegó Pana, ya sabes, está VueX y pensé, esto es, esto es el epítome de lo que debería ser la gestión del estado, no podemos hacerlo mejor que esto, deberíamos parar ahora. Y luego llegó Pazfa con Pina y pensé, bueno, está bien, está un poco mejor, podemos hacerlo mejor. Pero vamos a ver, vamos a ver Pina, y VueX V5, él está en el equipo. Sí, hombre, Vue 3 composición.

Bien, y luego voy a compartir esto. Es como la única vez al año que puedo compartir sin reservas mi entusiasmo absurdo por Vue. Amo tanto Vue. Lo he estado usando, lo he estado usando durante mucho tiempo. Muy bien. Solía hablar en Denver, Denver Vue.js. Conocí a Sarah Drastner, Sarah Drastner. Estuvo en Netlify por un tiempo. Creo que está haciendo algo más, pero la conocí dos veces en Vue.js Denver. Solía ir allí y hablé un par de veces en el Galvanized y Vue.js, solía ir todos los meses, era un buen grupo de personas. En fin, aquí está el otro que vamos a ver. Sarah Dressner es genial, por cierto, ella no recuerda quién soy, pero está bien, no la culpo. Muy bien, vamos a presentar. Bien, vamos a pasar a esta pequeña presentación. ¿Quieres que también comparta esto? No puedo pronunciar tu nombre, pero tu apellido es Peter. ¿Quieres que comparta este enlace también en el chat, el chat de Zoom? Oh, bien, gracias, gracias, Ivan o Yvonne. Justin Lee. Espera, ¿eres el mismo Justin Lee que trabaja en el equipo de Quarkus? Oh, bien, ¿eso pasa a menudo? ¿Te confunden mucho con él? Oh, sí, eso tal vez es una señal de que no tengo vida y conozco a demasiados desarrolladores aleatorios y oscuros. Justin Lee es muy genial, trabaja en Red Hat en su framework Quarkus y es el chico de Kotlin en su equipo y realmente ama Kotlin. Tipo súper genial. En fin, sí, deberías. Deberías empezar con Vue, Justin Lee. Muy bien. Muy bien. Estoy haciendo clic en unirme al audio si tu wifi aún no puede. Candida, hombre, lo siento mucho o si no eres un hombre. Tengo la mala costumbre de decir hombre. Lo digo en un sentido de género neutral. Si quieres, también puedes enviarme un mensaje privado Estoy en Discord y me aseguraré de enviarte la grabación o lo que necesites. Sí, Jeremy, trabajas para el DOE eso es en el Departamento de Energía. Eso es genial. Muy bien, tengo que dejar de hacerlo. ¿Cuándo comienza lo real? Muy bien, tengo que dejar de interactuar con todas las personas en el chat, lo siento. Todos ustedes son personas geniales y realmente quiero hablar con ustedes. Pero algunas personas también quieren hacer cosas.

Ok, esto es una charla relámpago de cinco minutos que di en un CIRCON. Así que les mostré el generador de código GraphQL y asumo que una buena parte de las personas está familiarizada con él. Es una herramienta muy popular, es genial. Para entender la importancia del impacto de los tipos generados con GraphQL y lo importante que son para mejorar la experiencia y hacerla más agradable, hay que retroceder al principio.

Hace mucho tiempo, en 2015 o 2016, fue la primera vez que intenté escribir GraphQL. Y TypeScript tampoco era algo muy popular en ese entonces. Si miras la Encuesta de Desarrolladores de Stack Overflow en 2015, TypeScript ni siquiera estaba en la lista, simplemente no estaba presente. Y en 2021, ahora está en el segundo lugar en la lista de los más queridos. Claramente muchas cosas han cambiado. Entonces, ¿cómo se veía en ese entonces si querías una interacción segura en cuanto a tipos entre un servicio GraphQL y un consumidor? Se va a poner un poco Java. Pero básicamente tenías que definir manualmente todos estos tipos, lo cual es absurdo, ¿verdad? Porque o bien tienes un tipo de base de datos o tienes un modelo de Ruby on Rails o C-Sharp o un modelo de ORM que ya tiene todo esto definido o está en tu SDL de GraphQL. Y tenías que definir tipos manuales para todo eso. Y luego avanzamos un par de años.

Y en 2018, eso es una masa crítica, ¿verdad? Las cosas están empezando a cambiar. Facebook lanzó su complemento compilador de TypeScript para Relay en 2018. Y GraphQL Code Gen apareció en octubre de 2017. Y estas herramientas son revolucionarias. Y quiero decir que esto es el comienzo de una experiencia de desarrollador sin igual y el nivel de productividad es increíble. Permiten el desarrollo basado en esquemas. Lo que significa que tanto los tipos de tu base de datos como el esquema de GraphQL pueden ser la fuente de verdad. Y todo el resto del código y los tipos en tu aplicación se generan y se mantienen sincronizados con eso. Por lo tanto, tu código de consumidor se genera automáticamente como un subproducto directo de tu modelo de datos. Y todo este código es seguro en cuanto a tipos. Ya vimos esto un poco antes, pero básicamente la forma en que funciona es que necesitas tener un esquema y necesitas darle operaciones específicas. Y la forma en que estas herramientas han funcionado tradicionalmente es que, eso es una actitud, básicamente generan tipos solo para esas operaciones específicas. Por lo tanto, necesitas escribir cada consulta que quieras usar. No sé cómo borrar eso. Bueno, eso va a quedarse ahí por un segundo. Bien. Más anotaciones estables. Oh, hey, otras personas pueden escribir en la pantalla. No dibujen nada obsceno, pero pueden dibujar una carita sonriente si quieren. Oh, puedo borrarlo. Borrar todos los dibujos. Bien, si alguien quiere dibujar unas caritas sonrientes en mi pantalla, pueden hacerlo. Bien, genial. Entonces, ¿qué tenemos hoy? Ha habido un conjunto reciente de bibliotecas que abusan un poco del hecho de que el motor de verificación de tipos de TypeScript es en principio una especie de verificador lógico y un solucionador de restricciones. Y estas herramientas generan un archivo TypeScript que contiene todas las operaciones posibles que calculan dinámicamente el tipo de retorno de las consultas. Así que vamos a omitir esta parte aburrida, pero básicamente la forma en que funciona es que ves que tengo este uso de suscripción de tipo aquí. Y cuando presiono autocompletar, me muestra todas las opciones en mi API de GraphQL que puedo usar y todas tienen tipos. Por lo tanto, en lugar de necesitar escribir una consulta específica como usuario donde blah, blah, blah, puedo simplemente, puedes simplemente completarlos dinámicamente y calculará el tipo de retorno. Así que aquí ves, tenemos usuario solo con ID y número. Si agregamos el correo electrónico ahí, ahora tenemos el correo electrónico y el tipo de retorno. Es bastante sorprendente. Entonces, bien. Cerrar las anotaciones. La herramienta que personalmente uso se llama GraphQL Zeus para esto. Hay otra llamada GenQL. Son muy similares y sólidas y funcionan con casi todo. Así que sí, esa es la introducción.

Y con eso, vamos a adentrarnos en la aplicación. Así que voy a ampliar este código para que podamos ver las cosas. Y lo que voy a hacer es reiniciar completamente todo como si estuviera comenzando desde el principio.

Bien, moveré este chat. Muy bien, entonces, vamos a detener esto. Boom, boom. Y básicamente voy a hacer Docker compose down. Ahora mismo, lo que voy a hacer es deshacerme de estos servicios Docker existentes que tenía. Así que tenía Hasura, que será nuestra GraphQL API y backend y tenía una base de datos PostgreSQL en ejecución. Pero lo voy a eliminar para que todos podamos comenzar desde la misma base y recorrer las cosas juntos.

Bien, con eso hecho. En realidad, quiero mostrar cómo se ve esto cuando lo abres por si alguien está confundido acerca de la cosa del contenedor de desarrollo. Básicamente se ve así. Así que voy a ir a este directorio y luego voy a ir con insiders dot para abrirlo aquí. Para abrirlo aquí. De acuerdo. De acuerdo. Entonces, obtendrás esta ventana emergente, la carpeta contiene un archivo de configuración del contenedor de desarrollo, vuelve a abrir la carpeta para desarrollar en el contenedor. Luego vas a presionar este botón de volver a abrir y contenedor. Y lo que hará es llevarte a un entorno reproducible, que tiene Node y todas estas otras cosas configuradas. Y también hay algunas extensiones recomendadas de VS code que cuando se instalan deberían darte una experiencia de trabajo bastante decente. Así que la idea es que no hagas nada, solo clónalo y haz clic en sí. Y luego, cuando te pregunte si quieres instalar las extensiones recomendadas, haz clic en sí. Tu configuración está lista. Es bastante genial, si nunca has usado Dev Containers, son geniales.

Bien, lo primero que tenemos que hacer es que este inicio, vitez, creo que se pronuncia por Anthony Fu, An-Fu. Muy bueno. Él usa PMPM. Así que voy a ir con esa decisión arquitectónica y cuando lo inicies, no estará instalado. Entonces lo que necesitas hacer es básicamente NPM install globalmente PNPM. De acuerdo, y luego después de haber hecho eso, luego haces PNPM install. Lo cual ya está actualizado porque ya he hecho todo esto, pero eso tomará un segundo. Y hay este botón aquí abajo. Voy a cerrar todos estos para que puedas verlo abierto en este lado. Notarás este pequeño botón V aquí abajo. Así que este es solo el lanzador conveniente, pero es bastante genial. Si haces clic en él, y dices abrir en navegador incrustado. Ejecutas eso y lo que hará es iniciar el servidor V dev para el proyecto en el puerto 4000. Y lo abrirá en una terminal incrustada de VS Code, lo cual fallará porque detuve manualmente el comando, pero en el fondo, solo está ejecutando este comando. Además, ¿este tamaño de fuente está bien para todos? Puedo hacer zoom más o menos. De acuerdo, genial. Muy bien, dejaremos la fuente así. Y notarás que si haces clic en Vite y haces clic en abrir en navegador incrustado, debería abrir esto. Deberías tener una pestaña aquí llamada Vite. Y te preguntará si quieres abrirlo en tu navegador. Lo importante es que en tu lista de puertos en la parte inferior, que puedes obtener si no tienes esto, puedes hacer clic donde están estos pequeños iconos de la X y el signo de peligro y luego ir a puertos. Y deberías ver un punto rojo en el puerto 4000. Vamos a recargar esto. Y esto debería ser solo una página vacía, genial. Y puedes presionar este botón de alternar para cambiar entre el modo claro y oscuro.

Esperemos que funcione para todos y también lo comprobaremos en el navegador habitual. De acuerdo, perfecto. Así que tenemos una página vacía. Lo siguiente que haremos es configurar una base de datos SQL y configurar Hasura. Hasura. Si no has oído hablar de Hasura, este es nuestro sitio web en hasura.io que lo explica. Y si vas aquí, hasura.graphqlengine, puedes leer más al respecto. De todos modos, todo esto es de código abierto para esta demostración. He empaquetado todo de antemano para que, sí, el comando en él localmente. Sí, hagámoslo. Entonces lo que haremos es abrir una nueva terminal y debería ejecutarse con Docker, compose up. Y probablemente quieras pasar la bandera -d, y deberías ver que se crea el Postgres y el motor GraphQL aquí. Lo que está haciendo es básicamente, cerraremos esto por ahora. Lo que está haciendo es obtener de este Docker compose y tenemos dos servicios. Así que estamos ejecutando la versión 14 de Postgres desde Docker y también estamos ejecutando Hasura desde Docker. Y hemos mapeado Hasura a localhost 8060 en el puerto. Y si verificamos aquí, deberías obtener un mensaje que dice que tu aplicación en el puerto 8060 ahora se está ejecutando. Y la otra forma de verificarlo es si recargamos esto, deberíamos ver nuestro contenedor Docker. Entonces, si alguna vez necesitas inspeccionar lo que está sucediendo aquí, puedes hacer clic derecho en esto e inspeccionarlo. Y podríamos obtener cosas como registros. Así que ver registros aquí. Y podemos ver qué está sucediendo dentro del contenedor. Esto no está formateado, por lo que es difícil de leer. Pero sí, tan pronto como hayas hecho docker-compose up -d aquí y confirmado que tienes dos servicios en ejecución y los puertos aquí son correctos, entonces podemos continuar y verificar que la consola realmente esté funcionando. Así que iremos a la consola, localhost 8060 y vamos a hacer zoom un poco. Hay muchas cosas que cubrir aquí, pero vamos a saltar a la parte de data por ahora y centrarnos solo en lidiar con cosas de base de datos por ahora. La forma en que funciona Hasura es que puedes conectar múltiples bases de datos, así que aquí lo hemos configurado para que se conecte a ese mismo Postgres que se está ejecutando en Docker pero puedes tener más de una BD. Esta es nuestra BD predeterminada en nuestro esquema público, y si quieres crear una tabla, así que queremos crear una nueva tabla, podemos decir, ya sabes, mi nueva tabla y luego podemos decir, de acuerdo, quiero un ID. Quiero creado en, quiero actualizado en, quiero, ya sabes, algún texto genial y quiero que el tipo sea texto y quiero que sea único. De acuerdo. Por ahora omitiremos algunas cosas de esto porque no son importantes. Pero si simplemente presionamos Agregar tabla aquí, entonces deberías ver que tenemos una nueva tabla listada bajo Público. Y podemos ver nuestros tipos aquí. Vamos a Navegar filas. Notaremos que no tenemos data en nuestra base de datos en este momento. No tenemos filas. Podemos ir a Insertar fila y decir, la vista es la mejor. Y dejamos estos como predeterminados. Y lo guardamos. Y puedes ver los detalles en la carga útil aquí. Y ahora si vamos a Navegar filas verás que tenemos data en nuestra base de datos. Y para demostrar que esto es realmente como si hubiéramos creado una base de datos, creado una tabla de base de datos e ingresado un registro, podemos hacer un select star from mi nueva tabla, verás esta pequeña pestaña SQL a la izquierda. Esto te permite elegir la base de datos. En este caso, siempre será la predeterminada porque solo tenemos una. Y podemos ejecutar SQL arbitrario. Así que lo ejecutaremos. Y puedes ver que tenemos este registro. Podríamos hacer algo como seleccionar, ¿cómo lo llamamos? Tengo un poco de texto. Un texto genial. Ahí lo tienes.

Pero eso no es lo mejor. Lo mejor es que si volvemos a esta página de la API, notarás que hay un editor gráfico como un playground aquí. Es fácil pasarlo por alto, puedes expandir la documentación aquí. Estos son clicables. Entonces, lo que acabamos de hacer es crear una API de GraphQL completa. Por lo tanto, podemos hacer consultas, mutaciones, e incluso tenemos suscripciones en tiempo real en nuestros data. Entonces, si digo mi nueva tabla, haremos una consulta, y quiero el ID y un campo de texto genial, luego presionamos ejecutar. Verás que ahora obtenemos los data de una database. Así que eso es crear. Y vamos a eliminar esto, y necesitamos agregar una mutación. Si quieres hacer esto a través de la interfaz de usuario, ve aquí abajo y cambia a mutación. Luego presiona agregar nuevo. Y eso cambiará estos para que sean los operadores de mutación. Tenemos dos tipos de inserciones. Podemos insertar varios o insertar uno. Así que hagamos una inserción de uno. Y vamos a poner un texto genial que es una cosa nueva. Y la otra cosa que queremos poner es, eso es prácticamente todo. Luego necesitamos seleccionar campos. Así que vamos a seleccionar todos estos. Y así puedes verlo y lo ejecutaremos. Ahora tenemos un nuevo registro. Así que volvamos a nuestra database. Veamos nuestra tabla. Y vemos que ahora tenemos dos registros. Y si volvemos y hacemos clic en nuestro historial, hacemos clic en historial. Podemos ver todas las operaciones anteriores que hemos realizado. Podemos simplemente ejecutar la consulta anterior que selecciona todos los registros de MyNewTable. Y esta vez obtendremos dos. Muy genial. Pero, ¿qué pasa si queremos filtrarlo? Entonces, simplemente podemos decir, quiero todos los registros en MyNewTable donde el ID es mayor o igual a dos. Y ahora, boom, solo obtenemos dos. Y tenemos estos operadores and, or y not si quieres combinar múltiples condiciones. Tenemos operadores de fecha y hora, etc. También podemos eliminarlo, pero hagamos lo emocionante. Suscripción elegante. Esta es la parte que siempre me encanta hacer. Entonces, si nos suscribimos a MyNewTable, y básicamente seleccionamos, la otra cosa es que siempre puedes presionar Control + Espacio aquí si quieres autocompletar y moverte hacia arriba y hacia abajo. Así que vamos a seleccionar todos estos. Y comenzaremos esa suscripción. Cierro este explorador de documentación, esto aquí abajo. De acuerdo, hemos iniciado una suscripción. Básicamente se ve igual que la consulta que acabamos de hacer. Eso no es impresionante en absoluto. Pero aquí está lo interesante. Si abrimos data, y lo arrastramos hacia un lado, lo arrastramos hacia un lado, vamos a cerrar el historial. Vamos a cerrar el explorador y arrastramos esto aquí para que puedas ver. Luego, lo que podemos hacer es vamos a insertar manualmente una fila en la database. Así que esta será la tercera fila. Y cuando guarde esto, boom, actualizaciones instantáneas de data.

La forma más fácil de probarlo si tienes una database existente es simplemente ejecutar el comando Docker y pasar la cadena de conexión a una database de prueba local y generará todo esto. Así que espero que eso haya sido bastante genial. Esos son los conceptos básicos principales. No es realmente lo que nos hace tan geniales. Las cosas geniales están en estas otras pestañas, pero primero tenemos que pasar por los conceptos básicos.

De acuerdo. Así que vamos a construir realmente, vamos a construir una aplicación. Entonces, lo que tengo aquí es, este diagrama de esquema, y lo haré más grande. Entonces, pensé que un modelo de aplicación semi-relevante sería construir algo como un clon de Meetup.com. Y entonces, si hacemos los modelos realmente simplistas, ¿cómo se vería eso? Bueno, probablemente tendríamos una reunión. Esa reunión tendría una ubicación, nombre, descripción. Tendrá una imagen. Y habrá una fecha, una fecha y hora de cuándo ocurrirá la reunión. Y vamos a tener usuarios. He elegido correo electrónico y contraseña, podría ser usuario y contraseña. No importa. Y lo que vamos a hacer es, queremos permitir que los usuarios se registren en cualquier reunión, aunque solo una vez por reunión. Y queremos que los usuarios puedan dejar comentarios en las reuniones. Los comentarios pueden ser múltiples. Entonces, si soy John Doe, puedo dejar tres comentarios en la reunión de View London. Pero nos aseguraremos de que no sea spam. Así que espero que eso sea un poco menos aburrido que una aplicación de tareas pendientes. Traté de equilibrar mantenerlo simple versus mantenerlo interesante.

De acuerdo, para comenzar, hay dos formas en las que podemos obtener estos data. Y la forma en que elijas probablemente dependerá de qué tan familiarizado estés con SQL y tu preferencia por usar herramientas. Entonces, este mismo SQL sin procesar que usamos para ejecutar esa consulta, esa consulta única, también podemos usarlo para hacer cosas como crear las tablas y rastrearlas como lo hicimos con la interfaz de usuario. Entonces, si eres un mago del SQL o simplemente te sientes más cómodo escribiendo cosas en formato de texto, esa es una excelente opción para escribir tus modelos de database en tu esquema. Y luego no tienes que ejecutarlos a través del SQL sin procesar. Esta es solo una forma conveniente de ejecutarlos. Obviamente, podrías conectarte directamente a tu database. Usar algo como P-SQL o cualquier controlador de DB que tengas. También puedes gestionar tus migraciones externamente. Entonces, Hasura no tiene realmente una opinión al respecto. Queremos ser agnósticos. Entonces, si estás usando algo como Ruby on Rails y tienes modelos de database en tu esquema y active record, o si estás usando entity framework o Python y SQL alchemy o type O-M, lo que sea, está bien. Simplemente puedes seguir gestionando tus modelos de database y tus migraciones usando la herramienta que prefieras. Y luego lo único que gestionarías serían cosas específicas de Hasura que encontraremos en un momento y cosas como estas pestañas de permisos y estas otras pestañas.

Gracias Doosan. Entonces, espero que eso cubra los conceptos básicos. Antes de continuar, ¿alguien tiene alguna pregunta sobre cómo funciona esto o alguna funcionalidad que no entiendan o preguntas en general, estaré encantado de responder.

Muy bien. Muy bien, parece que estamos bien, la suscripción es así. Axel pregunta, la suscripción es básicamente un patrón de observador para bases de datos, sí, eso es exactamente. Si eres, sí, sí.

Oh hombre, tenemos, genial, tenemos muchas preguntas. Increíble, me encanta. Vamos a responderlas todas. Sí, las suscripciones son exactamente como patrones de observador para bases de datos. No quiero entrar en los detalles técnicos, pero dado que admitimos múltiples bases de datos, la forma en que funciona internamente es un poco diferente para cada base de datos. En Postgres, utilizamos la funcionalidad de notificación nativa de Postgres cuando ocurren eventos en las tablas, y luego utilizamos eso para básicamente enviar los eventos al cliente. Y es súper, súper liviano. Puedes manejar decenas de miles, hasta cientos de miles, o incluso un millón de suscripciones en vivo a la vez, debido a lo livianas que son. Aunque depende de la carga útil. No puedes enviar una carga útil gigantesca de 500 kilobytes en una suscripción, porque no hay forma de rastrear la diferencia. Simplemente reenvía todos los datos cada vez que hay una actualización, no solo la diferencia, porque eso sería muy complicado técnicamente. Y siempre y cuando no envíes suscripciones enormes, puedes manejar una cantidad bastante absurda de ellas. Y diría que no me creas a mí. Yo y otras personas hemos trabajado mucho en una herramienta de evaluación que básicamente envuelve otras herramientas populares de carga y evaluación en una interfaz uniforme. Y estandariza los resultados y te permite... Me estoy yendo demasiado en los detalles. Si vas a este GraphQL bench, si vas a este GraphQL bench, si vas a este repositorio de GraphQL bench, puedes ejecutar evaluaciones en suscripciones y ver por ti mismo cuántas decenas de miles de suscripciones puedes manejar con una latencia muy baja y un consumo de recursos. Y lo mismo ocurre con, tenemos un pequeño y atractivo panel de visualización que también se puede construir. Así que puedes importar tus resultados y ver latencias, tiempos de respuesta, gráficos de dispersión, todo eso. Entonces sí, y también tiene una interfaz de TypeScript. Entonces, si quieres ejecutar pruebas programáticamente, puedes hacerlo. Pero de todos modos, sí, lo siento, me desvié. Es como un, es exactamente como un patrón de observador para la base de datos, cuando las cosas cambian, los clientes son notificados y reciben el estado actualizado, de acuerdo.

Mientras las suscripciones de las personas funcionan sobre implementaciones de WebSocket, ¿o hay otra forma? Sí, así que, esa es una muy buena pregunta. En realidad, hay un gran impulso para la estandarización en este momento. Entonces, esto no es parte de la especificación de GraphQL en sí, pero hay un protocolo llamado GraphQL sobre WebSockets y Hasura tiene un protocolo llamado transacciones GraphQL sobre WebSockets que te permiten envolver múltiples, no entraré en eso, pero sí, hay, si estás interesado en aprender más sobre esto, puedes consultar este repositorio. Y hay como un estándar no ratificado que se considera una mejor práctica. Y creo que la fundación GraphQL está trabajando para incluirlo en la especificación. Entonces, y sí, en realidad veremos, este paquete de GraphQL WebSocket se utiliza en la aplicación y lo veremos en un momento. Es el, proporciona la funcionalidad de suscripción tanto para Villas como para Oracle. Y la aplicación, y creo que el cliente de Apollo también usa esto internamente. De acuerdo, entonces, ¿cómo se gestionan los permisos? Si a un cliente de API solo se le permite acceder a ciertas filas de una tabla. Otra excelente pregunta. Esto es algo en lo que no estaba seguro si tendríamos tiempo para ello, pero me encantaría cubrirlo porque es realmente importante. Entonces hay dos preguntas. Una es a nivel alto. ¿Cómo se gestionan los permisos si a un cliente de API solo se le permite acceder a ciertas filas de una tabla? Básicamente, vamos a hacer esto, voy a mostrarte a continuación el siguiente paso del tutorial donde importamos esto porque vamos a usar la tabla de usuarios para hablar sobre los permisos. Entonces, dentro del proyecto, hay un archivo llamado schema.sql y como dije, no tienes que hacer esto escribiéndolo manualmente de esta manera. Podríamos haberlo hecho simplemente haciendo clic en la interfaz pero a veces me gusta escribir el SQL a mano porque me ayuda a pensar en ello y mantenerlo todo en mi cabeza a la vez. Puedo copiar y pegar cosas. Entonces, si tomas ese contenido y lo pegas aquí, probablemente también necesitarás pegar esta función create. Esto se creó cuando hice esta tabla porque agregué la columna updated app.

Esto es algo que hacemos automáticamente por ti. Así que lo voy a poner aquí. Sí, eso es correcto. Lo que voy a hacer es eliminar eso. Si ejecutas declaraciones DDL en esto, necesitas marcar la casilla de seguimiento. Y si pasas el cursor sobre la pequeña burbuja de ojo, te dirá por qué. Explicaré más en un momento. Tiene más sentido cuando lo ves.

De acuerdo, básicamente, después de haber creado esas tablas, si volvemos a la carpeta public, verás que hay estas relaciones de clave externa no rastreadas y dice que las tablas o vistas no rastreadas están vacías. Básicamente, lo que sucede es que, voy a crear esta tabla para que puedas ver cómo se ve cuando hay una allí. Y marcaré la casilla de seguimiento. De acuerdo, esa no apareció. Lo que sucede es que cuando te conectas por primera vez a una nueva fuente de datos, o si creas tablas, no se creará una API por defecto porque eso es un poco arriesgado exponer todo eso, especialmente antes de tener la oportunidad de pensar en las reglas de permisos. Y para crear la API de GraphQL y hacerla disponible para las consultas, para una tabla, necesitas presionar Seguir. Así que si presiono Seguir aquí, verás que aparece a la izquierda. Y solo para mostrarte rápidamente, vamos a explorar. Actualmente, no podemos hacer consultas sobre esto. ¿Cómo se llamaba esa tabla? Era como, tabla no rastreada, no rastreada por defecto. Sí, simplemente no aparece en absoluto. De acuerdo, si la sigo y vuelvo a mi API, ahora puedo hacer consultas en este campo y tiene la información correcta. De acuerdo, ahora, relaciones de clave externa no rastreadas. Entonces vemos en el diagrama del esquema que, vemos que el usuario, ese meetup tiene usuarios de meetup y comentarios de meetup, pero si voy a mi API, no puedo hacer consultas sobre eso. Así que si hago una consulta y pido un meetup, no hay usuarios de meetup aquí. No puedo acceder a mis relaciones. Y la razón es porque las claves externas no han sido rastreadas. Así que si sigo esta clave externa de usuario de meetup a meetup id, lo cual vamos a hacer, presionemos seguir todo, ahora verás en la pestaña de relaciones que se han agregado estas relaciones. Ahora tenemos una relación de matriz con comentarios de meetup y usuarios de meetup. Así que si vuelvo a la API en meetup y miro ahora, entonces puedo profundizar en todos los usuarios que están registrados para el meetup. Puedo obtener los usuarios, puedo obtener al usuario, puedo obtener los usuarios del meetup. Puedo obtener al usuario, puedo obtener el correo electrónico del usuario. Podemos ir aquí, podemos obtener comentarios de meetup, texto, cosas así. Así que necesitas rastrear esos y necesitas rastrear las relaciones de clave externa para que sean expuestas.

De acuerdo, volviendo a la pregunta de los permisos. Y lo siento, voy a intentar responder tantas de estas como pueda. Son preguntas muy buenas. ¿Qué pasa si queremos decir, aquí hay un escenario muy común, los usuarios solo deberían poder ver sus propias filas. No queremos que un usuario pueda consultar nuestra tabla de usuarios y ver toda la información personal de nuestros otros usuarios. Entonces hay otra carpeta, otro archivo aquí llamado semillas, que simplemente tiene algunos datos de prueba. Así que también podrías agregar esto a través de la inserción manual de filas. Esto es solo un poco más rápido. Así que vamos a insertar usuarios. Vamos a insertar tres usuarios. Vamos a insertar dos meetups, uno en Londres, uno en Miami. Vamos a inscribir a algunas personas en los meetups. Básicamente, los usuarios uno, dos y tres van a ir al Vue.js London. Y luego el usuario dos va a ir a esta cosa de Miami beach. Y vamos a poner algunos comentarios allí. Así que si ejecuto eso, ahora volvemos, podemos ver que hay datos en todas estas tablas.

De acuerdo, esto es lo que voy a hacer. Lo primero que debes hacer es crear un rol.

Entonces diremos que hay un rol llamado usuario. Y lo que haremos es decir que el usuario solo puede seleccionar sin ninguna verificación. Así que estamos en la tabla de usuario bajo permisos. Ponemos usuario en el rol para crear un nuevo rol y luego hacemos clic en seleccionar. Luego diremos que permitimos al usuario seleccionar filas sin ninguna verificación. Pueden seleccionar todas ellas. También sin límite. Y les daremos permisos para alternar todas las columnas y guardaremos eso.

De acuerdo, ahora tengo una casilla de verificación aquí. Volvamos a nuestra API. Y aquí está el problema. Entonces, si solicitamos usuario, ID, correo electrónico, y luego obtengamos algo jugoso. Obtengamos la contraseña, ¿de acuerdo? Probablemente no queremos que eso esté ahí. Voy a decir que soy un usuario. Entonces necesitamos marcar esta casilla que dice, danos un rol. Y el rol que ponemos en el valor. Estos son encabezados HTTP, por cierto, para nuestra solicitud. El rol que ponemos aquí se asignará al rol que ponemos en la tabla. Entonces, permisos, este es el rol que queremos usar. Entonces decimos, hey, Hasura, para esta solicitud, me gustaría ser un usuario. No puedes hacer esto. No puedes simplemente pedir ser un administrador. Hay reglas para esto, pero he desbloqueado esta aplicación para que podamos, con fines de demostración. Si lees nuestra documentación de autenticación, explica más sobre cómo funciona esto. Pero solo ten paciencia conmigo aquí.

Y luego lo que voy a hacer es decir que voy a dar otro valor en mi encabezado, y voy a darle a AccessHera un ID de usuario. Digamos que soy el usuario uno de AccessHera. Ahora este rol y este ID de usuario se establecen en tu backend. Entonces, cuando inicias sesión de las personas, básicamente firmas un JWT, y dices que este es el rol que tienen. Estos son los roles que se les permite ser si quieren poner un rol diferente. Y estos son todos los reclamos personalizados. Entonces puedes poner cualquier cosa aquí. Podrías poner como el ID de organización de AccessHera, y luego como el ID de usuario de AccessHera si tienes una aplicación multiinquilino, ¿verdad? Entonces puedes firmar lo que quieras en tu backend, y sabes que ha sido validado. Pero de todos modos.

Entonces esta aplicación, está completamente desbloqueada, lo que significa que podemos jugar un poco con esto. Así que voy a hacer una solicitud y le diré a Hesera que soy un rol de usuario y que soy el usuario uno. Así que voy a hacer esa solicitud fetch, y esto es lo que sucede. Veo la contraseña de todos. No es bueno. Realmente, realmente no es bueno. Entonces, ¿cómo lo solucionamos? Es bastante fácil. Entonces vienes a tu rol y tu tabla. Entonces estamos en los permisos de usuario y el rol de usuario. Y dices, cuando un rol de usuario intenta seleccionar una fila, debe haber una verificación. Y quiero que verifiques que el ID es igual al ID de usuario accesorio. Creo que lo he roto. Guardar eso. Permisos actualizados. Seleccionar. Lo he roto.

Un segundo, lo arreglaré manualmente. De acuerdo. Muy bien. De acuerdo, no sé por qué sucedió eso. Básicamente, lo que estamos diciendo es cuando un usuario intenta seleccionar esto, queremos asegurarnos de que el ID sea igual al ID de usuario actual que ha iniciado sesión en nuestro token. Y este será el ID de la fila. Entonces esto es user.id. Y ahora lo que sucede con la consulta, con suerte, es boom. Ahora somos el usuario uno, solo podemos ver al usuario uno. Si firmo un nuevo token, digamos que tengo un backend de Node.js. Firmo un nuevo JWT y en las reclamaciones pongo X como ID de usuario dos. Ejecuto eso y verás que soy el ID de usuario dos, ID de usuario tres, ID de usuario cuatro, nadie. Así que ese es un ejemplo muy, muy básico de cómo funcionan los permisos. Puedes hacer cosas muy complicadas con ellos usando Boolean y, or not y exists, lo que te permite seleccionar a través de tablas y esquemas. Entonces, la otra forma en que podríamos haber dicho esto es como, si existe una tabla de usuario, donde el ID es igual a blah, blah, blah, blah, y tenemos un montón de artículos sobre esto, pero sí, ese es el concepto general de cómo se hacen las cosas de permisos. Para asegurarnos. Y luego la otra pregunta sobre permisos es que alguien dice que tienen, los usuarios pueden tener múltiples roles y se pueden adjuntar múltiples permisos a cada rol. Entonces, la otra forma en que puedes hacerlo es en lugar de usar roles de Hasura, puedes usar tablas de base de datos. Básicamente, puedes hacer algo como crear una tabla y simplemente decir admin user y simplemente generar una clave primaria de forma predeterminada. Simplemente pondremos user ID y claves foráneas, agregar una clave foránea desde el ID de usuario, ID de usuario, guardar. Agregar una tabla. La otra forma en que puedes hacer roles es haciéndolo en la base de datos. Entonces, si insertamos algunas filas y decimos que el usuario con ID dos es un usuario administrador, podemos ir a meetup y básicamente podemos decir permisos y podemos decir básicamente solo permitir que alguien vea un meetup, ¿verdad? Este es un ejemplo terrible, pero debería ser cualquier tabla arbitraria, ¿verdad? Cuando, básicamente, si, si, oh hombre, me quedé en blanco. Si existe en la tabla admin user donde el ID es igual a, sí, eso está mal. Entonces básicamente escribes esto, básicamente dices que, alguien con el rol de usuario puede seleccionar de esta tabla si el ID del usuario actualmente registrado está presente en la tabla de administradores. Entonces, en lugar de usar un montón de roles de Hasura, como rol uno, rol dos, rol tres, puedes usar un único rol general, como solo usuario versus anónimo que no ha iniciado sesión o no está autorizado en absoluto. Y puedes gestionar tus roles a través de registros de base de datos. Y, por supuesto, asegúrate de que solo la persona que puede escribir en la tabla de usuarios administradores sea el propietario real de la aplicación Hasura. Así que eso fue un poco más complicado de lo que tal vez quería abordar en esta sesión. Pero sí, hay dos estrategias. Puedes usar roles de Hasura o puedes usar roles configurando tablas de base de datos que tienen valores que usas para buscar para ver qué permisos están permitidos. Como una especie de lista de ACL. Y tenemos algunos artículos en nuestro blog sobre esto. Espero que haya respondido tu pregunta. Hacer solicitud, solicitud.

De acuerdo, entonces, la persona cuyo nombre no puedo pronunciar y cuyo apellido se escribe Peter, está preguntando sobre cómo hacer estas solicitudes con encabezados y está preocupado por la sensibilidad de los datos. Y dice, ¿puedo simplemente ponerlo aquí como la contraseña o lo que sea? No, absolutamente no. La razón por la que puedo hacer esto y simplemente tomar un rol y decir que quiero ser un usuario y quiero ser un administrador es porque si miras en el archivo Docker compose, la instancia no ha sido configurada para la autorización y la seguridad. Básicamente, es como una instancia de prueba que está completamente abierta. Entonces, si queremos que sea realmente seguro, lo que tendrías que hacer es agregar un secreto de administrador, que es una contraseña que se requiere para iniciar sesión en esa consola web o para interactuar con las APIs en absoluto. La otra cosa que tendrías que hacer es agregar un SerigraphQL, creo que se llama así, es el rol no autorizado. Y este es el rol que se asigna a las personas si no han iniciado sesión como nadie. Entonces dirías algo como, okay, tu rol es anónimo. De acuerdo, ese es el segundo requisito. El tercer requisito es que necesitas configurar un secreto JWT, para saber si has iniciado sesión, pero necesitas saber por qué. Y luego hay otros requisitos que se presentan a lo largo del proceso. Entonces puedes tener un secreto o no. No hay condiciones que requieran un JWT o no, así que no lo sabemos a menos que obtengas ese requisito en todas partes, y eso es algo que la privacidad es, incluso para mí, hay un poco más de lógica en hacerlo.

También hay un requisito para los bordes. Esto es lo que necesitarías agregar para cualquier tipo de security o capacidad de iniciar sesión en absoluto. Debes proporcionar la contraseña maestra para iniciar sesión. Debes proporcionar un JWT que puede ser HS256 o puede ser RS, creo que es RS512, que es esa enorme y gigantesca clave. Y luego debes proporcionar un rol no autorizado. Y si hiciéramos Docker compose up, supongo que podría mostrar esto ahora mismo. Básicamente, lo que sucedería es que mostraré primero la aplicación funcionando y luego, tal vez en un segundo, mostraré qué sucede si hacemos esto. La aplicación se romperá por completo porque no tendremos acceso para hacer solicitudes porque no hemos iniciado sesión y la autenticación no está integrada. Pero para responder a tu pregunta, esos son los primeros pasos que tomarías para integrar la capacidad de agregar autenticación. Y luego solo necesitas algo, solo necesitas un pequeño controlador que pueda manejar el inicio de sesión y el registro. Lo cual es muy pequeño. Así que tenemos esta aplicación de e-commerce. que es como un clon de Amazon que no es en absoluto que construimos y que tiene autenticación y todas esas cosas solo para mostrar una aplicación más realista. Y si miras aquí, dentro de las páginas, API, acciones, hay inicio de sesión y registro. Entonces, si miras este archivo, para iniciar sesión es básicamente hacer una consulta por usuario donde su correo electrónico es igual al correo electrónico específico y luego generar un JWT. Y aquí es donde firmamos de forma segura el ID de usuario. Y decimos que el único rol predeterminado es usuario, el rol permitido es usuario. Y así, son como 120 líneas para escribir tu propio JWT para esto. Y lo mismo para el registro. Esto no es algo en lo que hayamos tenido tiempo hoy. Pero si estás interesado, puedes ver esto como una implementación de referencia de tu propio JWT. Solo usando Bcrypt y cosas así. Sí, sí, sí, entendemos la parte B.

Vale, entonces. Básicamente, la forma en que se ha configurado esta aplicación es que he integrado las bibliotecas más comunes para usar GraphQL desde Vue. Y así, podemos saltar todo esto porque no importa, pero en la página main.ts, lo que encontrarás es un Vite y Vue 3. Tiene un registro de Pina y un almacenamiento de VueX. Tiene Apollo Client que maneja conexiones HTTP y WebSocket, tanto consultas como suscripciones. Este es el Cliente Compartido de GraphQL WebSocket. Espero estar pronunciándolo bien, VILS. También tenemos Ercol conectado. Hemos sincronizado todo en conjunto. Y lo que quería mostrar es cómo se ven en la práctica. Luego puedes juzgar por ti mismo, tal vez cuáles son los compromisos. También podemos hablar un poco sobre la gestión del estado.

Y si vas a la carpeta de páginas, esta es una página de índice vacía. La idea era llenar esto con encuentros en los que dejaríamos comentarios. Puedo intentar pasar rápidamente por estos y hacer la implementación real si eso suena bien.

Así que empecemos con fetch porque es fundamental para entenderlo. Entonces, ¿qué es una solicitud GraphQL? Así que si abro mi navegador integrado y voy a localhost:4000/fetch. Vale. Estas son rutas basadas en páginas utilizando un complemento de V, así que si miramos esta página, lo que vemos es esta tabla que simplemente muestra los correos electrónicos de los usuarios y vemos que es la página de fetch. Para entender GraphQL, básicamente lo único que está sucediendo es que estamos enviando una solicitud POST, estamos enviando un cuerpo JSON que tiene una clave de consulta. Aquí estamos solicitando un usuario, estamos solicitando ID y correo electrónico, y eso es prácticamente todo. Bueno, el resto de esto es simplemente manejar el estado de fetch, que probablemente deberías usar suspense y manejar eso en un componente envolvente, pero es lo que es. Y luego, sí, simplemente mostramos esta tabla, que solo muestra los data y lo único que hace es generar dinámicamente filas basadas en el objeto de entrada. Así que si cambio esta selección. ¿Cómo implementarías una suscripción usando fetch? No puedes implementar una suscripción usando fetch. Por eso necesitas un cliente de WebSocket. Porque fetch es HTTP y las suscripciones son WebSockets. Así que ambos están en esta aplicación. Y los cubriremos. Escribes tus consultas GraphQL directamente en y simplemente sigues y creas tu consulta. Y ahora solo tienes ID y no tenemos usuario en nuestra tabla. Así que es muy fácil. Boom. Muy, muy fácil. Entonces, sí. Y luego, cuando se desmonta, simplemente llamo a fetch. Muy bien. Así que pasemos al siguiente. Echemos un vistazo a urql. Entonces, esto utiliza GraphQL code gen. Realmente no tenemos tiempo para cubrirlo tanto como me gustaría. Pero la forma en que funciona es que escribes consultas dentro de estas etiquetas. Y generará automáticamente los tipos. Y el resultado de eso es que si pasamos el cursor por encima, puedes ver que es este nodo de documento tipado. Y devuelve esta suscripción de todos los usuarios. Estos nodos de documento tipados son una de las cosas más nuevas. En su mayor parte, se deben a una sola persona del Gremio, que yo sepa. Es realmente genial. Funcionan con la mayoría de las herramientas. Entonces, funcionan con Urql, funcionan con Apollo. Hay una gran lista de compatibilidad con la que funcionan de manera nativa. Entonces, aquí está lo genial de los Nodos de Documento Tipados. Tenemos este uso de suscripción de Urql. Y paso la consulta de todos los usuarios. Entonces, lo que sucede es que el tipo de mi data coincide con el tipo de respuesta de la consulta. Entonces, si adelanto y hago data.value.user, puedes ver que es un array de este objeto de usuario. Así que es genial y todo está tipado. Entonces, si agregamos o eliminamos propiedades aquí, se reflejarán en el tipo generado que puedes ver cómo funciona aquí. Pasaremos por alto eso. La razón por la que eso es genial es porque si hago algo como esto, básicamente si hiciera algo como data.user.createdAt diría, oye, eso no existe en tu tipo de respuesta.

Así que, puedes detectar errores de inmediato, lo cual es genial. Simplemente, se mostrarán en rojo en todas partes donde hayas cometido un error si actualizas tu API o escribes algo incorrecto. Así que sí, y vamos a ir a la página Url. Esto utiliza una suscripción. La sintaxis es en su mayoría la misma. Ha sido realmente un éxito o un fracaso con esta cosa del navegador integrado. Me encanta cuando funciona.

De acuerdo, genial. Así que sí, esta es la página Url, tenemos estas cosas. Nuevamente, podemos quitar las indicaciones, guardar y se actualizará automáticamente. Oh, es porque rompí... No tengo el generador de código ejecutándose en segundo plano. Necesitas ejecutar continuamente este generador de código que observa los cambios y luego regenera los tipos de TypeScript cuando lo usas. Pero lo arreglaré, lo volveré a poner y luego lo que haremos es mostrar una suscripción funcionando. De acuerdo, la abriremos... 4,000. Iremos a Urkel. De acuerdo, estos son nuestros usuarios. Y luego iremos a usuario. Vamos a poner esto aquí. Hombre, odio Windows. Pon esto aquí. Y vamos a insertar una fila. La inserción puede ser directamente a través de la base de datos, o podemos insertar a través de la API de GraphQL. De cualquier manera, se captará, lo cual es genial, porque significa que tus suscripciones captarán cosas de trabajos cron automatizados que podrían estar insertando data en lotes todas las noches o algo así. Entonces, si guardamos esto, inmediatamente se actualizará. Así que, de acuerdo. Así que, continuemos. Y pasaremos a la implementación de VLS, que espero estar pronunciando correctamente. Probablemente no. Si solo cambio entre estos, notarás que son básicamente lo mismo. Y también, Apollo es básicamente lo mismo. Llegaremos a eso en un segundo. Sé que a mucha gente le gusta Apollo, pero hay mucho más contenido disponible para cosas de Apollo que para herramientas como, ya sabes, Villas. Pero de todos modos, lo mismo, iremos a Villas. Tal vez lo haya roto de alguna manera. Oh no, no lo hice, solo estaba muy lento. Sí, básicamente exactamente lo mismo, API muy similar, aunque adaptado a la vista y ligero. Realmente me gusta, creo que Urkel y Villas son fantásticos. Una cosa de la que realmente no tenemos mucho tiempo para cubrir en profundidad es que tanto Urkel como Villas pueden manejar cosas como consultas reactivas. Digamos que tenemos un data computado, así que si tuviéramos, digamos, const usuarios. Y esto fuera una lista de usuarios. Hagámoslo desde una consulta, y digamos que tenemos const filtroEdad igual a 18. Lo que puedes hacer es básicamente hacerlo computado. Puedes hacer un valor computado. Que vuelve a ejecutar tus consultas automáticamente, lo cual es genial. Sí, esto es algo que quería señalar que es realmente genial. Entonces, tienes un ID, ¿verdad? Puedes poner tu consulta dentro de tu cadena de consulta dentro de un valor computado de Vue, y luego puedes usarlo dentro de tu consulta. Y lo que sucederá es que si usas algo como un Vmodel o cambias el valor, la consulta se ejecutará automáticamente, lo cual hace que esto sea muy trans.

Es casi como si tu API data fuera solo este JSON transparente que está local y está sincronizado con tus vistas reactivas y estado, lo cual es súper, súper genial. Y sí, Urkel también puede hacer esto. No sé si Apollo puede hacerlo. No quiero afirmar nada en ningún sentido porque podría estar equivocado. Pero sí, puedes hacer cosas realmente interesantes con esto.

Sigamos adelante y veamos los dos últimos. Y así, este es un poco diferente. Esto está utilizando GraphQL Zeus de mi presentación. Y la razón por la que prefiero esto es que en lugar de escribir consultas individuales y luego generar tipos para operaciones específicas, esto genera un único SDK gigantesco que hace mucha magia con TypeScript para inferir automáticamente el tipo de retorno en función de lo que seleccionas. Por ejemplo, puedes ver que el tipo de la consulta useAllUsers es users con ID y email, que es un número y una cadena. Si elimino el email, entonces es solo un número. Y la sintaxis para esto es, podríamos hacerlo desde cero. Básicamente, la forma en que funciona es, vamos a eliminar esto. Presionamos Control-Espacio aquí para autocompletar, y luego, boom, es cada operación en toda tu API de GraphQL, y todas están tipadas. Así que digamos que queremos obtener meetups. Entonces comenzamos con meetup, y luego, es un array. El primer objeto son nuestros argumentos de consulta. Entonces, ¿cuáles son nuestros argumentos? Podemos hacer where, order by, offset, limit, distinct on. Entonces, meetups, where, name, iLike, porcentaje, view. De acuerdo, eso encontraría todos los meetups donde el nombre es insensible a mayúsculas y minúsculas, como view, y luego, la segunda cosa que necesitamos pasar es nuestra selección. Entonces, ¿qué queremos del registro de meetup? Bien, quiero, dame un ID, dame el nombre, dame la ubicación, la fecha y hora, y luego profundicemos. Entonces, quiero saber todos los usuarios que vienen a mi meetup. Y nuevamente, llegamos a filtrar y solo quiero los usuarios del meetup donde el, donde el correo electrónico del usuario sea igual a admin en sitio.com. Y luego selecciono nuevamente y quiero su ID y correo electrónico, eso es lo que estoy llamando. Entonces, esto es un poco feo, pero si verificamos el tipo de retorno, está automáticamente tipado. Y es como si tuvieras un autocompletado mágico que fuera toda tu API de GraphQL que abarca múltiples bases de datos, múltiples REST, múltiples servicios de GraphQL y que fuera completamente seguro en cuanto a tipos. Así que sí, esta es mi preferencia, GraphQL, Zeus o GenQL. Entonces tienes gql.query y también hay mutaciones donde podemos mutar data y también podemos hacer suscripciones. Nuevamente, con esa misma sintaxis. Así que lo recomiendo mucho, eso es realmente cómo surgió el término. Gracias, Allen, adiós. Espero que tengas un buen día. Gracias por acompañarnos. Luego nos pasamos un minuto del tiempo. Finalmente, solo voy a mostrar la integración con Apollo. De acuerdo, esto básicamente se hace de dos maneras. La primera es con el documento de tipo de GraphQL Code Gen. Se ve muy similar, así que es este use subscription. Nuevamente, tenemos data tipado. Y luego el segundo ejemplo, que utiliza la API de composición de Apollo para vistas. Entonces esto genera operaciones especiales. Como puedes ver, todas están tipadas aquí, puedes venir aquí. Todo esto está generado y tipado. Y sí, el uso es bastante similar. Este es un poco más corto porque se genera por operación, pero son más o menos lo mismo. Y luego nuevamente, es más o menos lo mismo aquí. No llegamos a cubrir Pena versus cosas de Vuex. Voy a hacer un resumen de 30 segundos si está bien. Aquí está el problema, el dilema con GraphQL, como la gestión de estado y el uso de GraphQL en aplicaciones. Tienes la opción de dejar que tu cliente de GraphQL gestione el estado de tu aplicación o usar una tienda de aplicaciones tradicional como Vuex o Pena y simplemente usar el cliente de GraphQL para obtener data, que luego puedes almacenar en tu modelo de tienda.

Así que Apollo te anima a usar Apollo como el estado completo de tu aplicación. Obtienes data del servidor, pero luego lo que haces es escribir un esquema local, una especie de esquema local de GraphQL y resolutores locales de GraphQL, y escribes como... Escribes como un esquema local de GraphQL que modela el estado de tu almacenamiento, y lo mezclas y gestionas con tu aplicación. Con Villus y con URQL, no hay gestión de estado, solo obtienen data. Y la idea es que eres libre de gestionar el estado como desees. Así que depende de ti.

Personalmente, prefiero usar algo como Vuex o Pina y simplemente usar GraphQL dentro de los componentes individuales y colocar allí los data que necesitan obtener, y lo que hago es almacenar ciertos fragmentos de información en un estado global. Cosas como el token de actualización del usuario y cosas así. Sí, Daniel dice, uso Vuex ORM y he escrito una función recursiva para tomar la respuesta y ponerla en la base de datos del front-end de la entidad. Sí, mantener algo como una base de datos del front-end. Vuex ORM se ve muy bien. Se ve que la gente está muy dividida en este tema. Creo que ambos tienen pros y contras.

Entonces, la ventaja de usar Apollo es que, en teoría, debería ser más eficientemente óptimo porque puede manejar, sus estrategias de almacenamiento en caché se pueden usar tanto en tu red como en tu almacenamiento local. Subjetivamente, creo que introduce mucha complejidad. Y personalmente, una y otra vez, he visto a la gente golpear su cabeza contra la pared porque se encuentran con problemas de caché o se olvidan de la caché. Y la caché es algo difícil de entender. Es simplemente algo difícil de entender por sí mismo, y mucho más cuando se mezcla con el estado regular de la aplicación sin conexión a la red. Entonces, el compromiso es si estás usando algo como Pina o Vuex, VuexORM para almacenar tu información crítica y usando GraphQL como una obtención de data. Creo que es conceptualmente más sencillo y más fácil de seguir. Pero, es posible que estés perdiendo algunas oportunidades de optimización. Así que es un argumento matizado y haz lo que quieras. Pero toma tu propia decisión. Y solo quería mencionarlo. Eso fue lo último que tenía. Así que gracias a todos por estar aquí.