Construir y Desplegar APIs GraphQL Instantáneas al Borde

Hola a todos. Muchas gracias por tomarse el tiempo hoy para unirse a mí, y vamos a pasar algún tiempo hoy mirando Graphbase y GraphQL. Esta no es una masterclass para personas en GraphQL, pero estoy más que feliz de responder cualquier pregunta que alguien tenga allí. Entonces, hola, Natasha y todos los demás que están en el chat, es genial tenerlos a todos. Y por favor, no duden en interrumpirme en cualquier momento. El estilo que voy a adoptar hoy en realidad va a ser mostrándoles algunas cosas. Y si tienen acceso al portal GetNation, hay otras masterclass y videos allí de mí mismo sobre este mismo tema. Pero creo que hoy podemos repasar y mostrar varias partes. Y quiero hablar específicamente sobre una forma en que ustedes pueden construir APIs de GraphQL en la parte superior de una base de datos Postgres database con un nuevo conector que tenemos. Eso podría ser interesante. Y vamos a hacer un recorrido por el producto y lo que permite a los desarrolladores hacer. Y espero que eso sea suficiente para, ya saben, inspirar algunas preguntas y, ya saben, invitarlos a probarlo. Así que solo voy a pasar por algunas diapositivas para empezar, solo para establecer el escenario. Y como dije, por favor hagan cualquier pregunta, si la tienen. Pero quiero hablarles sobre GraphQL y cómo pueden hacer que sus data sean rápidos. Soy Jamie. He estado haciendo GraphQL durante unos cinco años. Tengo un sitio web, GraphQLWTF, donde lanzo videos semanales. Eso está actualmente en pausa, pero reanudaré los videos semanales en eso en este momento. Hay un gran catálogo si están interesados. Pueden seguirme en Twitter, como se llame hoy. Mi nombre de usuario es simplemente Barton al revés, que es no trab.

El mayor problema que creo que vemos hoy, o ciertamente el problema que he experimentado personalmente, es que tenemos tantas herramientas diferentes en el ecosystem, y todas estas herramientas nos permiten hacer tantas cosas geniales. Incluso mi propio sitio web tiene herramientas para enviar notificaciones por correo electrónico, por Slack, para extraer contenido de un CMS, para extraer contenido de una plataforma de gestión de activos digitales para obtener mis imágenes y videos, y ciertamente desde mi sitio web GraphQL, el contenido proviene de muchos lugares diferentes. Lo cual es genial. Utilizo estos servicios de mejor raza como los llama la industria. Pero a menudo pasamos tanto tiempo averiguando cómo funcionan cada una de estas APIs. Pasamos tanto tiempo leyendo cada documentation o referencia de SDK para realmente averiguar cómo funciona todo junto, y al final de todo tenemos un archivo json de paquete que tiene una docena o si no múltiples gigabytes de módulos de Node modules solo para instalar SDKs y lo que sea, y eso está bien. Pero no creo que sea la mejor experiencia, y creo que GraphQL realmente brilla aquí porque nos permite interactuar con todos estos servicios diferentes como una sola API. Y el otro problema que creo que tenemos es que todos estos servicios diferentes pertenecen a algún lugar, los data se almacenan en algún lugar y son accesibles. Si estoy aquí en el Reino Unido y quiero acceder a data que está en US East one o lo que sea, tengo que hacer una solicitud, obtener esos data y la latencia allí puede sumar, ¿verdad? Y esa latencia se replica para cada servicio individual que uso, lo cual tampoco es genial. Ahora, muchos de los diferentes proveedores de servicios que usamos le permiten replicar data o lo que sea, pero a menudo tiene que pagar un costo por proveedor para replicar. Entonces eso no es genial, tienes todos estos costos diferentes asociados con solo una salida porque has tenido que replicar contenido alrededor del mundo. Entonces eso no es una experiencia increíble, en Graphbase, estamos tratando de resolver eso con algo que llamamos almacenamiento en caché de borde de GraphQL. Entonces, podemos poner una capa frente a sus fuentes de data por lo que cuando alguien solicita eso, lo almacenamos en caché y los tiempos de respuesta pasan de parecer algo como esto a la línea verde. Cualquier cosa que solicites pasa mucho más rápido. Entonces, ¿cómo conectamos cosas? Bueno, estas son tres formas que quiero mostrarles y no me voy a centrar demasiado en estas hoy, la de postgres es la que me importa. Tenemos tres conectores aquí. MongoDB y un conector de API abierta. El conector de API abierta es bastante genial porque puede tomar una especificación de API abierta y puedes usar esa especificación y lo genial de las especificaciones es que siguen una especificación por lo que podemos determinar qué campos son y cuáles son los puntos finales y qué argumentos toman porque estas especificaciones siguen una especificación y el esquema sigue una especificación. Entonces, podemos crear automáticamente una API de GraphQL basada en la especificación de API abierta, lo cual es bastante genial. Y porque es GraphQL, podemos introspeccionar eso de la misma manera. Podemos introspeccionar las APIs de GraphQL y podemos generar algo que puedas usar. MongoDB, por otro lado, aquí tenemos una forma de definir modelos y especificar campos en esos modelos y agregar cierta rigidez a nuestro MongoDB, que es tradicionalmente una base de datos de documentos. Podemos agregar algunas reglas y comportamientos sobre cómo se almacenan los documentos y generamos todas las APIs para eso. Pero en lo que quiero centrarme hoy es en el uso de una base de datos Postgres database y estaremos usando NEON, así que por favor vayan a NEON dot tech y regístrense y creen su propia base de datos allí si quieren seguir. Pero aquí podemos conectar NEON como un conector, agregarlo a nuestro esquema como una fuente de data, luego podemos agregar almacenamiento en caché a eso por lo que cuando hacemos una solicitud, obtiene data de la caché y no de NEON. Luego, una vez que tenemos todas nuestras conexiones y fuentes de data alineadas, todo lo que entonces necesitamos hacer para implementar esto en el borde globalmente alrededor del mundo, con más de 200 puntos de presencia, es ejecutar un npx craftbase deploy y eso se implementará en todo el mundo, lo cual es bastante genial. Todo está construido con Rust y luego se empaqueta usando WebAssembly y se implementa en diferentes, no lambdas, sino trabajadores de CloudFlare que se implementan, como digo, alrededor del mundo en la red Edge de CloudFlare. Todo lo que voy a mostrarles y hablar hoy es

