Aprendiendo GraphQL: de curioso a confiado

Bienvenidos, una vez más. Muchas gracias por unirse a mí esta mañana, tarde o noche, dependiendo de la parte del mundo desde la que nos estén acompañando. Y como dice Agatha, hoy tenemos una audiencia bastante internacional. Así que una vez más, muchas gracias por unirse a mí.

Hoy vamos a aprender todo sobre la construcción y gestión de APIs de GraphQL. Básicamente, este masterclass se trata de aprender GraphQL y pasar de la curiosidad a la confianza en las próximas dos horas y media. ¿Y qué implica eso realmente? Durante este período de tiempo, vamos a construir algunas APIs. Las vamos a gestionar utilizando Tyke. Entraremos en los detalles a medida que avancemos.

Antes de eso, un poco sobre mí. Soy Budha, soy un Evangelista de Productos aquí en Tyke, y hoy les hablo desde Boston, EE. UU. Eso soy yo, trabajo para Tyke. Somos una plataforma nativa de la nube para la gestión de APIs y servicios. Un poco más sobre nosotros en unas diapositivas. Antes de eso, hablemos sobre lo que vamos a hacer hoy. Ya hemos terminado las presentaciones. Vamos a ver cómo construir un punto final de GraphQL con Express GraphQL. Trabajaremos para crear un punto final de GraphQL muy simple y ejecutarlo en una máquina local. Vamos a asegurar nuestro nuevo punto final de GraphQL con Tyke. Agregaremos algunas características de seguridad. Les explicaré algunas de ellas. Básicamente, vamos a ver todo el ciclo de vida de gestión de su punto final de GraphQL que estamos creando hoy. Finalmente, vamos a hacer algo realmente emocionante. Vamos a ver cómo construir un punto final similar con el gráfico de datos universal de Tyke. Esta es la versión sin código de lo que vamos a hacer utilizando Express GraphQL. Eso es lo que tenemos en la agenda para hoy. Sin más preámbulos, déjenme contarles un poco sobre la empresa con la que trabajo. Somos una solución nativa de la nube, una plataforma de gestión de APIs y servicios nativa de la nube. Básicamente, estamos impulsados por nuestra puerta de enlace de API de código abierto de baja latencia, que es esencialmente el cerebro detrás de las operaciones. Junto con nuestro hermoso panel de control de Tyke, que es básicamente una interfaz de usuario para interactuar con todas las diferentes capacidades de nuestra puerta de enlace de Tyke. Luego tenemos nuestro portal para desarrolladores que le permite exponer y publicar las diferentes APIs que tendría para su consumo por parte de desarrolladores de terceros y socios. Nuestra puerta de enlace de API es capaz de manejar APIs REST, GraphQL y gRPC. Hoy, obviamente, vamos a ver un subconjunto de eso, vamos a ver GraphQL y lo admitimos de muchas formas diferentes, algunas de las cuales verán hoy, específicamente, en torno a la seguridad donde hablamos no solo a nivel de punto final sobre autenticación y autorización, también vamos a ver cómo limitar la tasa de nuestras APIs, vamos a ver cómo limitar la profundidad de las consultas y los permisos basados en campos, muy específico para la capa de datos de GraphQL. Y finalmente, vamos a ver el gráfico de datos universal, donde vamos a combinar puntos finales REST, un par de puntos finales REST que ya existen y crear un punto final de GraphQL de manera sin código de una manera muy simple y rápida. Eso es quienes somos, eso es lo que es TAIK, ahora vamos directamente a la introducción a GraphQL.

Ahora, algunos de ustedes pueden saber esto, este taller en particular es realmente para personas que son un poco nuevas en el mundo de GraphQL, que no han construido muchas APIs de GraphQL, tal vez han experimentado un poco pero no mucho más que eso, pero han estado curiosos acerca de GraphQL por un tiempo, así que espero que hoy podamos satisfacer esa curiosidad y espero construir un poco más de confianza con algo de contexto, con una base de conocimientos, con algunas sesiones prácticas a medida que avanzamos, y eso les permitirá construir sus propios puntos finales de GraphQL y escribir sus propias consultas y resolvers a medida que avanzamos.

Así que solo para presentar rápidamente GraphQL, esta es la definición de GraphQL como se menciona en el sitio web de GraphQL. Es un lenguaje de consulta para sus APIs. Ahora, ¿qué implicaría eso? Estamos hablando de GraphQL, que fue creado por Facebook. Fue desarrollado internamente en 2012 en Facebook, y luego se lanzó públicamente en 2015. Fue creado para productos omnicanal. Básicamente, ese fue el caso de uso que Facebook utilizó para introducir, construir o crear GraphQL. Estaban introduciendo, esencialmente, se estaban sumergiendo en el mundo de los productos omnicanal, y la eficiencia de construirlos utilizando puntos finales REST resultaba ser bastante desafiante en los primeros días de Facebook. Y por lo tanto, crearon GraphQL, que es esencialmente una forma flexible que satisface las necesidades de múltiples plataformas con necesidades variables en lugar de crear múltiples APIs que estén realmente, realmente enfocadas y adaptadas a solo una cosa en particular. El desafío allí, obviamente, es que, a medida que sus canales de distribución se expanden esencialmente, si necesita construir sus puntos finales REST específicamente para cada una de esas diferentes plataformas, entonces eso podría acumularse muy, muy rápidamente y se vuelve mucho más difícil de gestionar, especialmente cuando está trabajando realmente en una base de datos común de la que esencialmente está trabajando o fuente de datos. Y finalmente, te da exactamente lo que necesitas. No hay concepto de sobreexposición. No hay subexposición de datos. Es muy, muy específico. Consultas lo que necesitas y obtienes en una estructura muy, muy predecible lo que tú o tu plataforma esencialmente necesitan consumir. Entonces, nuevamente, este es uno de los grandes puntos de venta, como decimos en el mundo de GraphQL.

Ahora, pasando a otro tema, esta es nuevamente, una conversación muy, muy típica. Cada vez que hablamos de GraphQL, siempre hay una pregunta sobre REST versus GraphQL, o cuál es mejor, cuál es peor. Creo que, simplemente, creo, tengo que decir que creo en este caso. Estoy del lado de aquellos que creen que ambos tienen su lugar en este mundo. Cada uno de ellos tiene sus propios beneficios. Cada uno de ellos tiene sus propias desventajas. Estas son herramientas, y las herramientas suelen ser importantes solo en el contexto de los problemas que resuelven. Ahora, si tomamos REST, REST se enfoca mucho en los recursos y en cómo crear una solicitud. Obtienes una respuesta. Hay un punto final con el que trabajas, un poco más fácil de asegurar, un poco más fácil de gestionar. Hay mecanismos de caché que pueden ser útiles. Hay códigos de estado dedicados a los puntos finales REST. Entonces, en ese sentido, REST puede ser bastante fácil para comenzar, pero también tiene sus propias desventajas donde hay una falta de flexibilidad que podría surgir en REST, especialmente cuando se adapta a un mecanismo de distribución de productos omnicanal. Entonces, por lo tanto, puedes volverte un poco más propenso a la sobreexposición de información o a la subexposición de información, nuevamente, dependiendo solo, si estás solicitando exactamente lo que necesitas, entonces está bien. Con el caso de uso con el que se construyó originalmente el punto final REST, si solo te estás adaptando y adaptando a eso, eso está perfectamente bien, pero tan pronto como las cosas comienzan a desviarse, las cosas pueden volverse un poco desafiantes a medida que avanzas. Entonces, GraphQL nuevamente, entra a resolver ese desafío en particular donde tienes este nivel de flexibilidad donde la aplicación consumidora de los desarrolladores de front-end esencialmente tiene ese poder para solicitar exactamente lo que necesitas o hacer exactamente lo que quieres, dependiendo del tipo de plataformas de front-end, del tipo de aplicaciones consumidoras que estás viendo. Un ejemplo similar de esto es esencialmente si miras, bueno, en este momento estoy mirando el clima. Entonces, si miras una aplicación del clima, por ejemplo, el requisito de una aplicación del clima, el requisito de datos de una aplicación del clima en un escritorio versus un dispositivo móvil versus un dispositivo portátil puede ser muy, muy diferente.

Y lo que quieres evitar es esencialmente tener un único punto final REST que se llame en todas estas plataformas y la mitad de la información que va a los dispositivos portátiles se subutilice porque no necesitas toda la información. Ahí es donde GraphQL brilla, donde puedes tener una base común o un esquema como lo llamamos en GraphQL, del cual hablaremos en un momento.

Creas el esquema esencialmente con todos los diferentes campos que deseas exponer, todos los diferentes puntos de datos que deseas exponer. Y luego eso puede ser consumido específicamente según el tipo de plataforma que está realizando la solicitud. Por lo tanto, eso permite mucha flexibilidad, pero esa flexibilidad también trae consigo un pequeño desafío porque con esa flexibilidad, esencialmente, la responsabilidad recae en la aplicación consumidora para usarla de la manera que desees, lo que significa que la estructura de las consultas, la profundidad de esas consultas y el orden de esa consulta será ligeramente impredecible. Es mucho más impredecible en ese sentido.

Por supuesto, ahora es predecible en términos de la forma en que solicitarías información y recibirías información, pero tú, como desarrollador del recurso backend, es posible que no tengas un control total en términos de cómo la aplicación frontend está solicitando esa información, puede estar solicitando de muchas formas diferentes. Por lo tanto, debes tener cuidado específicamente en cuanto a la seguridad en este caso, donde necesitas tener el poder de exponer los diferentes campos que deseas exponer según el tipo de usuarios que utilizarán esa aplicación. Y para llevar el punto aún más lejos, también estás viendo cosas como múltiples profundidades o múltiples capas de profundidad cuando se trata de realizar esas consultas. Puedes profundizar, no hay un límite bien definido en cuanto a qué tan profundo puedes ir con estas consultas. Puedes tener consultas anidadas dentro de GraphQL y eso nuevamente puede causar problemas en la gestión de la carga del servidor y a veces esto puede ser necesario, pero a veces también puede ser malicioso. Hay un par de desafíos porque ya no solo estás trabajando a nivel del punto final de la API. No solo estás trabajando en ese nivel HTTP que es esencialmente lo que hace REST, donde obviamente necesitas tener una autenticación y autorización allí, sino que también debes pensar en lo que está sucediendo en la capa de datos también, donde provienen todas tus consultas y solicitudes. Entonces, hay un par de desafíos diferentes allí.

Nuevamente, no se adhiere a las reglas estándar de tus códigos de estado y errores. Típicamente, puedes tener errores incluso con un código de estado 200, lo cual nuevamente, es algo que puede ser un poco desafiante de resolver. Pero nuevamente, porque es flexible, puedes escribir tus propios objetos de error personalizados y puedes proporcionar mucha más información según sea necesario. Hay aspectos positivos y negativos. Entonces, creo que el mantra aquí es hacer la pregunta que realmente necesitas hacer, la pregunta que realmente necesitas hacer aquí es, ¿cuál es mi caso de uso? ¿Y cuáles son mis prioridades? Cada una de estas herramientas, cada uno de estos estilos de API, tiene sus propios aspectos positivos. Cada uno de estos estilos de API tiene sus propios desafíos. Entonces, ¿cuáles de estos desafíos son inaceptables para ti? ¿En qué caso de uso te estás enfocando realmente, realmente? Y dependiendo de eso, puedes tomar una decisión. Entonces, cualquiera de estos podría funcionar para ti según tu caso de uso. No se trata de que GraphQL venga a reemplazar a REST. Esencialmente, cada uno de ellos tiene diferentes problemas que pueden resolver muy bien. Y debes preguntarte qué problema o qué desafío es el que te importa y, por lo tanto, elegir una solución en consecuencia. Esa es un poco la esencia de GraphQL. Una breve introducción al mundo de GraphQL.

También quiero presentar un par de conceptos realmente, realmente simples de GraphQL, que esencialmente te ayudarán a comprender mejor a medida que comencemos a construir nuestra solución. Lo que he hecho aquí es tomar este esquema. Este es esencialmente el esquema que vamos a construir en función de la aplicación Express GraphQL que vamos a construir en la próxima hora. Entonces, comencemos definiendo qué es un esquema. Un esquema es esencialmente en GraphQL, un esquema es esencialmente el diseño de tu API. Define todos los diferentes tipos, todas las diferentes cosas que puedes hacer, las diferentes acciones que puedes realizar, los diferentes datos que puedes solicitar. Entonces, eso es esencialmente el diseño de toda tu API de GraphQL. Ahora, más allá de eso, si ves aquí en la parte superior, ves algo llamado tipo mutación, ves algo llamado tipo consulta. Ahora, si volvemos a los objetivos de las API, si miramos las aplicaciones CRUD, el C-R-U-D, que es esencialmente crear, leer, actualizar y eliminar. Estas son las tareas básicas que generalmente deseas realizar con tus API. Tal vez una de ellas, tal vez todas ellas, según lo que desees lograr. Entonces, en REST, tendrías algo como solicitudes GET para solicitar información, leer información, tu R dentro del CRUD, crear, probablemente hacer una solicitud POST, las actualizaciones podrían ser parches, tal vez incluso puts y delete, podría ser simplemente delete. Entonces, de manera similar, esencialmente tenemos nuestros dos tipos diferentes aquí, que es esencialmente consultar y mutaciones. Las consultas, por lo general, están destinadas a solicitar información, como sugiere el nombre. Ahora, con las consultas, esencialmente esta es la estructura que verás, defines el tipo de acciones que puedes realizar o el tipo de información que puedes solicitar, y las consultas te ayudarán a lograrlo. Ahora, este es, con mucho, el aspecto más utilizado de GraphQL. En su mayoría, esta es la solicitud que se realiza. Pero más allá de eso, tenemos lo que se llama mutaciones. Como sugiere el nombre, las mutaciones esencialmente son la manipulación o el cambio o la modificación de datos en tu fuente de datos. Eso incluiría agregar nueva información, agregar nuevos datos a tu fuente de datos, eso incluiría actualizar datos en tu fuente de datos, o podría tratarse de eliminar información de tu fuente de datos. En el ejemplo de hoy, en realidad veremos cómo puedes agregar un usuario. Pero tal vez como ejercicio, cuando regreses y lo intentes tú mismo, tal vez también puedas explorar cómo puedes actualizar y eliminar información también, como cuando intentes practicar estas cosas tú mismo. Pero, esos son los dos grandes. Si estás comenzando con un esquema, aquí es esencialmente donde comenzarías, este es el objetivo de construir tu esquema. Estás tratando de permitir que las personas consulten tu información, consulten tus fuentes de datos, o estás tratando de permitir que las personas realmente realicen cambios o modifiquen esas fuentes de datos. Consultas y mutaciones. Hay un tercer tipo aquí, que es la suscripción, que es esencialmente un oyente. Puedes escuchar cambios en tu fuente de datos, pero para el propósito de la conversación de hoy, voy a omitir la suscripción, pero siéntete libre de leer también sobre eso. Habrá una nueva actualización emocionante de la que hablaré quizás en un mes, así que mantente atento a eso. Pero las suscripciones, nuevamente, a diferencia de lo que tendrías con tus operaciones básicas de REST, la suscripción viene prácticamente construida, integrada en GraphQL, y es un mecanismo para escuchar eventos específicos o cambios, por ejemplo, en la información del usuario, tal vez cambios si se agrega una nueva lista de tareas pendientes, entonces tal vez quieras ser notificado en función de eso. Eso es lo que hacen las suscripciones. Pero nos centraremos en consultas y mutaciones para el propósito de la demostración de hoy.