Pero si puedes, si quieres seguir con esto, puedes ir a neon.tech y puedes registrarte y crear una database y luego puedes crear algunas tablas en tu database. Y luego puedes agregar algunos data si quieres. Solo tengo una tabla aquí llamada usuario y luego tengo algunas columnas aquí para nombre y correo electrónico. Y simplemente he agregado algunos datos ficticios aquí para los propósitos de esta masterclass. Bien. Así que ahora sumérjamonos en GraphBase. Así que imaginemos que tienes una aplicación de front end. Digamos que es Next.js. Digamos que es Vuel. Lo que sea que estés usando como front end al que quieras agregar un back end de GraphQL, bueno, una vez que estás dentro de eso, todo lo que realmente necesitas hacer es ejecutar un comando que es npx GraphBase. Usaré la última versión y lo llamaremos GraphBase react summit. Este react summit simplemente va a crear una carpeta para mí donde puedo hacer algún trabajo. Así que aceptaré instalar la última versión y esto va a inicializar un nuevo proyecto. Me preguntará una vez que esté instalado cómo quiero configurar mis proyectos. Voy a usar TypeScript. Puedes optar por usar GraphQL. Así que puedes usar GraphQL SDL para definir tu back end, pero voy a usar TypeScript porque es un poco más agradable trabajar con él si no estás familiarizado con SDL demasiado. Así que si puedo escribir esto, lo abriré en mi editor de código y comenzaremos. Sí. Compartiré los enlaces de recursos en la descripción. Eso está bien. No hay problema. Comencemos con el primero, que es graphbase.com y luego neon.tech. Esas son las dos cosas con las que vamos a pasar mucho tiempo hoy y la documentation también. Así que sí, pasaremos mucho tiempo en Neon y un poco en GraphBase y desplegaremos todo eso. Imagino que ya estás usando GitHub, pero también lo usaremos. Bien. Así que aquí está mi nuevo proyecto. ¿Es GraphBase un módulo de nodo? Es un módulo de nodo, pero puedes invocarlo usando npx graphbase init y luego puedes hacerlo, te mostraré los comandos también. Así que si tienes node instalado en tu máquina, esa es probablemente la forma más fácil. Creo que está disponible como un binario a través de homebrew y cosas así, pero honestamente, la forma más fácil es simplemente usar eso npx. Una vez que hayas ejecutado npx, obtendrás algo que se ve así. Y esto es un archivo de configuración. Y lo que vamos a hacer hoy es, dilly diddle, vamos a crear algo desde cero. Así que voy a llamar a importar config desde el SDK basado en gráficos. Y cuando ejecuté inicializar antes, esto simplemente creó un package.json que se ve algo así. Ha añadido esta dependencia, que es el SDK basado en gráficos. También necesitarás instalar las dependencias, pero lo haremos a continuación.