Ahora, más allá de eso, si lo miras, los bloques de construcción esenciales, ¿cómo se dice? Los bloques de construcción esenciales de tu esquema de GraphQL son, o son, tus tipos, tus tipos y tus campos. Ahora, si ves un ejemplo aquí, tienes tu tipo tarea, tienes tu tipo usuario, y dentro de estos tipos, esencialmente son objetos. Estos son objetos que definen los diferentes tipos de datos, los diferentes campos que se unen para proporcionar la información que necesitas. Por lo general, tienen una correlación con tu fuente de datos detrás de escena, como verás en muy poco tiempo, pero también están definidos por, estos campos tienen tipos asociados. Entonces, esto es lo que llamarías escalares. Los escalares están esencialmente construidos en GraphQL, nuevamente. Entonces tienes algunos tipos básicos que ya son proporcionados por GraphQL. Tienes tu entero, tienes tus cadenas, también tienes un booleano. Y luego, más adelante, también puedes tener listas.

Entonces, si observas estos corchetes, son esencialmente una lista de información. Devuelve una matriz de información para ti. Al inspeccionar más a fondo, también puedes ver que puedes tener estos tipos personalizados aquí, que son tus usuarios. Puedes solicitar información de los objetos que has creado. Entonces, en lugar de solo usar enteros, cadenas o booleanos, puedes solicitar información basada en el objeto que has creado.

Nuevamente, pasaremos por este proceso de crear cada uno de ellos a medida que avanzamos. Otra cosa que puedes notar aquí en la parte superior como parte de la consulta es que existe algo llamado argumento. Entonces, esto es esencialmente un argumento que tu consulta va a tomar. En este caso, se trata de obtener un usuario para hacer algo, o podría ser obtener un usuario en particular. Y aquí, llenarías, tal vez, el ID del usuario del que deseas obtener la información. Esto es un argumento, así es como lo definirías. Entonces, esto es una breve descripción de cómo se ve un esquema. Es un resumen de lo que puedes hacer con GraphQL para empezar. Es una visión general. Iremos a más detalles a medida que avanzamos.

Hay un par de otras cosas que creo que es mejor mostrar en lugar de hablar, pero espero que esto te dé una idea de cómo se ve un esquema de GraphQL, cómo se vería un esquema típico de GraphQL y cómo se verían algunos de estos diferentes elementos que ves. Nuevamente, el orden aquí no tiene que ser el mismo que el tuyo. No creo que haya un orden necesario en este caso, pero típicamente, comienzas con tus tipos básicos, que son los tipos básicos con los que comienzas, y luego tienes tus consultas, que serían lo que se expone para las solicitudes que vendrían a través de tu playground de GraphQL o cualquier otra aplicación de cliente que estés utilizando. Entonces, tus consultas y mutaciones son esencialmente tus puntos de entrada, y luego eso pasa a tus diferentes tipos de datos internos.

Muy bien, sigamos adelante. Hablemos de lo que vamos a construir hoy. Esta es la parte emocionante. Lo que vamos a construir hoy es básicamente una aplicación simple. Vamos a utilizar Express y GraphQL. Vamos a construir dos tipos de datos, básicamente. Uno será usuarios. El otro será tareas pendientes. Esencialmente, es una aplicación que maneja información de tareas pendientes basada en usuarios. Eso es básicamente lo que vamos a hacer. Son dos tipos de datos diferentes con los que trabajaremos.

También vamos a ver cómo consultar información, que es simplemente solicitar información que tienes, solicitar información del usuario, solicitar información de la lista de tareas pendientes de ese usuario. Pero también vamos a ver las mutaciones donde vamos a agregar un nuevo usuario y lo que eso implicaría.

Ahora, otro componente del que no he hablado hasta ahora es lo que llamarías un resolver. Ahora, cada uno de estos campos diferentes, algunos de ellos son simples. Algunos de ellos pueden requerir un poco de cálculo o cálculo involucrado. Entonces creas una función que resuelve los requisitos de ese campo en particular. Un ejemplo sería, si volvemos a nuestro esquema, un ejemplo sería, si miras todas estas consultas diferentes, entonces, ¿qué significaría hacer una consulta a todos los usuarios aquí, qué significaría eso? ¿Con qué debería responder esto? ¿Cómo debería verse la respuesta? Eso es esencialmente manejado por un resolver. Es una función que esencialmente calcula tu solicitud y te proporciona la respuesta. Eso es lo que es un resolver. Nuevamente, construiremos todo esto a medida que avanzamos, y lo veremos en acción. Así que espero que eso aclare un poco más las cosas.

Además de esto, cómo vamos a construir esto, como dije, vamos a utilizar Express GraphQL. Lo que necesitarías es tener Node o NPM instalado en tu computadora portátil, especialmente si vas a seguir el proceso, lo cual recomendaría. Creo que si cumples con estos requisitos previos, te recomendaría seguir el proceso. Creo que eso te ayudará mucho en términos de desarrollar tu confianza, si puedes hacerlo. Porque nuevamente, la práctica es definitivamente muy diferente a solo mirarme o mirar mi pantalla, lo cual está perfectamente bien también. Pero creo que si deseas tener un poco de experiencia en construir algo propio y luego jugar con ello en el futuro también, entonces esta podría ser una buena opción para hacerlo. Como dije, hay un requisito previo aquí donde debes tener Node instalado en tu sistema. Si no lo tienes, no dudes en hacerlo. Ahora mismo, creo que está en nodejs.org si no me equivoco, e instala Node en tu sistema. Probablemente te llevará solo un par de minutos hacerlo. Además, necesitarás tener algún tipo de terminal para ejecutar tus comandos. En Mac, por supuesto, es Terminal. En una máquina con Windows, puedes usar tu línea de comandos o tal vez PowerShell, si una de las dos es tu opción preferida. Pero siéntete libre, pero necesitas una terminal para ejecutar tus comandos e idealmente también un IDE para tu programación. Entonces, esto podría ser un editor de texto también. Pero un IDE podría ser beneficioso aquí. Voy a usar Visual Studios. Pero si tienes otra opción de tu preferencia, cualquier otra preferencia, siéntete libre de usarla por tu cuenta. Además, también vamos a utilizar algo llamado ngrok. Porque vamos a construir esto localmente hoy, queremos exponer esto para el consumo por parte de Tyc. Vamos a crear una cuenta de Tyc Cloud en la segunda mitad de este taller. Y para que pueda consumir la API que hemos creado, sería bueno si puedes exponer esa API para su consumo público. Y ngrok es una forma de hacerlo. Básicamente, crea un túnel de IP para su consumo externo. Entonces, si esto es algo que no puedes hacer, te daré un ejemplo de una API ya disponible públicamente que también puedes usar para realizar todas estas cosas diferentes que vamos a hacer. Básicamente, los pasos que vamos a seguir a nivel de gestión de API de Tyc se pueden utilizar en cualquier punto de acceso, cualquier punto de acceso GraphQL que desees utilizar. Hay muchos ejemplos disponibles públicamente. Pero si quieres usar lo que vamos a construir hoy, entonces necesitaremos NGROK. Pero no te preocupes demasiado por NGROK en este momento, lo instalaremos en la segunda mitad antes de comenzar. Pero por ahora, creo que si tienes Node instalado con una terminal y un IDE, estamos listos para comenzar.

Muy bien, sigamos adelante y construyamos nuestro punto de acceso GraphQL. Espero que puedas ver mi terminal. Y creo que es lo suficientemente grande como para que puedas ver lo que estoy haciendo, espero. Muy bien, con eso, comencemos. Voy a dirigirme a mi directorio de trabajo. Quiero decir, comenzar con un... Y aquí dentro, voy a crear rápidamente un nuevo directorio. Así que siéntete libre de seguir el proceso en este momento. Voy a seguir estos pasos muy, muy lentamente para no apresurarme y para que puedas seguir el proceso. Así que lo hice lo suficientemente grande. Entonces el primer paso será... Vamos a crear nuestra carpeta de trabajo, que voy a hacer usando make directory. Solo la llamaré Galaxy demo 2021. Eso creará mi directorio. Voy a ir directamente allí. Este será nuestro directorio de trabajo. Ahora, si tienes Node instalado, espero que lo tengas. El siguiente paso es inicializar nuestro proyecto de Node, vamos a usar put in it.

Voy a usar todo lo que es predeterminado en este momento. Así que voy a poner un guión guión sí, para que siga adelante. Pero puedes seguir paso a paso, si quieres todos los diferentes pasos aquí. Así puedes personalizar, puedes cambiarlos al principio, pero tenemos acceso al archivo package.json en el que también podemos hacer cambios.

Así que no me molestaré con eso. Entonces, creo que está aquí. Ahora lo que voy a hacer es cambiar a Visual Studio Code, VS Code, y voy a abrir mi carpeta aquí para poder trabajar desde aquí. Tenemos nuestra demo aquí. Este será nuestro directorio de trabajo y la buena parte es que puedo abrir mi terminal aquí también, que es lo que voy a intentar usar a partir de ahora. Está esencialmente a nivel de mi proyecto. Y en caso de que te lo estuvieras preguntando, tenemos nuestros paquetes aquí mismo. Así que si quieres hacer cambios en esto más adelante, también puedes hacerlo. Pero por ahora, empecemos aquí.

Necesitamos instalar un par de cosas más. Así que nuevamente, sigue adelante. Déjame ver si puedo hacer esto un poco más grande. Ahí tienes. Espero que esto sea un poco más visible. Vamos con npm install. Vamos a instalar express. Vamos a instalar express-graphql. Solo un momento. Ok, express-graphql. También queremos instalar graphql. Y creo que voy a guardar esta dependencia. Va a tomar un poco de tiempo. Y ahí lo tenemos. Hemos agregado nuestro paquete. Y si ves en nuestro package.json, ahora tenemos express-graphql así como graphql instalados aquí. Así que eso está hecho.

Voy a usar otra utilidad, que se llama NodeMon. Básicamente lo que hace, es actualizar y reiniciar rápidamente el servidor cada vez que hago un cambio en el código. Así que en lugar de tener que actualizar y reiniciar manualmente mi servidor cada vez, lo hará por mí. Así que esta es una herramienta útil y valiosa. Así que voy a hacer uso de eso por el momento. Entonces, eso es npm install NodeMon. Nuevamente, esta es una dependencia de desarrollo. Así que creo que puedo hacer un save dev en esto. Y ahí lo tienes, tengo NodeMon aquí.

Una de las cosas, ahora lo que voy a hacer a continuación es, voy a crear mi archivo de entrada, básicamente. Nuevamente, con el propósito de simplicidad hoy, voy a trabajar solo con index.js. Pero por supuesto, el código se puede dividir en múltiples carpetas. Se puede dividir en múltiples estructuras organizativas, lo cual te dejo a ti hacer. Pero solo por el propósito de simplicidad hoy, voy a trabajar con el archivo index.js. Así que con eso, acabo de crear mi index.js, y aquí voy a comenzar a agregar mi código. Así que espero que todos hayan logrado, si estás siguiendo, hayas logrado seguir hasta ahora, estos pasos son lo suficientemente sencillos. Si te quedas atascado en algún momento, no dudes en ponerlo en el chat. Porque por supuesto, cuanto más avanzamos, más difícil será volver atrás. Así que si en algún momento tienes una pregunta, siéntete libre de preguntar casi de inmediato si puedes, tengo mi chat aquí también. Así que, ok. Supongo que todo está bien. Supongo que has llegado a este punto donde has creado tu index.js? Tienes todos tus diferentes paquetes y módulos de nodo necesarios, como mencionamos antes. Así que a partir de aquí, vamos a comenzar agregando el código. Tal vez una cosa más que podemos hacer antes de eso, puedes hacer esto un poco más tarde también, pero lo que haré solo para terminar mi paquete de JSON tal vez es que si miras esta sección de scripts, voy a cambiar esto a start y voy a cambiar esto para que sea node-mon-index.js. Entonces, lo que esto hará es cuando esté a punto de iniciar el servidor al final de mi primer lote de código, simplemente voy a decir npm start y ejecutará este script de inicio en particular en ese momento, lanzará node-mon por mí, lanzará index.js y escuchará esos cambios que voy a hacer de forma continua. Así que este es solo uno de los pasos. No necesariamente necesitas hacer esto. También puedes ejecutar tu index.js usando node espacio index.js también. Pero por supuesto, puedes usar esto como una forma un poco más simple, eficiente de manejar esto, creo. Así que voy a quedarme con esto.

Ok, con eso fuera del camino, pasemos al lado real de la codificación. Así que voy a comenzar con algunas llamadas de importación. Comenzaré importando Express primero. Si ves, puede que me esté dando un poco de desafío aquí porque creo que lo que está sucediendo tal vez mi ES6 puede no estar, ya en su lugar, pero lo resolveremos más tarde. Por ahora, voy a hacer un montón de importaciones diré GraphQL HTTP de Express. Está autocompletando muchas cosas para mí lo cual obviamente me facilita un poco la vida. Y luego vamos a pasar a las actualizaciones. Tenemos, GraphQL schema. También necesitamos, creo que necesitamos un GraphQL string. Necesitamos GraphQL object.

Creo que esa es la ortografía correcta. Sí. Bien, creo que es un buen punto de partida por ahora. Espero haber escrito correctamente. Me lo dirán más tarde si no es así. Así que, bien, aquí vamos. Esto es con lo que comenzamos. Creo que vamos a empezar con estas importaciones. Iremos construyendo sobre esto si necesitamos otras cosas a medida que avanzamos. Por ahora, podemos comenzar con esto.

Ahora, una advertencia aquí, hay un par de formas diferentes en las que puedes escribir tu API de GraphQL usando Express también. Una forma es usar lo que llamas el lenguaje de definición de esquema, que es bastante similar al esquema que viste. Básicamente, estás usando eso. Estás escribiendo resolvers y avanzando. Ahora puede haber algunos desafíos con eso. Creo que si solo estás usando eso, entonces es bastante difícil en realidad... Puede que no sea posible escribir resolvers para campos dentro de un tipo en particular. Puedes escribir resolvers a nivel raíz, cada una de las diferentes reglas que vimos anteriormente, pero en realidad no puedes hacerlo para los campos internos que están dentro del tipo. Ahora, hay una forma de evitar eso. Puedes usar clases ES6 para evitar eso, que es otra forma de manejarlo. Pero para completar, incluso con esas clases ES6, a veces puede haber desafíos con uniones e interfaces. Así que tal vez sea otro ejemplo para una fecha diferente. Para completar esta demostración en particular, creo que voy a tomar la raíz de la creación de objetos GraphQL, y voy a adoptar un enfoque más orientado al código para la demostración de hoy. Así que espero que sigas esto. Hay un ejemplo muy bueno de una forma rápida y sencilla de crear tu punto final de Express GraphQL. utilizando el método SDL en el sitio web de graphql.org. Así que siéntete libre de revisarlo también en tu propio tiempo, pero sigamos adelante al siguiente paso.

Para esto, tenemos algunos pasos que queremos hacer. Comenzamos con una aplicación muy, muy simple de Hola Mundo primero. Y para hacer eso, voy a comenzar creando mi tipo de consulta raíz. Así que empecemos definiéndolo. Voy a decir const tipo de consulta. Esto va a ser un nuevo tipo de objeto GraphQL. Y esto toma algunos argumentos dentro, algunas cosas diferentes dentro, configuraciones como quieras, y dale un nombre, solo lo llamaré consulta. También puedo darle una descripción si quiero. Y esto puede ser, bueno, esta es, bueno, esta es la consulta raíz. Y finalmente, podemos comenzar a definir nuestros campos. Luego aquí, ahora podemos comenzar a definir campos. Ahora, si recuerdas, si vuelves a nuestro especie de plan que estábamos usando, estábamos mirando a los usuarios. Así que hagamos algunos, estábamos usando usuarios, así que vamos a intentar llegar allí primero, pero antes de eso, para este ejemplo en particular, solo estamos mirando Hola Mundo. Así que empecemos con algo muy, muy simple. Esto va a ser una consulta llamada Hola. Y lo que esto va a hacer es que va a ser de tipo string, o en nuestro caso, string de GraphQL. También podemos poner una descripción aquí, si quieres, esto puede decir Hola. Luego finalmente, lo que queremos escribir es un resolve. Aquí es donde esencialmente estamos traduciendo cualquier solicitud y creando la respuesta que va a regresar. Así que en nuestro caso, simplemente vamos a tomar una función simple, no se necesitan argumentos. Solo va a devolver un simple. Eso es prácticamente todo lo que necesitas hacer en este momento. Ese es el resolver más simple que verás en este momento. Entraremos en ejemplos más complejos a medida que avancemos. Pero por ahora, nos vamos a quedar con esto. Tenemos un par de otros pasos para completar este ejemplo en particular. Y para comenzar, vamos a ir con, ahora que tenemos esto. Y vamos a crear nuestro esquema de GraphQL. Así es como estamos definiendo. Entonces, si has creado una consulta, cualquier información que vaya a ir en la consulta, el resolver que está asociado con esa consulta que va a solicitar información, el siguiente paso es construir nuestro esquema. Vamos a hacer eso creando un nuevo esquema de GraphQL. Y aquí, queremos tener nuestra consulta, que vamos a llamar consulta raíz. Básicamente, lo que definimos aquí. Y vamos a hacer lo mismo con la mutación cuando avancemos. Así que por ahora, esto es ahora nuestro esquema ha sido definido. Ahora comencemos con nuestra aplicación Express. Express va a ser igual a Express, eso está inicializando nuestra aplicación Express. Y aquí, voy a crear mi punto final. Por supuesto, puedes elegir como quieras. Voy a tomar simplemente barra diagonal GraphQL. Y lo voy a llamar, lo siento, creo que lo tengo dentro de los corchetes, GraphQL HTTP. Y aquí dentro, uno de los corchetes se ha desviado, pero lo arreglaremos. Ahora necesito darle el esquema que creamos.

Y vamos a usar un Playground. así que será solo gráfico. Esperando haber colocado correctamente mis corchetes. Parece que sí, lo cual está bien. Luego finalmente, queremos que nuestra aplicación escuche en el puerto 4000 a 4001. Bien, mi primo podría estar ocupado. Y aquí, solo voy a decir console. Console. Blob. Y voy a poner un mensaje en el servidor, ¿el servidor está en ejecución? en oracle host 1001 slash craft run. Entonces, con suerte, este es el último paso. Y si todo va bien, solo voy a guardar eso. Ahora voy a iniciar mi servidor diciendo NPM start. Con suerte, cruzo los dedos, veremos que aparecen los verdes. No lo hicimos. Bien, así que tenemos algunos problemas aquí. Lo cual es lo que predijimos. Porque la importación es un estándar ES6, así que creo que solo necesitamos arreglar eso. Para hacer eso, volvemos al archivo JSON. Y creo que si ves la razón aquí, digamos que necesitas establecer un tipo de módulo aquí arriba. Así que voy a volver aquí. Lo voy a llamar tipo, y voy a decir módulo. Voy a guardar esto. Voy a salir de aquí. Voy a iniciar mi servidor. Voy a reiniciarlo. Ahí lo tienes, todo está en verde. Ahora probemos eso. Ahora, probemos esto. Estamos en localhost 4001 / GraphQL. Así que probémoslo. Localhost, 4001 / GraphQL. Ahí lo tienes, esta es la interfaz gráfica que estás viendo en este momento. Esto es básicamente un playground. Para aquellos que no están familiarizados con esto, este es un playground donde puedes interactuar con tu API de GraphQL. Básicamente, puedes interactuar con el esquema, puedes solicitar información y recibir tu respuesta, que veremos en breve. Así que voy a eliminar todo eso. Una cosa que notarás aquí. En el lado derecho, si lo miras, hay una sección llamada Docs. Esto te dará una idea de todas las cosas diferentes que puedes hacer aquí. Básicamente, las actividades que puedes hacer aquí, los tipos raíz que has definido. Así que si entro aquí en mi consulta, que es mi tipo raíz, si recuerdas. Lo que hemos hecho aquí es listar los lóbulos. Ese es el campo que tenemos en este momento. Esto es lo que podemos solicitar en este momento. Comencemos escribiendo una consulta. Solo voy a decir hola. Y nuevamente, si todo va bien como hasta ahora, obtendremos información de hola mundo aquí. Entonces esto es esencialmente ejecutando nuestra primera API de GraphQL. Esta es la primera solicitud de GraphQL que hemos enviado, la primera consulta de GraphQL que hemos enviado, y esta es la primera respuesta. Ahora, es posible que hayas notado, nuevamente, que a veces está bien omitir esto. En la mayoría de los casos, terminas omitiendo las consultas, por lo que seguirá funcionando exactamente de la misma manera que una consulta es algo que no necesariamente necesitas hacer, como se dice, pero debe seguir esa estructura correcta de corchetes. Entonces, bueno, ese fue el ejemplo más simple para comenzar. Estamos nuevamente en un punto de hola mundo. ¿Alguien tiene alguna pregunta? Tenemos, demos un minuto más o menos si alguien quiere hacer una pregunta en particular o si está interesado en cualquier otra cosa, hasta ahora hemos llegado, porque este es el punto de partida de lo que vamos a construir a partir de ahora. Vamos a ver consultas ligeramente más complejas, tipos ligeramente más complejos, tipos de datos con los que vamos a trabajar. Y luego nos adentraremos en el mundo de las mutaciones también. Entonces, si tienes alguna pregunta, este sería un muy buen momento para preguntar, o si estás atascado en algún lugar, este sería el momento de preguntar. Bien, hasta ahora no veo nada. Así que voy a asumir que todo ha ido realmente, realmente bien hasta ahora. Has estado siguiendo todo lo que he estado diciendo. Entonces, muchas gracias por seguirlo. Entonces, volvamos ahora a Visual Studio con este ejemplo inicial fuera del camino. Sigue reorganizando el video también, está bien. Ahí lo tienes. Muy bien, lo que haremos a continuación es comenzar a construir nuestra aplicación de lista de tareas una aplicación de lista de tareas para el usuario también. Entonces, lo que vamos a hacer ahora es, en primer lugar, necesitamos tener una fuente de datos. Ahora, para el propósito de este ejemplo solo voy a definir la fuente de datos aquí mismo pero también puedes conectar fácilmente tu aplicación con una base de datos, ya sea una base de datos de Sequel o una base de datos NoSQL u cualquier otra fuente de datos que desees, también puedes hacerlo. Obviamente, necesitarías diferentes controladores para administrar las conexiones de la base de datos. Para simplificar, nuevamente, en nuestro caso solo voy a usar una matriz simple de objetos para obtener alguna información de demostración. Así que comencemos con esto.

Voy a crear algunos datos de usuario data que es lo que vamos a utilizar. Así que voy a usar cons-users, lo siento, Permíteme crear una matriz de objetos, así cada uno de nuestros usuarios tendrá algunos campos diferentes. El primer campo que estoy definiendo será un id. Entonces, el id es, Voy a pasar al nombre, que será de tipo string. Solo voy a llamarlo, voy a ponerle mi propio nombre. Y tendremos correo electrónico, llamémoslo, veamos un correo electrónico. Entonces mi correo electrónico, como la mayoría de ustedes sabrán, es prototype.io. Entonces este podría ser nuestro primer objeto.

Ahora, al mirar la data fuente, al mirar lo que quieres como resultado, ya puedes comenzar a pensar en cómo puedes planificar la creación del tipo de data. Tu tipo de data tendrá id, nombre, correo electrónico. El id será de tipo entero. El nombre, potencialmente string. El correo electrónico, potencialmente string. Así que eso te da una idea, solo mirando la data en sí. Ahora, obviamente también puedes hacerlo al revés, donde defines tu estructura primero y luego comienzas a mirar la data. Pero en muchos casos encontrarás que ya tienes alguna especie de data fuente en la que ya has trabajado y ahora estás buscando construir el lenguaje de consulta, el lado de GraphQL después de eso. Entonces, de cualquier manera funciona, pero para el propósito de esta demostración, estoy eligiendo primero la data almacenada. Voy a crear otro ejemplo para que también tengamos algo más con qué trabajar. Llamémoslo correo electrónico de James. Solo voy a llamarlo, bueno, James gmail.com. Así que con eso, eso crea nuestra primera fuente de data en este momento. Creo que solo vamos a estar usando esto como una fuente de data. Lo que vamos a hacer a continuación es crear un tipo de data. Vamos a crear el tipo de usuario. Como hicimos para la raíz, vamos a crear un objeto personalizado aquí. Así que hagámoslo. Para hacer eso, vamos a seguir una estructura similar a la que hicimos con nuestro tipo de consulta raíz. Entonces vamos a usar const, lo vamos a llamar tipo de usuario. Esto será un nuevo tipo de objeto GraphQL. A medida que construimos esto, espero que comiences a ver algunos de estos diferentes patrones, el patrón repetitivo, para que puedas comenzar a pensar o planificar tu propio proyecto en el futuro tal vez. Y esto te ayudará con eso. Entonces, cuanto más intentemos, más practiquemos, más confianza obtendremos y ese esencialmente el propósito de esta demostración también. Así que sigamos adelante. Sigamos y pongámosle un nombre. Solo voy a llamarlo usuario. No es exactamente creativo, pero mantengámoslo así. Le voy a dar una descripción. Esto representa a un usuario. Ahora, quiero definir mis campos, lo cual probablemente ya estés pensando un poco, imagino, según lo que vimos anteriormente. Así que hagámoslo. Si ves esta estructura, tenemos un ID, tengo un nombre y un correo electrónico. Eso es básicamente lo que voy a definir aquí. Ahora, la diferencia aquí obviamente es que no es tan sencillo. Estamos usando objetos en este caso. Entonces vamos a usar, digamos, tenemos que definir nuestro tipo, qué tipo de información se espera en el nivel de ID. Entonces nuestro tipo será lo que llamas un GraphQL int, entero. Así que definámoslo. Está demasiada información a veces GraphQL int. Eso es lo que necesito. Espero haber escrito bien. Creo que eso es todo. Entonces, con GraphQL int ahora, lo que sucede aquí, sin embargo, es que si piensas en un ID. Un ID para un usuario, es básicamente algo así como un identificador único. Por lo tanto, lo que significa es que es algo que definitivamente un usuario debería tener. O al menos en este caso, quiero que mi usuario lo tenga. Ahora, abordaré eso en breve, pero antes de eso, permíteme completar esto para que puedas ver cómo se vería una estructura básica. Solo voy a, estoy usando GraphQL string para esto. Vamos a usar lo mismo para el correo electrónico también. Entonces, volviendo al punto de, algo como un ID es un campo obligatorio. Es algo que se necesita, es importante. Por lo tanto, no quieres que este sea un valor nulo o un campo nulo. Entonces, ¿cómo lo definimos? Necesitamos, vamos a usar algo llamado GraphQL non-null. Cuando envuelves eso alrededor de un tipo particular, significa que necesitas tener un valor para este campo en particular. Nuevamente, es opcional según tu fuente de data. Pero para mis propósitos, quiero tener esto, y la forma en que lo harías es haciéndolo con GraphQL non-null. Entonces, en esencia, ese es mi tipo de usuario. Esta es esencialmente la estructura. Debería parecer bastante familiar a lo que teníamos en la fuente de data. Y esencialmente mapeando eso.