Entonces, otra pregunta es ¿necesitamos instalar Node.js como Express? No. ¿Descargar algún plugin? No. ¿Algún acceso a la biblioteca para la masterclass? No. No necesitas instalar Express ni nada. Necesitarás tener Node.js y npm instalados en tu máquina. Como dije, si no lo has hecho ya entonces podrías simplemente seguir adelante y hacer esto a tu ritmo más tarde. Hay documentación para un inicio rápido y también lo dejaré en el chat, que está justo aquí. Hay un enlace al inicio rápido allí también. Así que si quieres seguir adelante y no tienes nada de esto instalado, puedes hacer esto a tu ritmo más tarde. Así que vamos a seguir un poco de este inicio rápido y nos desviaremos por diferentes caminos a medida que avance el chat. Así que tenemos este esquema GraphQL que se generó automáticamente para nosotros, y luego aquí tenemos cosas como onNeonUser, y user es el nombre de la tabla en Neon, en nuestra base de datos Postgres. Si vamos aquí, tenemos entonces esta tabla de usuario. Hemos introspeccionado la base de datos, hemos visto que hay una tabla llamada usuario, y luego hemos generado un tipo en GraphQL llamado usuario. Luego hemos mirado el tipo llamado nombre, y podemos ver que esos son cadenas también, y que esos son no nulos, así que hemos creado un tipo para eso también. Y luego si puedes ver aquí, tenemos cosas como una mutación por lotes, así que si quisieras crear muchos, actualizar muchos, o borrar muchos, tenemos todas esas diferentes mutaciones GraphQL también para ti. Y luego podemos ver aquí, hay varias otras cosas para colecciones y tipos de entrada. Esto no es demasiado importante ahora mismo, puedes explorar todo esto mientras escribes tus consultas GraphQL, así que creo que probablemente deberíamos hacer eso. Así que con una consulta GraphQL, tenemos una consulta aquí llamada neon, que es el espacio de nombres del adaptador de la base de datos que creamos. Así que ese neon espacio de nombres se basa en este valor aquí. Podríamos, si quisiéramos, pasar el espacio de nombres falso, entonces si llamamos falso aquí, GraphBase detecta ese cambio localmente y reinicia el servidor, así que ahora este neon no existe. No hay tal espacio de nombres. En cambio, lo que tenemos es todo está aplanado y tenemos usuario y colección de usuarios como la raíz aquí. Así que vamos a usar eso solo para jugar un poco, y aquí podemos decir vamos a buscar el primer usuario, y seguimos una convención específica dentro de GraphQL. Si alguien está familiarizado con la especificación de paginación de relay, seguimos eso de manera laxa al darte algunos bordes aquí. Los bordes son bastante geniales porque luego podemos mirar el nodo, que es el registro específico. Aquí podemos obtener el nombre y el correo electrónico también como el ID, y también a partir de eso podríamos obtener el cursor porque hacemos paginación basada en el cursor. Eres capaz de buscar antes y después de un cursor, y ese cursor es donde está en la lista, así que si se añaden o se quitan cosas, no tienes que... Ya sabes, hay muchos inconvenientes al usar la paginación basada en el desplazamiento, así que el cursor, tienes acceso a ese cursor también. Luego hay algunas cosas como la página actual en la que estás, podemos ver que no tiene una página siguiente, no tiene una página anterior dentro de esta solicitud GraphQL. Así que esta consulta aquí va a, si la ejecutamos, va a ir a la base de datos y va a obtener el primer usuario de la colección de usuarios aquí. Así que podemos ver que hay otra página, así que si hay otra página, genial, puedo decir, vale, pásame el primer elemento después de este cursor aquí. Así que copio eso, y luego lo ejecutamos, y luego obtenemos el siguiente usuario en la base de datos de neon, y esta solicitud GraphQL va a GraphBase, GraphBase mira la consulta, luego proyectamos esa misma consulta en la base de datos, pero en términos de SQL, no en GraphQL.