Ahora en nuestra consulta raíz original, como dije, esa es básicamente la entrada, esto es básicamente lo que solicitas. Esto es lo que estás consultando. Entonces necesitamos agregar un medio para consultar a nuestro usuario. Entonces vamos a agregar algo llamado obtener usuarios. El propósito de esto sería recuperar todos los diferentes usuarios que tengo en mi fuente de datos. Así que vamos a hacer eso. Voy a seguir un patrón similar aquí. El tipo esperado, sin embargo, en este caso, como puedes ver en hola, teníamos el tipo esperado como cadena de artesanía, que es un escalar como dije antes, en este caso, voy a usar objeto, que será de tipo tipo de usuario. Ahora, lo otro aquí es, si te das cuenta, no tenemos solo un usuario, tenemos varios usuarios que vamos a usar. Entonces lo que voy a hacer es crear una nueva lista de GraphQL. Esto devolverá una matriz de tipo tipo de usuario. Ese será el tipo, esto es lo que se devolverá. Ahora, continuando, tenemos nuestra descripción, que será una lista de todos los usuarios. Luego escribiremos un resolvedor.

Bien, a diferencia de la anterior, esta tiene un poco más. Sin embargo, como solo estamos usando una data fuente aquí, que es básicamente esta matriz, lo que puedo hacer es simplemente devolver toda mi matriz aquí. Por supuesto, ahora puedes agregar tus comprobaciones y equilibrios aquí si quieres agregar algo, pero para mis propósitos, solo quiero la lista de todos mis usuarios, y esto hará exactamente eso. Entonces, lo que está haciendo es simplemente devolver todos mis usuarios en esta matriz en particular, y eso debería ser todo.

Ahora creo que solo me aseguro de que tenga, bien, hay algunas cosas que faltan, y esto era de esperar, porque hemos usado algo como no nulo de GraphQL, hemos usado lista de GraphQL, que no hemos definido en la parte superior. Entonces, la lista y el entero de GraphQL, todo eso ha venido automáticamente. Creo que VS Code es lo suficientemente inteligente como para hacer eso, pero lo que falta ahora creo que es no nulo de GraphQL. Entonces, creo que eso espero que sea lo único que era un problema, y deberíamos poder seguir adelante. Creo que tenemos lista de GraphQL, tenemos todo lo demás, bien. Ahí tienes. Eso está hecho.

Ahora probemos esto. Voy a volver a mi interfaz gráfica. Ahora tengo que actualizar esto para que surta efecto. Como puedes ver en la documentación, ya puedes ver que la consulta obtener usuario está disponible para mí. Así que ahora vamos a probar eso. Voy a eliminar hola, voy a decir obtener usuarios, y ahora dentro de eso, voy a consultar información específica. Ahora, si observo la estructura de esto, y el usuario, si recuerdas, tenemos ID, nombre y correo electrónico. Ahora puedo solicitar todos ellos, y debería recibir una respuesta. Como puedes ver, tengo una lista de información aquí, así que puedo solicitar toda la información, todos los campos diferentes que están disponibles para mí, o puedo solicitar un subconjunto de esto, donde puedo eliminar el correo electrónico, tal vez incluso el ID. Si solo estoy interesado en obtener los nombres de todos mis usuarios, puedo solicitar exactamente esa información. Y esto, nuevamente, es el poder de GraphQL. Entonces has creado el esquema. Has creado esta conexión de fuente de datos donde puedes solicitar todos los diferentes usuarios, pero es lo suficientemente flexible, según tus necesidades, puedes solicitar exactamente lo que deseas en tu respuesta. Entonces, eso es básicamente, nuevamente, demostrando un poco del poder de GraphQL. Ahora hemos pasado a crear nuestro propio usuario, lo cual es fantástico. Sigamos construyendo sobre esto. Espero que hayan estado siguiendo hasta ahora y no haya habido problemas hasta ahora, pero pasaremos a la siguiente parte de esto. Ahora, obviamente, acabamos de crear una consulta que te permite consultar y recuperar todos los diferentes usuarios que tienes en tu fuente de datos. Lo que también podemos hacer es si queremos obtener solo un usuario. Así que vamos a hacer eso ahora. No tenemos que cambiar, no tenemos que crear ningún nuevo tipo porque vamos a estar trabajando en el tipo de usuario en este momento. Entonces vamos a ir solo por obtener usuario en este caso. Y dentro de esto, ahora, además voy a crear lo mismo aquí donde habrá un nuevo tipo. En este caso, como no es una lista, no es una matriz, solo estamos interesados en un usuario, donde en el usuario específico que voy a consultar según el ID de usuario que voy a proporcionar en la consulta y los argumentos. Entonces mi tipo solo será tipo de usuario. Le daré una descripción, que será solo obtener un usuario individual. Y luego pasamos a, bueno, en realidad antes de resolver, necesitamos un argumento. Entonces vamos a configurar el argumento aquí, que para nosotros será ID, y el ID será de tipo entero. Entonces esto será entero de GraphQL. Pero una vez más, no queremos que esto sea nulo. Entonces lo vamos a envolver. Y vamos a poner eso. Eso. Entonces eso lo hace importante. Y esos son todos los argumentos que necesito. Y ahora voy a mi Resolvedor. Dentro del Resolvedor, a diferencia de las veces anteriores, voy a tomar un par de argumentos para mi función resolvedora. Entonces voy a tomar el padre, y voy a tomar mi ourts. Y luego voy a mi definición de función. Creo que tengo algún error aquí. A-ha, ahí vamos. De acuerdo, lo que quiero aquí es simplemente devolver mi usuario específico basado en el ID que se proporciona. Así que simplemente voy a ir a mi data, que es mi matriz de usuarios. Usuarios punto encontrar. Y aquí, voy a tomar un solo usuario que va a entrar. Va a recorrer mi matriz de usuarios, tomar el primer objeto, y desde aquí, me devolverá el objeto único, que es nuestra entrada de matriz, que se va a asignar a mis argumentos. Entonces, espero que esto no sea demasiado difícil de entender aquí lo que está sucediendo. La función resolvedora va a tomar un padre y los argumentos como, bueno, los argumentos. Aquí, vamos a recorrer nuestros usuarios, fuente de datos o matriz de usuarios, y encontrar un usuario en particular que tenga el ID de usuario, que es el mismo que el ID de los argumentos que se está ingresando. Así que terminemos esto aquí. Ahora guardamos. Y creo que no hay problemas. Voy a volver a GraphiQL. Y si vuelvo a actualizar, verás que bajo consulta tengo una nueva entrada aquí, que es nuestro Obtener Usuario. Así que hagamos eso. Vamos a obtener usuario. Necesito poner un ID aquí como se me indica. Voy a ir con el ID número uno. Y aquí, una vez más, solo voy a consultar ID, nombre y correo electrónico.

Esto me da el primer usuario que existe en nuestra matriz de usuarios. También puedo solicitar mi segundo usuario, eso me dará a James. Así que tengo este mecanismo en particular. Ahora hay una forma para mí de consultar específicamente el usuario que quiero basado en el ID de usuario. Así que ahora también hemos hecho eso. Y bien hecho si has seguido y has llegado hasta este punto. Asombroso.

Sigamos adelante, pasemos al siguiente segmento de cosas donde vamos a ver las mutaciones. Hasta ahora, básicamente solo hemos estado solicitando información y estamos recibiendo información basada en la fuente de datos que teníamos. Ahora lo que vamos a hacer es agregar a esa fuente de datos. Vamos a usar una mutación. A diferencia de las consultas raíz, será una mutación, un tipo de mutación raíz que vamos a definir. Así que sigamos adelante y hagámoslo. Veo que Chad está apareciendo de repente. Michael, hola, bienvenido desde Edimburgo. Soleado Edimburgo, fantástico. Tal vez sea un poco envidiable en este momento porque creo que muchos de nosotros en este momento parecemos estar enfrentando un cielo gris. Pero espero que también encuentres esto emocionante e interesante. Fantástico, encantador.

De acuerdo, pasemos a la siguiente parte de esta demostración, bueno, taller. Sigamos adelante y creemos mutaciones. Así que empecemos. Vamos a seguir una estructura muy similar a lo que hemos hecho para nuestro tipo de consulta raíz. Así que vamos a seguir con const root, llamémoslo tipo de mutación, creo que tengo la ortografía correcta, sí. Tipo de mutación, va a ser otro nuevo tipo de objeto GraphQL y aquí, vamos a comenzar a encontrar todas estas cosas diferentes que hemos hecho, comenzando con el nombre y una descripción, llamémoslo, llamémoslo tipo raíz. Llamémoslo mutación, vamos con descripción aquí simplemente lo llamaré, simplemente seré consistente y diré, mutación, sí, tiene sentido, de acuerdo. De acuerdo, ahora sigamos adelante y comencemos a ver nuestros campos como puedes ver, eso es lo que hemos hecho. Así que ese es exactamente el patrón que vamos a seguir, aquí, vamos con campos, de acuerdo, así que en las mutaciones, solo piensa en esto por un momento, lo que estamos tratando de hacer aquí, es agregar un usuario, ¿de acuerdo? Entonces, para hacer eso, ahora, tenemos tres cosas dentro del usuario, si miras la estructura de datos, si fuera a agregar una nueva entrada, lo que quiero es agregar el nombre y el correo electrónico de este usuario en particular, lo que no necesito es el ID, quiero que el ID se genere automáticamente. Ahora, no voy a explicar la solución más inteligente, pero se busca el valor más alto y luego lo hace y todo eso, solo voy a mirar la longitud de mi matriz, solo voy a usar ese número aquí. Asignará automáticamente un número específico y ese es el propósito del punto, así que simplemente comencemos con eso, eso es lo que estamos tratando de hacer. Hay dos campos que queremos tener como argumento porque queremos ingresar el nombre y el correo electrónico cuando agregamos un nuevo usuario y tomará el nombre y el correo electrónico que has creado y creará este nuevo elemento de matriz o nuevo data en la fuente de datos. Así que sigamos adelante. Ahora, obviamente, como antes, también necesitamos describir un tipo. En este caso, cuando he creado mi usuario, quiero que se me muestre ese tipo de usuario, solo quiero que se me muestre de vuelta. También puedes tener una lista de usuarios, si quieres, así que también podemos ver eso si tenemos tiempo. No estoy seguro de por qué no está aquí. Bien, a continuación, queremos definir nuestros argumentos. Y como dijimos antes, vamos a tomar dos argumentos. Uno de ellos será el nombre. Esto será de tipo, no queremos que sea nulo, así que voy a comenzar con GraphQl, tipo, no nulo. Voy a envolver esto con GraphQl string. Así que será un tipo de cadena, que no quiero que sea nulo, que es lo que hemos hecho aquí y el siguiente campo será el correo electrónico. Solo voy a copiar esto porque esencialmente seguirá la misma estructura que esto. Ahí vamos. Estos serán los dos argumentos que necesitamos. Ahora, pasemos al evento principal que será nuestro resolvedor. Así que vamos a, esto definitivamente será un poco más complicado en términos de la función resolvedora que hemos escrito hasta ahora. Creo que he cometido un pequeño error en algún lugar, ¿verdad? Vamos a ir a este resolve, voy a tomar mi padre y los argumentos nuevamente. Esto ahora se parece un poco más a una función. Entonces, aquí, lo que quiero hacer es que tengo tres campos con los que necesito trabajar, dos de ellos ya se proporcionan. Así que simplemente voy a copiar eso primero y luego voy a crear un nuevo usuario. Este usuario va a tener, digamos, ¿puedo tener un ID que se tome de usuarios.luego más uno. Nuevamente, no es la forma más inteligente de hacerlo, pero espero que esto ilustre lo que estamos tratando de lograr aquí. Entonces, el nombre será nuestros argumentos, nombre, correo electrónico. Y luego tenemos que agregar esto a nuestra matriz que tenemos. Vamos a empujar eso en usuarios. Usuario. Usuario. Y finalmente, devolver usuario. Creo que eso debería ser todo. Otra cosa que debemos hacer, por supuesto, es si recuerdas cuando creamos nuestro esquema, solo nos ocupamos de las consultas. Ahora, también debemos ocuparnos de las mutaciones. Tenemos una mutación. Llámalo tipo de mutación raíz. Y con eso, deberíamos haber terminado. Veo todo en verde, lo cual es obviamente preferible. Y ahora voy a actualizar esto muy rápidamente. Y veo que tengo mutaciones aquí y la exploración de la documentación.