Así que todo esto ahora tenemos una API GraphQL que se basa en nuestra base de datos neon, y aquí podemos ver que tenemos cosas como la paginación. Así que si elimino la paginación después del cursor y simplemente digo que busque los primeros 100, ejecuto eso, obtengo los dos usuarios que están en mi base de datos, vamos a eliminar algunas de estas cosas, eso no es tan importante, y vamos a echar un vistazo a algo más. Así que aquí podemos ver que tenemos ordenar por, así que podemos ordenar algunas de las cosas por nombre, por ejemplo, así que podríamos, vamos a hacer la acción de ID, así que es probablemente la más fácil. Así que ordenaremos los usuarios en orden descendente, y luego veremos aquí, obtenemos los datos que nos devuelven, así que tienes las diferentes cosas de ordenación en eso también, y luego el filtro, podemos hacer lo mismo con el filtro, podemos aplicar uno o muchos filtros aquí, así que podría simplemente decir, está bien, búscame, ya sabes, búscame este usuario de esta colección, y eso también buscaría eso. Ups, esto será igual a, así que sí, aquí, podrías hacer que el correo electrónico sea igual a este valor, y filtrará esos resultados y me dará el resultado que quiero, o podría hacerlo en un array, así que si tuvieras una lista de correos electrónicos que quisieras consultar, podrías usar eso también. Entonces, ¿se comparó Neon con Playground, Apollo? Neon es simplemente una oferta de base de datos Postgres. Diría que no es competidor pero PlanetScale podría ser un competidor, PlanetScale es MySQL, y Neon es Postgres, pero hacen el mismo tipo de cosa. Hay competidores. Los competidores de GraphBase son como Hasura y probablemente Apollo en los próximos meses a medida que lanzamos más características. Pero sí, Hasura es probablemente el competidor. Creo que lo que hacemos bastante bien es que es basado en el borde. Hasura, corrígeme si me equivoco, está todo Dockerizado y puedes ejecutar un Docker si quieres ejecutarlo localmente, la experiencia del desarrollador es un poco apagada y eso es lo que intentamos mejorar y hacer mucho mejor. Pero Hasura es un producto mucho más grande y tiene muchos más conectores que nosotros. Así que sí, Hasura es realmente bueno. Lo he usado tantas veces en el pasado, pero graph-based está empezando. Así que tenemos algunos conectores, pero en lo que realmente nos hemos centrado es en esta experiencia local que eres capaz de hablar con tu base de datos, crear estas APIs GraphQL, interactuar con ellas todo localmente sin tener que instalar nada. Sí, necesitas instalar Node y lo que sea, pero la mayoría de las personas que trabajan en el espacio de JavaScript, estoy seguro de que ya lo tendrán instalado. Así que no debería haber ningún tipo de aros extra por los que necesites saltar para empezar a usar graph-based. Así que aquí tenemos esta consulta de colección. Voy a buscar este usuario por ID uno, así que aquí podemos hacer lo mismo y podemos buscar por ID o correo electrónico, puedes ver aquí, porque eso tiene una restricción en la base de datos, pero vamos a buscar por usuario por uno, y luego buscaré ese usuario. Así que obtenemos ese usuario aquí es uno, y luego obtenemos ese usuario también. Así que ahí lo tenemos. Y luego, ¿por qué no miramos la mutación? Hay muchas mutaciones que generamos para ti. Como dije, voy a repetirme, pero tenemos una tabla para usuarios. Así que podemos crear usuarios aquí en nuestra base de datos, y todas estas mutaciones se generan automáticamente. Así que vamos a hacer test.graphics.com, y añadiremos un nombre aquí de prueba. Así que creador. Y lo ejecutaremos. Sí, así que el guardado local se detuvo allí. No estoy seguro de por qué. Tal vez cambié algo. No importa. Así que lo ejecutaremos, y tendremos que reiniciar el navegador. Vale. Vamos a limpiar esta carpeta aquí, y esta carpeta aquí. Así que estamos ejecutando ahora. Ejecutamos esto. No, vamos a echar un vistazo. No estoy del todo seguro de lo que está pasando allí. Podría ser la mutación la que ha provocado eso. Vamos a ejecutar eso de nuevo. Como digo, este conector es completamente nuevo, así que espera algunas cosas. Eso funciona. Debe haber algo en esa mutación que está causando que se caiga. Seguiré internamente sobre eso. Voy a girar algunas cosas aquí, sólo para ver si podemos hacer algo de depuración en vivo. Luego, si intentamos ejecutar la mutación de nuevo,

La API GraphQL para consultas y mutaciones se genera automáticamente en base a lo que tienes dentro de aquí. Todo lo que tenemos dentro de aquí es una única conexión a nuestra base de datos. Lo siguiente que quiero mostrarles es cómo podemos crear un conector para una API. Tal vez puedo usar la API de TrevorBlades. Esta es una API para obtener países y podemos hacer consultas GraphQL aquí. Este es un endpoint separado. Tenemos todos estos diferentes servicios. Tenemos una base de datos neon y vamos a tener una API de países para obtener países. También podríamos tener una API de carrito para obtener carritos también. Hagamos eso. Tengamos un conector.graphql. Le voy a dar el nombre cartQL y luego le daré una URL. No voy a agregar esto como una variable de entorno porque no es como código para mejores prácticas pero no es algo que realmente necesito agregar como una variable de entorno porque esa URL no podría cambiar. Pero si agregamos esto aquí, ahora, cuando guardo, graph base detecta el cambio, reinicia el servidor local. Vuelvo a Pathfinder localmente y luego podemos ver aquí que tenemos una mutación cartQL. Este es otro espacio de nombres y luego tenemos todas estas cosas aquí y estas son todas las mutaciones que están dentro de esa API GraphQL. Y luego aquí de nuevo tenemos el espacio de nombres de consulta donde podemos obtener cosas de una API diferente. Aquí simplemente obtendremos en NEON o haremos React o lo que queramos. Y luego podemos obtener en el monto subtotal, monto formateado. Eso va a la API GraphQL y resuelve esos datos. Podría hacer lo mismo para NEON y aquí podría obtener los primeros 100 usuarios de NEON. Simplemente obtengamos su nombre y luego en una solicitud GraphQL ahora hemos hablado con dos servicios diferentes. Hemos hablado con la API de Carritos y luego hemos hablado con la base de datos NEON. Pero si abro el panel de historial aquí y ejecuto algunas más de estas consultas, simplemente borremos esto. Si ejecuto esta consulta, tengo que ir a una API y luego ir a otra API y luego devolver los resultados. Esto ha tardado todavía un segundo en obtener esos datos de vuelta. Y no importa cuántas veces ejecutes eso todavía hay latencia. Ahora imagina que tus usuarios están en todo el mundo que está abierto a estas bases de datos y está pasando por GraphBase. Sí, GraphBase está en el borde pero si tu base de datos o tu API para comercio está en el borde también, y no está en la misma olla, entonces va a haber algo de latencia. Ahora, eso es algo que hemos desde el principio querido resolver con GraphBase. Entonces la mejor manera de hacer esto es dentro de aquí, podemos entonces configurar algunas reglas de caché. Solo voy a cubrir algunas reglas de caché muy básicas aquí. La más fácil de demostrar es simplemente cachear absolutamente todo. Así que vamos a poner en consulta es el tipo de nombre que queremos cachear, y luego podemos agregar en max age aquí. Digamos 60. Y otra cosa genial es que también soportamos la opción stale while we validate. Así que puedes especificar un período de tiempo donde obtiene 60 segundos. Pero si un usuario hace una solicitud y los datos son mayores de 60 segundos, entonces dale esa respuesta obsoleta y vuelve a validar en segundo plano. Así que la próxima vez que tú u otro usuario obtenga los datos, va a estar obteniendo esos datos frescos de la base de datos. Así que con eso ahora guardado, si volvemos a Pathfinder y ejecutamos esa consulta una vez, veremos que tarda unos 1200 milisegundos, casi 1300 milisegundos allí. Lo ejecutas de nuevo, eso ahora ha saltado a cuatro milisegundos. Así que borra esto para que sea un poco más claro. Ejecutas esto de nuevo, de nuevo, 77 milisegundos, cuatro, cuatro, cuatro, cuatro, cuatro. Esto es realmente rápido porque es localmente, pero en producción,