En la mutación, como puedes ver aquí, tenemos 'add user'. Vamos a escribir eso. En este caso, por supuesto, vamos a hablar de mutaciones. Así que tenemos que escribir 'mutation' aquí. Dentro de la mutación, tenemos 'add user'. Entonces, 'add user', vamos a tomar un nombre. Voy a llamarlo Emma, correo electrónico. emma@gmail.com tal vez. Y esto va a responder. Queremos ver el ID, nombre y correo electrónico también. Ahí vamos. Ahí lo tienes. Ahora hemos agregado nuestro tercer usuario y obviamente podemos volver atrás. Entonces hay otra cosa aquí arriba, si puedes verlo, hay historial. Así que puedo volver atrás. Y si quiero ver toda la información, toda mi fuente de datos en este momento, puedo obtener mis usuarios. Puedo ver que ahora tenemos tres elementos aquí en lugar de los dos que teníamos anteriormente. Así que esa es una mutación que cambia esencialmente cambia tu fuente de datos. Obviamente, en este caso, la fuente de datos no es persistente. Así que si reinicio mi servidor, perderé mis cambios y tendré que hacerlos de nuevo, pero también puedes tener fuentes de datos persistentes. Si estás usando SQL u otra base de datos, eso persistirá incluso cuando el servidor esté arriba o abajo. Con eso, llegamos a la conclusión de la parte de las mutaciones. Ahora pasemos a la siguiente parte. Pero como dije, hay otra cosa que puedes hacer, que es algo muy, muy sencillo. Como viste la mutación aquí, lo que hace es que solo me da, cuando estoy creando una nueva mutación, solo me dio un usuario. Puedo modificar rápidamente esto para que me dé la lista completa con los nuevos usuarios agregados también. Así que también puedo hacer eso. Eso nuevamente depende de tus requisitos. Así que creo que en el tipo, simplemente lo llamaré, creo, como recuerdas aquí, un 'getUser'. Era un nuevo 'GraphQLList'. Voy a obtener un 'GraphQLList'. Voy a envolver eso alrededor de mis tipos de usuario. Ahora estoy viendo una matriz de objetos de tipo usuario. Y en lugar de devolver usuario, simplemente voy a devolver usuarios. Veo verde de nuevo. Y espero que ahora, si creo uno nuevo, digamos que es Agnes. Y mi correo electrónico va a ser, AGNES.GMAIL.COM. Parece que estoy mencionando mucho Gmail. Creo que necesito actualizar esto, sin embargo. De acuerdo, ahora que lo he hecho, veo a mi Agnes aquí en el número tres. Si agrego a Emma, también tengo mi cuarto. Como puedes ver, no soy exactamente persistente en este momento porque necesito actualizar en este caso, pero funciona por el momento. Así se ilustra cómo funcionan las mutaciones. Así es como lo harías. Así es como resolvería una mutación. Ahora volvamos a nuestras consultas. Y hay otra cosa que queremos hacer porque estamos viendo información de tareas pendientes, ahora vamos a incluir información de tareas pendientes, una lista de tareas pendientes que estará asociada a nuestros usuarios. Así que hagámoslo. Recuerda que necesitamos describir, definir nuestra fuente de datos nuevamente. Nuevamente, lo estamos haciendo localmente, así que hagamos lo mismo que hicimos con los usuarios. Voy a llamarlo 'iConst to-dos'. Voy a agregar un par de ejemplos aquí. Digamos que vamos a estar, pensemos en la estructura que quiero. Quiero tener un ID. Esto es diferente del ID del usuario, por supuesto, este es el ID de las tareas pendientes. Así que le voy a dar el ID número uno. Quiero un ID de usuario que estará asociado a esto con un usuario en particular dependiendo del ID de usuario. Por lo tanto, el ID de usuario es bastante importante porque hay una relación aquí. Luego quiero tener una tarea asociada a esto que será de tipo cadena y la llamaré tal vez 'Reservar vuelos'. Lo hice recientemente después de mucho tiempo. Fue una experiencia muy interesante. Volar nunca había sido tan complicado o estresante como esta vez, pero bueno. De todos modos, Reservar vuelos es una de ellas. 'Completed' me dará el estado de ello, esencialmente si he completado esta tarea o no. Y esto puede ser de tipo booleano. Como estoy aquí ahora mismo, simplemente lo llamaré, bueno, verdadero porque he completado esta tarea. Ahora, agreguemos un par más. Voy a seguir adelante y agregar algunos más aquí. Copiar esto. Tal vez uno más. De acuerdo, vamos con el ID de usuario dos, lo siento, el ID de las tareas pendientes dos, el ID de usuario uno.

Creo que el primer usuario puede, que soy yo básicamente, reservar mis boletos y tengo que lavar mis platos, lo cual no he hecho. Por lo tanto, voy a poner eso como falso, y ahora para el tercero, que es nuestro ID de lista de tareas pendientes tres, esto es para el segundo usuario, que es James, y James quiere visitar los Jardines Botánicos tal vez. Esperemos que eso es lo que quiere hacer. Aún no lo ha hecho, así que voy a cambiar eso a falso. Eso es básicamente la descripción de nuestra fuente de datos en este momento, que son nuestras tareas pendientes.

La otra cosa que debe suceder aquí es que necesitamos agregar estas tareas pendientes ahora al tipo de usuario. Vamos a hacer eso. Así que en nuestros campos tenemos nuestro ID, tenemos nuestro nombre, tenemos nuestro correo electrónico. Lo que necesitamos hacer a continuación es agregar esto a... Entonces, ¿qué quiero para un usuario? Quiero tener tareas pendientes. Siento que me falta algo. Creo que necesito crear un usuario. Creo que primero necesito crear un tipo de tarea pendiente. Espera. Detenido, vamos a ver. Entonces, tenemos nuestro tipo de usuario, hagamos un tipo de tarea pendiente. Será un nuevo objeto de GraphQL. Tipo de objeto de nuevo. Va a seguir un patrón muy similar al que hemos hecho antes. Esto va a ser tareas pendientes. Acción, es un. Usuario. ¿De acuerdo? Y luego vamos a nuestros campos. Vamos a definir nuestros diferentes campos. Como viste aquí, tenemos alrededor de, tenemos cuatro campos aquí. Vamos a mantenerlo muy simple. Ya he preparado el código. Así que vamos a copiar eso aquí. Y luego vamos a ejecutar el código, vamos a ejecutar nuestro nuevo intervalo de palabras. Voy a seleccionar una nueva forma de ejecutar estas formas. Así que vamos a decir modificar mi usuario aquí, en algún lugar aquí. Y la forma en que lo hice, es que tomé la primera expresión, tomé el primer tipo, así que vamos a poner eso en una nueva variable aquí, y luego voy a hacer lo mismo para, digamos un nombre de clase. Sigo el mismo patrón. Ahora, lo siguiente que necesito es mi ID de usuario. Lo cual también va a seguir el mismo patrón, porque también quiero que la tarea pendiente esté asociada a un usuario en particular. Oh, lo siento, cometí un error. Y luego vamos a pasar a tarea y completado. Así que vamos a tarea. Y la tarea va a ser muy similar al campo de nombre que teníamos, que básicamente será una cadena de GraphQL. Finalmente, tenemos nuestro estado completado, que es, digamos, Hockey, alianza. De acuerdo, creo que con eso estamos listos, creo, creo que hemos cubierto todo.

De acuerdo, creo que eso está cubierto. Ahora necesitamos agregarlo a nuestro tipo de usuario. Ahora lo que quiero hacer es cuando estoy consultando un usuario, también quiero ver las tareas pendientes o la lista de tareas asociadas a ese usuario en particular. Quiero poder consultar ambas cosas juntas. Así que vamos a hacer eso. Entonces aquí, vamos a decir tareas pendientes, y luego en eso, vamos a agregar un par de cosas. Digamos que queremos agregar nuestro tipo, nuestro tipo va a ser una nueva lista de GraphQL, que es tipo. Voy a omitir la descripción para este caso. Vamos a ir directamente al resolvedor. Y nuestro resolvedor va a tomar un usuario. Y luego aquí, queremos devolver de nuestra matriz de tareas pendientes, filtraremos exactamente la lista de tareas pendientes o tareas basadas en el todo.userID que debería coincidir con mi ID de usuario, que es básicamente este objeto en particular. De acuerdo, con suerte con esto, creo que ese debería ser el último paso. Creo que si todo sale bien, veo verde de nuevo. Voy a verificar rápidamente mis usuarios y dónde están en este momento. Tengo dos porque reinicié de nuevo. Está bien. Podemos trabajar con esto. Puedo agregar un par de usuarios si quiero, pero está bien. Eso no es importante para esto. Voy a actualizar rápidamente esto para que puedas ver en consultas y en usuario, ahora verás que hay un campo de tareas pendientes asociado también. Así que ahora, hagamos esto. Tenemos nuestros obtener usuarios, tenemos ID y correo electrónico. Lo que voy a hacer es, voy a obtener mis tareas pendientes junto con esto. Como recordarás, TODO tiene un ID, tiene un ID de usuario, tiene un campo de tareas y tiene un campo de estado completado. Así que si todo sale bien, tenemos nuestra información lista aquí. Obviamente podemos hacer exactamente lo mismo que hemos hecho anteriormente, donde podemos cambiar esto para obtener solo un usuario. Puedo proporcionar esto con un ID uno, y devolveré solo este en particular. Así que eso es básicamente cómo crearías una API de GraphQL con consultas, con mutaciones, creando tu propio tipo de datos con usuario, creando tu propio tipo de datos con tus tareas pendientes, y combinando esas cosas juntas. Así que eso te da una idea de lo que esperábamos. Así que esto nos lleva al final de la primera mitad de la masterclass donde vamos a crear nuestro punto de acceso.

Hay un par de cosas que quiero mostrarte. Un par de cosas con las que también podrías encontrarte, y eso es, ¿qué pasa si tienes un usuario aquí? Ahora, en esta demostración en particular tenemos alrededor de dos usuarios en nuestra database. ¿Qué pasa si quiero consultar cada uno de ellos pero de forma separada? Si quiero hacer esto, básicamente, digamos que quiero obtener el usuario uno y dos, pero quiero que se haga de forma separada. Estaré solicitando la misma información. Creo que tengo algo mal aquí. Aha, creo que entendí esto. Ahí lo tienes. Eso debería ser todo. Ahora, si intentara ejecutar esto, creo que me dará un error porque está en conflicto con otro campo. Por lo tanto, no puedes hacer la misma consulta dos veces dentro de la misma sección de consulta, básicamente. No puedes consultar lo mismo. Pero hay una solución para esto. Lo que puedo hacer es utilizar alias. Los alias resuelven esencialmente este dilema en particular, por así decirlo. Y puedo darle a esta consulta en particular un nombre. Los alias describen o asignan un nombre a una consulta en particular que deseas. Entonces, en este caso, he hecho eso con el usuario uno, llamo a este usuario dos. Ahora me dará esta información para estos dos usuarios de forma individual, bien envuelta con usuario uno y usuario dos. Así que puedes ver la información del usuario uno, información del usuario dos.

Ahora, otra cosa que habrás notado aquí es que tuve que repetir este conjunto de campos en ambas ocasiones. Es posible que tengas que hacer eso cuando estás escribiendo varias consultas diferentes, es posible que tengas que tener el mismo tipo de campos que se consultan varias veces. Obviamente, eso puede volverse un poco engorroso. Eso puede ser un desafío. Entonces, para evitar eso, lo que puedes hacer es crear código reutilizable y eso es lo que se llama un fragmento. Básicamente, son segmentos o campos que se utilizan de manera repetida. Puedes definir eso y simplemente usar ese fragmento en particular cuando necesites esa información. Entonces, vamos a definir un fragmento aquí. La forma de hacerlo es comenzar con fragmento, darle un nombre al fragmento, lo llamaré infoUsuario y crear un fragmento en un tipo de usuario específico. Entonces, en nuestro caso, este usuario es del tipo usuario. Si miras aquí en nuestra documentación, getUsuarios devuelve una matriz de usuarios. Entonces, vamos a crear esto en usuario. Y dentro de esto, simplemente voy a copiar todos estos campos diferentes. También puedes tener un subconjunto de esto si quieres, solo voy a copiar todos estos campos diferentes. Voy a crear un fragmento de esto. La indentación no es perfecta, pero está bien. No importa. Ahora se ha creado un fragmento. Entonces, en lugar de escribir todo esto, puedo usar mi operador de propagación, digamos infoUsuario. Puedo hacer exactamente lo mismo aquí. Ups, me faltó un paréntesis, pero lo arreglaré. Ahora obtengo la misma información. Obviamente, puedo poner un subconjunto de esto si mi información de usuario no necesita contener el id o los todos, también puedo eliminar eso. Y ahora mi fragmento automáticamente solo devolverá esta información. Ahí lo tienes, eso es todo. Solo un par de cosas adicionales para que tengas en cuenta en caso de que te encuentres con esto, en caso de que este sea un desafío que estés enfrentando. Así que tienes la capacidad de tener alias para definir consultas específicas o asignar un nombre a consultas particulares, así como fragmentos que te permiten crear segmentos de consulta reutilizables que se pueden utilizar en diferentes consultas múltiples.

En el siguiente segmento, lo que vamos a hacer es crear o utilizar Tyke Cloud. Hablaré sobre qué es Tyke y qué vamos a hacer después del descanso, pero como lleva aproximadamente cinco minutos para que se realice toda la configuración, sería beneficioso si lo configuramos ahora. Así que hagámoslo.

Voy a cerrar sesión en mi cuenta actual de Tyke Cloud. Voy a crear una cuenta de Tyke Cloud contigo. De acuerdo, sígueme. Una forma de hacerlo es ir a tyke.io. La otra forma de hacerlo es simplemente ir account.cloud-ada.tyke.io. Haz eso. Ahora aquí, tienes la opción de registrarte. Voy a hacer clic en registrarme aquí. Me muestra un formulario que debo completar. Voy a poner Buddha, voy a elegir uno nuevo. Digamos galaxy2001.tyke.io. Y voy a poner una contraseña. Probablemente querría que esto se genere automáticamente si es posible porque la fortaleza de las contraseñas puede ser un poco desafiante para mí. Ahí tienes. Creo que sugiere una contraseña. Voy a tomar eso. Creo que elige una contraseña segura si no quieres usar esta. Pero sí, idealmente elige una contraseña fuerte y segura es definitivamente lo que recomendamos. Hemos hecho los arreglos para eso. Un formulario bastante sencillo. Vamos a completarlo. Tendré que demostrar que soy humano, espero no fallar en esto. Creo que eso es correcto. De acuerdo, he verificado. Voy a crear mi cuenta. De acuerdo, ahora que está hecho, el siguiente paso es configurar una organización. Hay una jerarquía aquí en términos de Tyke Cloud. Una vez que hayas creado tu cuenta, debes configurar una organización. Es una organización que luego se configura en una región específica.

Alex preguntó, ¿vas a subir el código a algún repositorio? Lo haré después de esto. Por el momento, lo que voy a hacer es si quieres acceder al punto de acceso en sí, vamos a usar ngrok para exponerlo por ahora. Pero sí, subiré el código a un repositorio para que lo uses. Y creo que los organizadores de GraphQL Galaxy podrán responder a eso, el enlace. Muchas gracias por la pregunta, Alex.

De acuerdo, volviendo a la configuración. En esta organización simplemente la llamaré Galaxy Demo Org. Y necesito seleccionar una región. La forma en que funciona, hay una región donde estás, que, esta es una región que debes elegir para tu plano de control. No voy a entrar en detalles de eso específicamente en este momento, pero básicamente solo debes saber que tu organización debe configurarse en una ubicación específica. Hay mucha flexibilidad que viene con Tyke Cloud. Y esto es lo que te ayuda con eso. Entiendo los riesgos aquí. Voy a crear mi organización. Y tienes dos opciones aquí. Una es configurarlo manualmente. La otra es que hay una configuración de demostración que completará parte de la información por ti. Muy bien, continuemos. Tenemos nuestra última parte que viene, que va a ser bastante emocionante. Verás cosas interesantes sucediendo. Voy a ir un poco más rápido porque creo que queremos tener suficiente tiempo para preguntas y respuestas también. Así que espero que hayas podido registrarte, perdón, crear una cuenta de Tye Cloud. Creo que la URL está ahora en el cuadro de chat. Creo que si haces clic en ella, deberías poder hacerlo. Siéntete libre de crearla. Y lo que necesitamos hacer a continuación, creo que volveré a Tye Cloud momentáneamente, pero antes de eso, volvamos rápidamente a nuestras diapositivas. Y comencemos con lo que vamos a hacer a continuación aquí en la parte, básicamente, que es la parte final de hoy. Vamos a ver la administración de API para GraphQL. Ahora, como has visto hasta ahora, hemos creado una API de GraphQL. Hemos creado un punto de acceso de GraphQL. Sin embargo, nuestro trabajo no ha terminado. Debemos asegurarnos de que el punto de acceso que hemos creado sea seguro, sea seguro. Sea fácil de consumir, esté administrado, y todo eso debe ser manejado. Y todo eso es básicamente el propósito de Tyke. Así que estamos básicamente en el espacio de administración de API, y tenemos beneficios específicos. Y creo que estoy subestimando esto un poco, pero efectivamente, tenemos la Administración de API de GraphQL bastante en punto en este momento, y vamos a ayudarte a resolver todos los diferentes desafíos a los que te enfrentarás cuando se trata de administrar tu punto de acceso GraphQL. Porque ahora lo hemos construido, es fantástico. Sin embargo, cuando las personas lo consuman, debes asegurarte de que sea seguro, no solo a nivel de URL.

Debes asegurarte una vez más, que también sea seguro a nivel de data, lo cual demostraré en breve cuáles pueden ser los desafíos con esto. El segundo es, nuevamente, la pregunta que hicimos es, en términos de infraestructura, ¿cómo te mueves a GraphQL? ¿Cómo combinas las cosas fácilmente? Esa es una pregunta que resolveremos más adelante tal vez hacia el final de la sesión, pero ese es uno de los desafíos que hemos abordado y resuelto también de una manera sin código. Muy, muy importante. Entonces, básicamente, esto es lo que hacemos. Tenemos tres cosas que vamos a demostrar aquí, limitación de profundidad de consulta, permisos basados en campos, y limitación de velocidad.

Pasemos a la siguiente parte. ¿Por qué deberías usar Tyche para la administración de API de GraphQL? Bueno, somos seguros, proporcionamos seguridad, básicamente mantienes tu código de servicio lo más simple posible. No tienes que incorporar tu código de seguridad. No escribirás el código que es necesario para los límites de profundidad de consulta o tu autenticación. Hemos creado una capa de API abstracta que te ayudará a gestionar mejor tu código, te ayudará a asegurar mejor tu código, te ayudará a escalar tu código mucho mejor. Eso es lo que hemos hecho con nuestro nivel de API.

Ahora, la curva de aprendizaje en este caso es muy, muy mínima. Hemos hecho las cosas lo más simples posible, lo más intuitivas posible para que puedas comenzar y administrar tus API, y verás eso en acción muy, muy pronto. Finalmente, cuando hablamos de administración de API, no se trata solo de seguridad. También hablamos de monitoreo, análisis y soporte. Así que hay todo un ecosistema, todo el ciclo de vida de una API. Nos hemos encargado de eso por ti. Construyes tu API, construyes tus servicios y déjanos encargarnos de la administración de tu API para que puedas exponerla y ponerla a disposición de aquellos que deseen consumir una aplicación de manera segura, confiable y escalable. Eso es lo que ofrecemos. Eso es lo que verás en este segmento de nuestra masterclass. Como dije, vamos a hacer tres cosas. Sigamos adelante. Vamos a usar Tycloud, como acabas de ver. Entonces, Tycloud es nuestra, bueno, nuestro componente Tyc, nuestra plataforma de administración de API de Tyc en la cloud. Esencialmente, es una versión SaaS de eso. Está completamente gestionado por nosotros. Tiene una interfaz de usuario elegante que ya está incluida y tiene todas las funciones disponibles si te registras. Es una prueba gratuita, tiene todas las funciones que desearías sin costo adicional disponible para que las pruebes. Así que pruébalo, si te gusta, entonces puedes continuar. Entonces, eso es lo que hacemos.

Hay un par de otros componentes cuando se trata de Tycloud, también. Ya viste la organización que necesitas configurar, y básicamente lo que abarca toda tu configuración de Tyc se basa en esta configuración organizativa en este momento, especialmente por ahora es una configuración de organización única, puedes tener múltiples organizaciones, pero no vamos a tocar todo eso en este momento, no quiero complicar las cosas demasiado. Y dentro de Tyc, nuevamente, cuando piensas en administración de API, también piensas en escalabilidad. También estás buscando estabilidad. Y cuando tienes que hacer eso, cuando estás escalando en diferentes regiones, es posible que estés escalando en diferentes centros de datos, es posible que debas asegurarte de que tus llamadas a la API se realicen, o la solicitud y respuesta se realicen con la menor latencia posible. Y eso solo es posible con la arquitectura que tenemos, que tienes gateways que están ubicados localmente cerca de la región a la que te estás expandiendo, cerca de la región donde se encuentran tus usuarios y manejan toda la computación, todo el procesamiento a nivel local para que tengamos una latencia reducida para ti, pero al mismo tiempo, lo que no quieres hacer es tener que administrar gateways individuales en todo el tablero. Entonces, si esencialmente estás escalando o disponible en 10 ubicaciones diferentes, no tienes que administrar 10 gateways diferentes individualmente. Entonces, lo que hemos hecho es crear un plano de control, que es una capa de administración que te ha permitido administrar todos los diferentes gateways a través de una plataforma central. Eso es lo que hemos hecho por ti con Ticloud, y también verás eso en acción. Eso es lo que hemos hecho. Además, si tienes restricciones locales, regulaciones locales, entonces puedes configurar estos gateways locales en regiones específicas, que pueden cumplir con esas reglas y estándares, y aún estar disponibles y disponibles para su administración a través de un plano de control. Entonces, en general, eso es, lo siento, en resumen, lo que es Ticloud, eso es lo que hemos hecho. Si estás buscando una versión local de este Ticloud, también lo tenemos disponible en nuestro sitio web, que puedes descargar e instalar en tu data local, una variedad de formas diferentes en las que puedes instalar TIC en tu sistema o Docker, o en tu propia cloud gestionada, puedes hacer todas esas cosas. Tenemos una amplia gama de ofertas diferentes a las que puedes acceder. Pero hoy, vamos a hablar de Ticloud y lo veremos en acción.

De acuerdo, sigamos adelante. Bien. Hagamos esto. Ya hemos comenzado este proceso de crear una cuenta y configurar un gateway e ir al panel de control, que es el siguiente paso que haremos. Así que empecemos. Voy a dejar de compartir rápidamente, para poder volver a mis pantallas web. Y una vez más, si tienen algún problema, alguna dificultad, no duden en enviar sus preguntas en cualquier momento. De acuerdo, necesito mi elemento. Necesito mi Safari y necesito, creo que también necesitaré mi Visual Studios, pero lo tendré, y también tendré Postman. Solo para probarlo. De acuerdo. Bien. Correcto. Entonces, el siguiente paso, una vez que hayas hecho tu instalación, vamos a nuestro Safari. Aquí vamos a nuestro navegador. Si ya has configurado esto, verás algunas cosas aquí. Entonces, este es el plano de control. Esta es la forma central de control de todos tus diferentes gateways con los que vas a trabajar ahora mismo. Tengo un plano de control. Solo tengo un gateway de borde que he creado. Puedo crear otros gateways de borde, pero nuevamente, estoy manteniendo las cosas simples. Un plano de control, un gateway, nada detrás de ti. Aquí tenemos un portal para desarrolladores que puedes usar para publicar esencialmente la API. También tienes el panel de control del Administrador de API, y aquí es donde iremos a continuación. Así que esperaré a que se abra.

Aquí vamos. Este es mi plano de control que ahora está listo y disponible. Puedo elegir diseñar una nueva API o importar una. Si ves, hay un par de cosas que puedes hacer aquí. Para mí, lo que me interesa es, quiero diseñar una nueva API, pero llegaremos allí en breve. Entonces, antes de eso, veamos si podemos hacer esto disponible. La API que hemos estado usando hasta ahora, está en el puerto local 4001. Veamos si podemos hacerlo disponible rápidamente. Para hacer eso, lo que necesitamos es Ngrok, y para eso necesitamos algo llamado Homebrew. He enviado el enlace en nuestro chat para la instalación de Homebrew en caso de que no lo tengas. Si simplemente vamos a brew.sh, tiene el script que es necesario para que hagas la instalación. Este es esencialmente el script que simplemente quieres copiar y pegar, y hará el resto por ti. Toma apenas un minuto o incluso menos, dependiendo de la velocidad de tu sistema y la conexión a internet, pero es un proceso muy rápido. Si no lo has hecho, siéntete libre de hacerlo. Brew.sh, lo necesitarás para instalar Ngrok, que vamos a hacer a continuación. Así que con eso, pasemos a instalar Ngrok. Ya lo he hecho, pero para que lo verifiques, simplemente escribe brew install Ngrok. Eso es todo lo que necesitas hacer. Para mí, ya lo he instalado, así que creo que no va a hacer mucho por mí. Pero si no lo has hecho, entonces este será el comando para hacerlo, brew install Ngrok. También lo pondré en el chat, para que puedas copiarlo y pegarlo si quieres. Brew espacio install Ngrok. Así que si solo quieres usar eso.

Bien, ahora que eso está hecho, lo que queremos hacer es, ahora vamos a ejecutar el servidor de Ngrok. La forma en que funciona es, veo un chat. ¿Dónde está el repositorio para esto? ¿Alguien puede compartirme un enlace? Samuel, ¿de qué repositorio estás hablando? ¿Del código en el que hemos estado trabajando o del código de brew o de Ngrok? ¿De qué repositorio estás hablando? ¿Del código en el que estás trabajando? No está en un repositorio activo en este momento, pero lo subiré a un repositorio y lo pondré a tu disposición. Así que no te preocupes por eso. Y creo que esto también se grabará, así que deberías poder seguirlo también.