Ahora, si haces cualquier cambio en la database, si ejecutas cualquier mutación y has cambiado, digamos, el nombre aquí, automáticamente, siempre y cuando uses el punto final de GraphQL que proporciona Graphbase, invalidaremos automáticamente ese resultado almacenado en la caché de GraphQL o la caché de Graphbase, GraphQL. Así que si cambias el nombre de este usuario y eliminas el dos de ahí, la próxima vez que hagas una solicitud, va a tardar un poco más de cuatro milisegundos, pero luego se almacena en caché de nuevo y luego obtienes esas respuestas rápidas. También puedes configurar todas esas reglas de caché en una base tipo por tipo. Así que puedes añadir múltiples reglas aquí, y podrías decir, para los tipos, digamos producto y categoría. Esas son típicamente cosas en e-commerce que no cambian demasiado, cosas como la descripción del producto y las imágenes, esas no cambian con frecuencia. Esas pueden cambiar una vez al mes o un trimestre cuando tienes diferentes impulsos de marketing, así que podrías querer almacenar esas en caché por mucho más tiempo. Así que si alguien hace una solicitud para obtener esos data, viene directamente de la caché y no va a tu database. Y lo mejor de eso es que al reducir el tráfico a la database de origen u otro servicio, puedes mantenerte bien por debajo de cualquier límite de su API. Si tienes que pagar por los límites de la API para aumentar los límites de la API o más llamadas a la API, cuando añades caché delante de ella, no tienes que hacerlo. Así que un área en la que esto es bastante poderoso es en realidad con los muchos de los diferentes LLMs y cosas como OpenAI, eres capaz de almacenar en caché. Sí, así que eres capaz de hacer una solicitud, pasar tus instrucciones y si las instrucciones son similares y tienen la misma variable, entonces puedes obtener la respuesta de la caché y no tienes que ejecutar ese código cada vez y agotar todos tus diferentes tokens. Podrías almacenar todos esos data en el borde para tus aplicaciones. Ahora mismo, puedes poner una URL de Postgres y nosotros nos encargaremos de ello. Tiene que ser basada en HTTP, creo, en este momento. Pero pruébalo y déjanos saber qué pasa allí. Hasta donde sé, deberías ser capaz de usar cualquier database de Postgres, pero si no, debería funcionar simplemente con bases de datos basadas en HTTP. No estoy seguro si está en producción todavía, pero estamos trabajando en la capacidad de añadir cualquier y usar cualquier y llevar no borde al borde. Y entonces, sí, creo que otra cosa, que es bastante genial para mostrar, es algo en este proyecto aquí. Así que hice esto un poco antes, experimentando, pero tomemos este código. No es demasiado importante, pero voy a pegar un código aquí. Ahora, neon, conecta aquí, neon genera tipos que hemos visto antes llamados neon user de mi tabla de usuarios. Ahora, mi usuario, cada usuario tiene un correo electrónico. Pero imaginemos que queremos permitir en la consulta obtener la URL de Gravatar para los usuarios. Bueno, GraphBase te permite hacer eso. Puedes extender cualquier API de GraphQL y unirlas. Así que aquí, extendemos el usuario neon, le damos un nuevo campo de avatar y especificamos algunos argumentos con diferentes tipos que son opcionales. Luego especificamos que este campo Gravatar devuelve URL y usa el archivo que se llama Gravatar. Así que vamos a crear un archivo dentro de la carpeta GraphBase. Llamaremos a esto resolvers, es el nombre de la carpeta y luego gravatar.ts. Aquí, al añadir en slash, simplemente va a crear rápidamente esa carpeta para nosotros. Y luego dentro de aquí, simplemente voy a obtener el código que hice antes. Este código no es importante. Esta es sólo una forma de generar, créelo o no, la URL de Gravatar en una función de borde. Como estamos basados en el borde y usamos Cloudflare Workers, puedes instalar módulos de node, pero tienen que ser compatibles con el borde. Así que cosas que usan el sistema de archivos y cosas así no funcionarán o las bibliotecas de criptografía. Así que con esto, tenemos que usar la nativa biblioteca de criptografía que está incorporada en Cloudflare Workers porque ahí es donde desplegamos. Como digo, no es demasiado importante, pero hacemos todo eso. Obtenemos el correo electrónico de la consulta. Luego lo codificamos. Será uno. Luego pasamos cualquier opción diferente o opción personalizada que hemos pasado, y luego codificamos esa URI y la devolvemos al resolutor de GraphQL. Así que si le damos una oportunidad aquí abajo, vamos a buscar el correo electrónico. Así que cerraremos eso.