De acuerdo, genial. Con eso, pasemos a Ngrok. La sintaxis aquí es, comenzamos con Ngrok, HTTP y el número de puerto. Hemos estado trabajando con el puerto 4001. Si estás trabajando en algo diferente, siéntete libre de hacerlo aquí. Voy a presionar enter. Si miras aquí, se ha creado un túnel, que ahora puedo usar, todo mapeado a mi localhost 4001. Hay una versión HTTP y una versión HTTPS. Voy a copiar esto. Y voy a ir a mi navegador, Safari. Y esta es la URL, por supuesto, esto no es suficiente. Necesito agregar mi GraphQL. Con eso, ahora está disponible públicamente. Bueno, digo públicamente, pero sí, está disponible, mi instalación local para que la consumas aquí. Por supuesto, no recomendaría esto para un uso continuo. Es solo para esta demostración. Esto no es una conversación de producción en este momento. Hay formas más seguras de hacer esto, incluso con NGROK, porque tenemos una cuenta de usuario, podemos agregar mecanismos de autenticación encima de esto. Pero no todos tendrán acceso a esto. Pero por ahora voy a mantener las cosas un poco abiertas. Así que ese es básicamente el propósito de esto, demostrar sin entrar en detalles de NGROK. Así que sigamos adelante, pasemos a el tipo en este momento. Espero que puedas ver el panel de control, lo que vamos a hacer ahora es, voy a montar mi API de GraphQL que acabamos de crear. La llamaremos user todo. Y voy a redirigir la URL que acabamos de tener. Y voy a llevarla hasta el punto de la cosa de GraphQL, también quiero hacer eso. Ahora voy a configurar mi API. Aquí puedes ver algunas cosas, hay algunas opciones diferentes aquí. Lo primero que voy a hacer es ir hasta el final de esto, donde dice autenticación. Y solo para este paso en particular, voy a eliminar mi mecanismo de autenticación y hacerlo sin clave. Y voy a guardar esto y salir. Aquí puedes ver algunas cosas. Lo primero que notarás aquí es que hay un esquema. Así que ha recuperado automáticamente el esquema en el que estamos trabajando. Es posible que aún no hayas visto esto, pero este esencialmente es el esquema que se generó a partir del código que acabamos de escribir. La API de GraphQL que hemos creado se ve esencialmente así. Este es un esquema que describe el diseño de lo que hemos creado. Esto se genera automáticamente. Ahora, lo otro es Playground. Esto es básicamente una forma de interactuar con él, pero no lo vamos a usar por ahora. Lo que debo hacer como un paso adicional en la cloud es que como hay una puerta de enlace de borde, múltiples puertas de enlace de borde, quiero que mi procesamiento se realice a nivel de la puerta de enlace de borde. Para hacer eso, voy a ir hasta aquí abajo donde dice segment tags o segmentación de nodos. Voy a agregar una etiqueta. Esta etiqueta es algo que verás aquí bajo esta etiqueta de borde o la ubicación, hay dos etiquetas diferentes que puedo usar, o ambas. Voy a usar solo la etiqueta de borde. Lo que esto hará es montar mi puerta de enlace de borde y adjuntarla a mi plano de control y usar esta API que luego se procesará a través de mi puerta de enlace de borde. Así que ahora he agregado mi etiqueta. Voy a actualizar esto. Otra cosa que podemos hacer aquí es que viene con un playground preconstruido. Voy a usar eso, pero antes de eso, probemos nuestro punto final. En Tyk cloud, viste aquí que tenemos un ingreso para la puerta de enlace de borde, es básicamente una URL. Y voy a copiar esto, abrir un nuevo. Vale, sé qué estaba mal aquí. Creo que necesito agregar mi usuario, el punto final, que para nosotros era user todo. Así que solo necesito agregar eso. Entonces creo que, bien, la solicitud que proporciono está vacía. Está bien, eso es justo. Creo que eso es lo que se esperaba en este momento. Así que lo que voy a hacer es que mi solicitud está pasando, pero necesito tener un playground, así que voy a preparar el playground. Así que volvamos aquí y voy a habilitar mi playground. Actualizar. Y voy a hacer clic en actualizar. Ahora, sí, esto. Lo que debería ver es que ahora tengo un playground disponible para interactuar con mi esquema de GraphQL. Ahora, obviamente podrías pensar, he reemplazado una URL por otra, entonces ¿cuál es la gran diferencia y qué es lo importante aquí? Pero lo que está sucediendo ahora es que la URL, la API de GraphQL ahora se enruta a través de mi puerta de enlace de etiquetas, lo que significa que ahora puedo comenzar a agregar mis capacidades de gestión de API en la parte superior de esta API, que hemos creado, lo veremos en un momento. Hagamos una verificación rápida del playground. Y puedes ver aquí, puedes ver todo nuestro esquema, disponible de manera ordenada para nosotros. También podemos descargar esto si queremos y usarlo en otro lugar. La documentación también está disponible, muy similar a lo que habíamos visto anteriormente, tal vez un poco mejor. Así que probemos la primera consulta.

Voy a usar la primera consulta que habíamos escrito, que era simplemente el saludo y obtener nuestro hola mundo solo para asegurarnos de que estamos haciendo las cosas correctamente. Parece que hay un poco de desafío aquí. Ahí vamos, bien, perfecto. Bueno, no puede haber una masterclass técnica o una demostración sin que algo salga mal. Pero bueno, hasta ahora lo hemos logrado. Entonces, básicamente esto se está enrutando a través de nuestra puerta de enlace de borde. Ahora, volvamos a las cosas más divertidas que vamos a hacer. Tal vez veamos a continuación, habilitar nuestros tokens de autenticación. Agreguemos una capa de seguridad. Esta es una API abierta en este momento, agreguemos una capa de seguridad encima de ella. Voy a cambiar mi modo de autenticación a token de autenticación, para empezar. Ahora, para hacer esto, necesito generar una clave específica para el acceso. Porque si volviera a mi playground ahora, me diría que falta el campo de autorización. Por el momento, no estoy autorizado para hacer esta solicitud en este momento. Así que hagamos que eso sea posible. Este es un proceso de dos pasos. Ahora, puedes hacerlo en uno solo. Ahora, lo que puedes hacer es simplemente seguir adelante y crear una clave para esta API en particular, y eso sería todo. Sin embargo, el desafío viene cuando estás tratando con una gran cantidad de puntos finales de API. Gestionar claves para cada uno de esos puntos finales, e imagina si tienes 100 o tal vez 1,000 de ellos, entonces tendrías que organizar y gestionar claves, lo cual puede ser muy, muy engorroso. Entonces, lo que hemos hecho es crear el concepto de políticas. Ahora, las políticas básicamente definen las reglas de interacción entre la clave y las APIs, y cómo esas APIs se hacen disponibles y qué reglas se deben aplicar a eso. Entonces, en este caso, por ejemplo, es que se usará un token de autenticación para obtener acceso. Necesita un token de autenticación. Así que hagámoslo. Vamos a ir a las políticas ahora. Así que en las políticas, voy a agregar una nueva política. Ya puedo ver que hay una API y puedo agregar más a medida que avanza el tiempo o puedo eliminar las que no quiero. Voy a seleccionar esta. Por ahora, estoy satisfecho con todo esto. Entraremos en los detalles en breve. En la configuración, necesito darle un nombre. Voy a llamarlo userToDoPolicy. Y aquí, voy a darle una expiración de una hora. Creo que eso es probablemente todo lo que necesitamos, tal vez un poco más largo. Veamos, tal vez un poco más largo. Bien, crear política, y he terminado. Bien, mi política ahora se ha creado. El paso número dos es ahora crear una clave basada en esta política. Ahora, esta política básicamente es, la clave que vamos a crear heredará cualquier regla que hayamos establecido a nivel de política, que veremos en el próximo paso, pero por ahora, voy a crear rápidamente una clave. Aquí está, tengo mi clave aquí. Ahora, volvamos a nuestro playground y todavía falta el campo de autorización. Voy a subir y agregar en mi encabezado. Aquí estará la autorización, y espero que escriba bien la ortografía, y voy a pegar mi clave aquí mismo. Entonces, creo que con todo, creo que he cerrado mi corchete, espero. Sí, lo he hecho, bien, todo va bien. Debería obtener de vuelta mi hola mundo. Genial, hagamos una consulta un poco más complicada solo para asegurarnos de que lo estamos haciendo bien. Así que digamos que queremos obtener usuarios. Quiero mi ID, quiero mi nombre, mi correo electrónico, quiero mis herramientas. Solo necesito la tarea y necesito los pasos. Bien, ahí lo tienes. Bien, todo bien, todo bien. Ahora lo hemos asegurado, ahora hemos hecho posible que solo las personas con, o los llamantes o consumidores con este token de autenticación. son los únicos que realmente pueden acceder a este punto final. Ahora, hagamos otra cosa, pasemos a, como puedes ver, hay un par de cosas que están sucediendo aquí. Ahora podrías, ves aquí que hay una consulta anidada que esencialmente está sucediendo, hay un campo anidado que son todos. Y no parece mucho porque solo vamos de usuario a todos, pero si tomáramos otro ejemplo, y tal vez pueda mostrarte eso, podrías ir mucho más profundo que esto. Entonces, si, si tomo un ejemplo aquí, digamos como ejemplo llamado Trevor Blades, recuerda, Trevor Blades, API de países, naturalmente lo obtendré. Ahí vamos, ese es el resultado. Entonces, dentro de aquí, solo para demostrar el desafío que podría surgir, tienes países, tienes continentes, y los continentes tienen países. Así que veamos si puedes detectar el problema. Tienes un país, puedo darle un código. Así que tal vez lo llame US. No sé si necesito un corchete allí, pero bueno. Bien, ahora mi país, puede tener un nombre. Tal vez sea, va a tener idiomas, bien, idiomas demasiado, en mayúscula. Tal vez tenga una bandera, que es un emoji, aparentemente. Tal vez tenga, tal vez tenga un continente. Pertenece a un continente en particular. Entonces, y ese continente también tendrá un nombre.

Vale, creo que puedo entender esto. Bien, creo que el IDE está equivocado. Bien, ahí vamos. Así que tenemos aquí a Estados Unidos, con el emoji, con la capital, con el continente y el nombre. Ahora, si piensas lógicamente, los continentes también pueden tener países. Así que lo que puedo hacer es ir a países y hacer la misma consulta de nuevo, puedo ir con el nombre, puedo ir con la capital, y puedo ir de nuevo, cada uno de esos países también tendrá continentes. Así que puedo ir de nuevo con esto, y así sucesivamente, puedo ir de nuevo con países aquí.

Como puedes ver, si ahora dejo que se ejecute, hay mucha más información que está llegando, hay mucha más información que debe procesarse. Ahora, en este momento no es tan problemático porque solo estás yendo unos pocos niveles de profundidad, pero puedes seguir haciendo eso y ver el problema allí. En algunos casos, esto puede ser necesario, pero en otros casos puede ser un ataque malicioso. Entonces, si quieres evitar que algo así suceda si volvemos atrás, lo que debemos analizar es la profundidad de consulta de esta consulta en particular, o la profundidad de esta consulta. La forma de verlo es, bueno, para mí, es esencialmente el número de nodos con los que estás trabajando. Entonces, en este caso, tienes uno, dos, tres nodos diferentes con los que estás trabajando. Hay tres. Esto está a una profundidad de tres. Esta es una consulta a una profundidad de tres. Entonces, si quisiera evitar una tercera consulta, y solo quiero que vayas hasta mis usuarios obtenidos y no a este siguiente nivel, así es como lo haría.

Volvamos. Vamos a volver a mis políticas. Recuerda, las políticas van a definir las reglas de interacción. Así que todas estas actualizaciones relacionadas con la seguridad van a ocurrir a nivel de política. Voy a ir a mis límites globales. Y aquí puedes ver que hay una profundidad de consulta. Ahora mismo es ilimitada. Así que puedo ir tan profundo como quiera hasta que tal vez mi servidor se bloquee. Pero aquí voy a manejar esto. Así que ahora mismo está en tres. Pero recuerda que voy a seleccionarlo para ver qué sucede allí. Bien, eso se ha actualizado. Volvamos. Y lo que debería hacer es darme un error de límite de profundidad excedido. Ahora voy a deshacerme de esto rápidamente. Y ahora debería recibir mi respuesta de vuelta porque ahora está restringido solo a este nivel de información. No más profundo. Entonces, este es uno de esos mecanismos de seguridad que hemos introducido. Como viste, no tienes que escribir tus propios protocolos de seguridad. Para hacer esto, esencialmente estás haciendo eso a través de la interfaz misma con un mínimo de problemas, con suerte. Entonces, a continuación, más allá de la profundidad de consulta. Voy a deshacerme de esto por ahora. Solo dejarlo ilimitado de nuevo. Lo siguiente que quiero mostrar es, esencialmente, lo que llamarías permisos basados en campos. Ahora imagina que esta API en particular, vamos a traer de vuelta nuestras tareas pendientes también. Ahora, esta API en particular tiene un, lo siento, no lo he actualizado. Esta API en particular tiene todos estos campos diferentes expuestos ahora tal vez en ciertos casos de uso puedas querer que esto esté expuesto, pero en otros casos, tal vez no desees que lo esté. Tal vez no quieras exponer el campo de ID de correo electrónico para todo tipo de usuarios porque abre la puerta a posibles ataques, posibles correos no deseados. No quieres que eso suceda. ¿Cómo lo harías? Así que volvamos.

Ahora esto está sucediendo a nivel de API. Así que voy a ir a mi nivel de acceso a la API bajo usuario a hacer, y aquí puedo ver que hay algo llamado permisos basados en campos. Eso es con lo que voy a trabajar. Así que si miras aquí, tienes todos los diferentes tipos que están disponibles, lo que necesito hacer es marcar los que no quiero ahora. Quería deshacerme del correo electrónico. Así que no quiero que el correo electrónico sea accesible. Así que simplemente lo marcaré y actualizaré esto. Y lo que debería hacer ahora, es decirme que mi campo de correo electrónico está restringido. Me impide acceder a esa información porque bueno, no estoy autorizado para hacerlo. Ahora, bajo una política diferente, puedes tener acceso para hacerlo porque estás autenticado de una manera diferente, pero para esta autenticación en particular, este token de autenticación, si estás accediendo a esta API basado en eso, entonces necesitas, bueno, no tienes acceso al correo electrónico. Así que ahora que lo he eliminado, debería recibir mi respuesta de inmediato. Entonces, ese es un segundo mecanismo de seguridad que hemos implementado específicamente para las APIs de GraphQL, donde puedes restringir a las personas en permisos basados en campos. Obviamente, puedes ir aún más lejos, dependiendo de la forma de la información, dependiendo de la forma de acceso tal vez, tal vez haya un grado de monetización también allí, tal vez en ese caso donde, ya sabes, quieres que los usuarios pagados accedan solo a información específica, eso también podría ser otra cosa. Pero el mecanismo está disponible para que lo utilices realmente. Así que tienes eso. Creo que llevamos, bueno, ya llevamos dos horas. Creo que, según lo que sé, creo que quedan unos 30 minutos para esto. Así que voy a seguir adelante. Creo que estas son las dos características principales que quería mostrar en este momento. Si el tiempo lo permite, podríamos ver un par más si es necesario. Pero por ahora, creo que transmiten específicamente en torno a GraphQL, lo que tenemos implementado. Ahora, lo otro que también tenemos es la limitación de velocidad. Creo que tal vez también lo revisaré.

En este momento no necesito mutaciones. Simplemente voy a omitir eso. Voy a crear un nuevo tipo. Esta es más o menos la segunda versión, la forma en que puedes construir tus APIs de GraphQL también. Así que hagámoslo con tipos esta vez. Lo voy a llamar UserType. Y si recuerdas, UserType tenía un ID, de tipo int y esto no puede ser nulo. Esto es importante. Esto debe estar presente. Y eso se indica con este signo de exclamación. Luego pasamos al nombre. Será una cadena. Y también tendremos un correo electrónico, que también será una cadena.

Ahora, en la consulta, si recuerdas, teníamos obtener usuarios, así que voy a hacer eso primero. Y eso tendría una lista de usuarios. ¿De acuerdo? Ahora déjame alejarme.

A continuación, vamos a describir nuestra fuente de datos. Como puedes ver, tengo mis fuentes de datos aquí. Lo que necesito hacer es este campo en particular, este obtener usuarios, debe estar enlazado a mi API REST. ¿Cómo hacemos eso? Haz clic aquí, define la fuente de datos. Voy a elegir REST, y esta es la URL que necesitamos, así que vamos a verificar nuestra URL. Dice, slash usuarios. Voy a retroceder. Ahí tienes, ese es mi slash usuarios. La fuente de datos necesita un nombre. Solo lo llamaré usuarios. El método es obtener, y voy a hacer clic en actualizar campo y fuente de datos. Y de inmediato puedes ver que el campo ha sido actualizado, ya no hay una advertencia ni un signo de exclamación. Todo está bien, con suerte, haciendo clic en actualizar. Voy a hacer clic en actualizar aquí ahora. Y recuerda, una cosa más que debe suceder aquí es en nuestras opciones avanzadas, necesitamos configurar correctamente la segmentación de nodos, porque hemos creado una nueva API, que queremos que se procese en el borde también. Usando esa puerta de enlace, así que voy a actualizar esto una vez más. Vamos a habilitar un nuevo playground.

Y ahora, si vuelvo aquí a este playground en particular con el que hemos estado trabajando, también puedo copiar esto. Porque la puerta de enlace del borde sigue siendo la misma, solo cambia la URL. Así que voy a tomar mi punto final de URL de aquí arriba, mira este usuario, udguser2d, eso es lo que quiero aquí. Eso será suficiente. Debería abrir un nuevo playground para mí. Ahora, si miro el esquema, tiene mi usuario, tiene mi consulta. Entonces, lo que deberíamos poder hacer ahora es obtener usuarios. ID, nombre y correo electrónico. Si todo está bien, consultará mi información. Así que si ves a Leanne Graham, Irvin Hall, estos son todos los nombres del punto final REST que acabamos de ver. Entonces hemos transformado efectivamente nuestro punto final REST en un front-end GraphQL sin código, en, bueno, aproximadamente cinco minutos, básicamente. Así de simple es. Pero no nos detengamos aquí. Sigamos explorando un poco más. Pasemos a nuestro esquema.

Ahora, obtengamos la segunda consulta, que es, ¿qué pasa si solicitamos un usuario según el ID? Una vez más, mi ID debe estar disponible. Así que devuelvo mi usuario. Ahora, el tipo no necesita cambiar. Sin embargo, necesito definir mi fuente de datos. Así que voy a volver a mi fuente de datos. Puedes ver que hay un obtener usuario aquí. Quiero definir la fuente de datos. Puedo copiar esto, básicamente. No es exactamente lo mismo. Entonces lo que necesitamos hacer ahora es, si miras este punto final, después de slash usuarios, si pongo slash uno, que es un ID de usuario, me dará información específica de ese usuario en particular. Entonces slash uno es LeeAnne, slash dos es Urban. Así que voy a intentar mapear exactamente eso. Así que voy a volver aquí. En lugar de tener solo slash usuarios, necesito el ID de usuario. Ahora puedo poner uno o dos porque eso sería codificarlo directamente. Necesito que esto sea dinámico. De lo contrario, siempre estaré obteniendo ese usuario en particular. ¿Cómo lo hacemos? Vamos a usar, si simplemente presionas las llaves, verás una lista completa de cosas que, una lista completa de argumentos disponibles. Así que para nosotros, bajo el tipo de usuario, tenemos ID, que es lo que necesitamos. Entonces vamos a hacer la consulta basada en ese ID. O más bien, en este caso, lo siento, este es el argumento que hemos configurado en nuestro editor. El argumento que vendrá con la consulta. Así que voy a agregar eso. Esto es solo un usuario. Actualizo mi campo. Y como puedes ver, esto está hecho. Actualizo aquí. Entonces lo que debería hacer ahora es, una vez más, si todo está bien, puedo mover esto a usuario. Voy a poner ID, solo llamaré uno ID. Eso me da mi primera información. Así de simple es. Tienes tu segundo usuario. Creo que tienes el usuario 10. Así que probemos el usuario 10 también. Y digamos que el usuario 10 usa, todo disponible, todo consultado, con un punto final REST esencialmente siendo el backend de este front-end GraphQL, es fenomenal.

Pero no nos detengamos aquí. Podemos, lo que podríamos hacer es, necesitamos combinarlo con nuestro Todo. Entonces, ¿qué pasa si tenemos dos API separadas, dos puntos finales REST separados? Queríamos combinar eso. Vamos a hacer eso también con Todo. Veamos cómo podemos hacerlo.

Entonces, si volvemos a nuestro punto final REST de usuario, más allá del REST, el ID de usuario, si escribo slash y voy a dos, en realidad me da la lista de tareas pendientes de un usuario individual. Eso es básicamente lo que estoy buscando. Estaré consultando al usuario según un ID específico, y idealmente debería devolverme la información de mis tareas pendientes, ¿verdad? Entonces, sigamos adelante, lo siento, la información de las tareas pendientes. Así que volvamos.

Voy a definir un nuevo tipo, ¿de acuerdo? Solo voy a hacer esto de las tareas pendientes. Las tareas pendientes tienen un ID de tipo entero, que es importante, ID de usuario de tipo entero. Tenemos, oh, lo siento. Ahí vamos, necesita estar en mayúscula. Necesitamos tener, creo que si veo correctamente aquí, el campo se llama título y completado. Entonces no es tarea, es título, así que vamos con título. Necesita mapearse exactamente, así que creo que ese es un inconveniente, pero necesita mapearse exactamente por ahora. Completado, y esto se movió. Bien, eso es todo.

Lo que necesitamos hacer ahora es, obviamente, voy a llamarlo junto con un usuario. Quiero que mi usuario tenga sus tareas pendientes. Va a ser una lista de tareas pendientes. Con eso, voy a ir a mi fuente de datos, y puedes ver que hay un campo de tareas pendientes aquí. Ahora necesito definir una fuente de datos para esto. Vamos a utilizar una existente, tal vez una fuente de datos existente, hagamos eso. Tengo mi usuario aquí, pero no puedo usarlo en este momento porque no estamos mirando los argumentos. Los argumentos solo son, así que si miras aquí, el argumento es este campo en la parte superior. Este es un argumento. Estos son campos de objeto, básicamente. Entonces, lo que necesitamos del aspecto de las tareas pendientes es que necesitamos el campo de objeto del ID de usuario. ¿Cómo lo hacemos? Entonces, lo que necesitamos, básicamente, es este ID en particular, no el ID asociado en la parte superior. Así que hagamos esto. Lo voy a escribir de nuevo, y como puedes ver, hay un ID de objeto aquí en lugar del ID de argumento que aparece. Voy a hacer slash tareas pendientes. Bien, le voy a dar un nombre a esta fuente de datos. Es tareas pendientes. Actualizo, espero, tengo todo correcto. Si ahora vuelvo a mi Playground y consulto mis tareas pendientes, veremos mi título. Tal vez completado. Ahí lo tienes. Ahí lo tienes, ahora hemos combinado dos puntos finales REST en una API GraphQL. Es bastante similar a lo que habíamos hecho anteriormente. Ahora se ha logrado utilizando dos puntos finales REST como el backend. Lo cual espero que también sea asombroso para ti. Esto es algo muy, muy poderoso para cualquiera que esté pensando o haya estado pensando en cómo puedo migrar mi stack. ¿Cómo puedo migrarlo? Va a ser un desafío, va a llevar tiempo. Esto es algo que puedes usar tanto para una prueba rápida de si esto funciona para ti como a nivel de producción también. Puedes hacer ambas cosas utilizando el gráfico de datos universal de Tyke en cualquier momento si quieres. Entonces, creo que eso concluye nuestra demostración. Creo que eso es todo lo que tengo por hoy. Podemos, si queremos, incluir también una tercera fuente de datos si queremos. Veamos si podemos hacerlo. Sigamos adelante. Entonces, en lugar de ir con Tareas pendientes, con lo que hemos estado trabajando, podemos ver las publicaciones en redes sociales. Entonces, un usuario también puede tener publicaciones que él o ella podría haber publicado, y podemos hacer eso. Entonces, como una tercera URL, que no habíamos hecho anteriormente, veamos si podemos lograr esto también, de una manera más sencilla. Sigamos adelante. Entonces, como puedes imaginar, vamos a hacer tipo publicación. Ahora, veamos la estructura de la publicación. ¿Qué tenemos aquí? Tenemos UserID, ID, Título y Cuerpo. Veamos si podemos mapearlo. Tenemos ID, que es de tipo entero, importante, UserID entero. Teníamos, creo que era Título, disculpas. Sí, Título y Cuerpo, está bien. Bien, creo que ahora tenemos esto. Esto también va a ir en mi Usuario. Va a ser Publicaciones, similar a tareas pendientes. Esto va a ser Publicación. Y ahora, con suerte, puedes probarlo tú mismo. Si vuelves a nuestro Usuario una vez más, hay algunas cosas que faltan. Bien, actualizo para que se guarde.

Esperemos que haya funcionado. Salgamos. Ahí vamos. Creo que eso lo hizo. Bien, aquí tenemos publicaciones. Voy a definir la fuente de datos. Voy a usar la existente, no a doos, porque quiero que sea exactamente en la misma estructura. Y a doos, solo uso tres publicaciones. Voy a hacer publicaciones, darle a actualizar. Actualizar. Ahora, todo está hecho correctamente. Bien. Debería hacer clic en publicaciones. Debería haber un buen título, debería haber un buen cuerpo. Bien. Creo que lo conseguimos. Creo que es demasiada información, tal vez. Pero bueno, veamos. Ahí lo tienes, tienes tus publicaciones aquí. Tal vez si elimino las tareas pendientes por ahora, eso es para la demostración, podría ser un poco más evidente. Ahí lo tienes, tienes tus publicaciones aquí. Ahora has combinado tres fuentes de datos diferentes, tres fuentes de datos REST diferentes en GraphQL y lo has expuesto. Ahora recuerda, esto es ahora un punto final de GraphQL, lo que significa que ahora puedes aplicar todas las diferentes medidas de seguridad de gestión de API que teníamos anteriormente. También puedes hacerlo a ese nivel. Eso, en esencia, es un concepto muy, muy poderoso. Es una capacidad muy, muy poderosa que te hemos brindado con Universal Datagraph, resolviendo el problema de gestión de infraestructura, migración de infraestructura y poner en marcha GraphQL en un entorno de producción lo más rápido posible de una manera sin código. Entonces, bueno, estamos a punto de, bueno, cinco minutos y medio a dos horas y media. Esperemos que esto haya sido valioso para ti. Espero que esto te haya parecido interesante. Aprendiste algo hoy. Espero que te sientas un poco más seguro que antes de esta sesión. Y, con suerte, volverás y lo probarás por ti mismo. Voy a subir el código. Todo el código se subirá a un repositorio, cuyo enlace será compartido por los organizadores después de la sesión. Y sí, no dudes en contactarme, también, más allá de la sesión. Estoy en LinkedIn. Si quieres hablar conmigo, tener una conversación, si tienes preguntas sobre esto, organizamos GraphQL Hangouts y API Hangouts semanalmente. Los miércoles por la noche es el GraphQL Hangout. Tenemos API Hangouts los jueves por la noche. Básicamente, son conversaciones abiertas sobre todo lo relacionado con GraphQL y las API, respectivamente. Si te interesa, no dudes en unirte. Estas son conversaciones de la comunidad. No se trata de ventas. No tiene nada que ver con vender tecnología o un evento de presentación o una demostración incluso. Esto está realmente impulsado por la comunidad. Eso es básicamente lo que estamos tratando de hacer.