De hecho, lo mantendremos abierto porque es importante. Así que aquí tenemos dos o tres usuarios, y tenemos el correo electrónico. Ahora si añado Gravatar, este campo es ahora parte de la API GraphQL, y luego tenemos algunas opciones personalizadas aquí. Podríamos pasar el tamaño. Digamos que son 400 píxeles. Ejecutamos esta consulta. Entonces esto va a ir a la database, obtiene los usuarios. Luego va a calcular el código para el correo electrónico para crear la URL. Si nos desplazamos hacia abajo, tardó unos cuatro segundos, lo cual es una cantidad de tiempo insana, pero tuvo que hacer todas estas cosas. Pero la próxima vez que lo solicitemos lo hacemos de nuevo, va a volver en tres milisegundos porque ya almacenó la respuesta. No necesitó calcular todas estas cosas. Así que ahora podemos ver que tenemos Gravatar devuelto a nosotros para todos nuestros diferentes usuarios. Así que si hago clic en esto, sigo el enlace, entonces obtengo esa URL de Gravatar. Y la URL aquí fue generada automáticamente usando el campo de correo electrónico y hashtag, hizo lo que necesitaba hacer. Y ejecutó este código cuando solicitaste ese campo. Si no solicitó el campo, no ejecuta el código. Y todo esto, cuando despliegas todo esto, está justo en el borde y empaquetado dentro de tu API también. Así que si has creado un servidor GraphQL antes, puedes crear resolutores personalizados para consultas, mutaciones y campos, al igual que puedes en cualquier otro marco de GraphQL. Pero la belleza de esto es que una vez que comprometes esto a GitHub, GraphBase puede detectar automáticamente eso y desplegarlo automáticamente, lo cual es bastante genial. Sí, database, dondequiera que esté alojada, siempre y cuando sea Postgres. Podrías usar MongoDB. Y también podrías usar OpenAPI. Sí, ese es ese. Permíteme solo buscar el proyecto.

Y todo lo que he hablado hoy está disponible en GraphBase. Y lo último es que todo lo que has visto es de código abierto y puedes incluso desplegar esto tú mismo a Cloudflare o Deno deploy, lo cual es bastante genial. El motor de GraphBase es todo de código abierto. Está construido en Rust, como mencioné antes, y tomamos eso, construimos esa web assembly y la empujamos al borde. Con Cloudflare, ese es nuestro servicio alojado. Pero si no quieres pagar por nuestro servicio alojado, que te da costuras y el soporte de ramificación, cosas así, si solo quieres desplegar el runtime tú mismo, puedes. Es todo de código abierto. No necesitas pagarnos nada, lo cual realmente me encanta. Así que, sí, estamos comprometidos con el código abierto. Nos encanta trabajar en código abierto. Nuestra CLI es de código abierto. Todas nuestras plantillas lo son. Si simplemente abres la plantilla, verás, he añadido un montón aquí para diferentes servicios. Así que, Stripe. Pero este de Stripe en realidad usa la especificación de la API abierta. Así que, usa esto para luego generar una API GraphQL. Y somos capaces de usar el reenvío de cabeceras con nuestras solicitudes GraphQL. Así que, tu usuario final, tu servicio, GraphBase ni siquiera conoce tus claves de API. Puedes reenviar eso desde diferentes solicitudes, lo cual es bastante genial. Bien. Muchas otras cosas aquí. Y hay algunos otros ejemplos también para usar realmente GraphBase en proyectos reales. Así que, tenemos cosas como el almacenamiento KV, del cual no he hablado hoy. Pero GraphBase tiene su propio almacenamiento KV. PlanetScale está ahí. PlanetScale. Así que, puedes usar cualquier database con GraphBase siempre y cuando sea compatible con HDB. Y si vamos aquí y miramos nuestro resolver de productos. Vamos a obtener la consulta aquí. Veremos que importamos la dependencia para la database. Y luego somos capaces de hacer lo que necesitamos para devolver los data que nos gustan. Hay otras cosas aquí, también. Como MongoDB. Así que, también aquí. Así que, hacemos un resolver para buscar todos nuestros usuarios. Aquí instalamos LibSQL. Así que, eso es un fork de SQL Lite. Importamos el cliente, nos conectamos a él. Y luego podemos ejecutar lo que necesitamos. Y podemos crear una API GraphQL a partir de eso. Esto es más manual y práctico. No es automatizado como los conectores, pero cuantos más conectores hagamos, eso se automatizará. Tienes que hacer todas estas cosas manualmente. Pero hay algunos otros ejemplos aquí para React y Vue y quick, y Nuxt y Next.