Construir y Desplegar APIs GraphQL Instantáneas al Borde

Rate this content
Bookmark

Aprenda cómo generar APIs GraphQL instantáneas utilizando un conector de fuente de datos (fuentes GraphQL y no GraphQL), extenderlas y unirlas ambas con resolutores personalizados y desplegar al borde sin salir del editor de código.

55 min
10 Nov, 2023

Comments

Sign in or register to post your comment.
  • Nikhita Sareen
    Nikhita Sareen
    none
    Is anybody able to join?
  • Lucas Estevão
    Lucas Estevão
    Avenue Code
    It should start at 9 a.m. PST, I guess there was a confusion because of time changes in the US.
  • Nelly Ruehl
    Nelly Ruehl
    JPMorgan Chase
    Is this still happening? Zoom says "waiting for the host to start the meeting".

AI Generated Video Summary

En esta masterclass, exploramos GraphBase y GraphQL, centrándonos en el uso de Neon como conector y Postgres como base de datos. Aprendemos cómo configurar Neon y el conector Postgres, generar automáticamente un esquema GraphQL, y crear una API GraphQL con Neon. También profundizamos en el almacenamiento en caché en el borde, la extensión de las APIs GraphQL, y la integración con MongoDB, Contentful, y otros servicios de datos. Además, cubrimos la adición de reglas de API y seguridad con Click como proveedor de autenticación.

1. Introducción a Graphbase y GraphQL

Short description:

En esta parte, exploraremos Graphbase y GraphQL. Discutiremos los desafíos de usar múltiples herramientas y servicios en el ecosistema y cómo GraphQL puede proporcionar una API unificada. También abordaremos el problema de la latencia de datos e introduciremos el almacenamiento en caché de borde de GraphQL. Además, nos centraremos en el uso de una base de datos Postgres con NEON como conector y demostraremos cómo implementar globalmente utilizando trabajadores de CloudFlare.

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

2. GraphBase, Neon y el adaptador Postgres

Short description:

Una vez que hemos desplegado todo a nivel global, necesitamos entender cómo hacer consultas. Neon proporciona un panel de control y una base de datos que nos permite formar consultas GraphQL. Podemos crear cosas con mutaciones y buscar cosas con consultas, incluyendo argumentos de paginación. pathfinder.dev es una herramienta para ejecutar consultas GraphQL. GraphBase tiene como objetivo resolver el problema de consumir datos de diferentes servicios proporcionando una API unificada de GraphQL. También ofrece despliegue automático de versiones de API cuando se realizan cambios en la base de datos. Hoy, nos centraremos en Neon y el adaptador Postgres. Exploraremos brevemente la versión alojada, pero la mayor parte de nuestro trabajo se realizará localmente. GraphBase despliega puntos finales de GraphQL en todo el mundo, utilizando almacenamiento en caché en el borde y características como KVStorage para reducir la latencia. Cada cambio en el esquema se registra, y se pueden acceder a despliegues específicos para diferentes ramas o características.

de código abierto, por favor, échenle un vistazo si están interesados. Pero una vez que tenemos todo desplegado alrededor del mundo, necesitamos averiguar cómo consultarlo, ¿cómo se ve eso? Bueno, aquí podemos ver en el fondo una captura de pantalla de Neon. Voy a profundizar en esto en unos dos o tres minutos. Y vamos a ver ese panel de control y la database y más tablas y data que tenemos. Pero esa database nos permite formar consultas GraphQL. Podemos ver en la pantalla que tenemos una mutación para crear cosas. Luego tenemos una consulta para buscar cosas. Y podemos ver que tenemos algunos argumentos de paginación aquí para buscar los primeros o últimos o cualquier nodo que queramos de la database. Y todo eso se genera automáticamente, lo cual es bastante genial. Y sí, finalmente, pathfinder.dev es una forma de ejecutar estas consultas GraphQL. Esto no sólo funciona con Graphbase, sino que funciona con cualquier API GraphQL. Es una forma de ver y realizar solicitudes GraphQL similares a GraphiQL, si lo has usado antes. Y eso es lo que tenemos en la experiencia local y las versiones desplegadas de Graphbase. Así que creo que probablemente es una buena transición para hablar sobre Graphbase muy, muy rápidamente. Dándome las razones por las que creamos Graphbase y lo que estamos buscando resolver. Pero sólo como una visión general de alto nivel, GraphQL aquí, tenemos una consulta para buscar un producto por un slug. Y la idea, las cosas que podemos hacer realmente agradables e intuitivas para ustedes como desarrolladores es, podrían tener todas sus diferentes fuentes de data, como mencioné antes, repartidas en diferentes servicios. Y si quieren crear una consulta para cumplir con este requisito de tarjeta aquí, podemos obtener la imagen, el título, el precio, las variantes, lo que sea, de todos los diferentes servicios que están gestionando eso. Así que nos han dicho en los últimos años que es importante que tengamos diferentes servicios para hacer sus propias cosas individuales. Pero en realidad, consumir todo eso es en realidad un problema que creamos por eso. Y GraphQL es una forma realmente genial de resolver eso. Así que, sí, lo que GraphBase hará es, nos dará una API para llamar a esta consulta GraphQL. Desplegaremos eso. Siempre que crees una solicitud de extracción en tu trabajo y hagas cualquier cambio en tu database, desplegaremos una versión diferente de eso también, lo cual es genial. Genial. Así que, sí. Hola, y bienvenidos a todos los que se acaban de unir. Es genial tenerlos a todos aquí. Y como dije, por favor avísenme si tienen alguna pregunta. Así que, ahora hemos establecido la escena. Hemos hablado de los problemas y problemas que tenemos y por qué creamos un GraphBase. Para cualquiera que se acabe de unir, estamos buscando resolver estos dos cosas aquí. Muchas fuentes de data diferentes con una curva de aprendizaje diferente para cada herramienta que usamos y el problema de que todas estas cosas están desplegadas en todo el mundo y cuesta tanto porque tenemos que replicar eso para cada servicio individual. Creemos que podemos reunir todo eso bajo una API GraphQL. Y hoy, quiero pasar algún tiempo hablando sobre Neon y el adaptador Postgres que acabamos de crear. Así que, Graphis, cuando te conectas, si vas allí ahora y empiezas a crear cuentas, me conectaré a la mía y te mostraré brevemente cómo se ve la versión alojada. Pero todo lo que vamos a hacer hoy es básicamente algo en lo que trabajaremos localmente. Así que aquí, tenemos algunos proyectos diferentes. Si sólo voy a este proyecto aquí, podemos ver aquí, este es nuestro panel de control, tenemos nuestros puntos finales GraphQL. Y estos son los puntos finales que le decimos a Netlify, Versaille, Fly, donde sea que despliegues esto, este es mi punto final GraphQL. Y ese punto final está distribuido alrededor del mundo, desplegado en el borde, y tiene todo eso como almacenamiento en caché en el borde construido junto a él. Tenemos cosas como KVStorage, a las que puedes acceder todo en el borde también. La idea es reducir esa latencia tanto como podamos. Así que este es un proyecto que recibe bastante golpes de alguna herramienta que compara diferentes despliegues en el borde, pero es lo suficientemente bueno para mostrarte alrededor. Así que aquí tenemos todos los despliegues que cada vez que haces un cambio en el esquema, el esquema es algo que te mostraré en breve, pero cada cambio que haces, puedes entrar y ver, añadí esto, eliminé esto, añadí este campo, añadí este conector. Puedes ver exactamente lo que pasó y los registros de construcción para eso también. Y puedes ver exactamente quién hizo eso. Tienes acceso a los puntos finales individuales para ese despliegue específico también. Así que si creas una rama para añadir una nueva característica o lo que sea, obtienes un despliegue específico para esa API GraphQL. Y eso es un dolor que como configurar eso

3. Plataforma de Alojamiento Basada en Grafos

Short description:

En esta parte, exploramos la plataforma de alojamiento basada en grafos. Cubrimos características como buscadores, análisis y registros, que proporcionan información sobre la base de datos o los servicios conectados. También discutimos la facilidad de visualizar registros de solicitudes y errores en producción. Esta plataforma te permite especificar variables de entorno, gestionar claves de API y conectarte a repositorios. Ofrece la opción de volver a desplegar y revertir cambios si es necesario.

cosas de forma manual. Si no estás utilizando algo como GraphBase, es un poco doloroso. Así que buscamos construir eso para hacer una experiencia mucho mejor. Y como mencioné antes, en las diapositivas están los buscadores donde puedes explorar todo en la database o un servicio que estás utilizando que está conectado. Y luego los análisis, podemos ver aquí cómo se ven las cosas para tu servicio. Estamos empezando en la sección de análisis, pero hay una visión general bastante interesante de cómo están las cosas para ti y cómo se ve la data. Los registros también, hemos hecho que sea realmente fácil ver exactamente qué está pasando cuando haces solicitudes y errores en producción. Recientemente hemos implementado esto donde puedes ver todos los registros y cosas que están pasando. Así que eso es todo. Eso es realmente todo lo que quería mostrarte sobre la plataforma de alojamiento basada en grafos. Honestamente, esto no es algo en lo que pasarás mucho tiempo, pero aquí es donde especificarás tus variables de entorno y claves de API y obtendrás el repositorio al que está conectado también. Pero sí, en su mayor parte, probablemente pasarás tiempo en esta pantalla aquí y obtendrás tus claves de API y cosas de aquí, pero sí, si algo sale mal y quieres revertir algo, sabes, hay la opción de volver a desplegar cosas también. Así que tenemos todo eso

4. Introducción a GraphBase y GraphBase SDK

Short description:

Sumérjamonos en GraphBase. Ejecute el comando 'npx GraphBase' para inicializar un nuevo proyecto. Elija TypeScript para la configuración. Pasaremos tiempo en Neon y GraphBase. ¿Es GraphBase un módulo de nodo? Sí, lo es. Use 'npx graphbase init' para invocarlo. Cree algo desde cero utilizando el SDK basado en gráficos. Instale las dependencias necesarias.

cosas increíbles incorporadas. Pero sí, sumérjamonos en lo divertido. Como mencioné antes, hoy solo estoy usando una pantalla. No tengo mi configuración habitual. Así que por favor ten paciencia conmigo mientras salto entre cosas. Lo superaremos. Pero sí, haz cualquier pregunta si las tienes. Pregúntame cualquier cosa sobre GraphQL. Si eres nuevo en GraphQL. Me encantaría simplemente tener una idea de la audiencia sobre si eres nuevo o si has usado GraphQL antes. Incluso si has oído hablar de GraphBase, me encantaría saberlo también. Así que házmelo saber en el chat también.

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.

5. Configurando Neon y el Conector Postgres

Short description:

Pase el esquema como una G utilizando el patrón de constructor. Use un conector para agregar una nueva conexión a una base de datos. Regístrese en Neon, cree una base de datos y obtenga una cadena de conexión. Elija el conector Postgres, déle un nombre de Neon y establezca la url de neon como una variable de entorno. Ejecute mpx graph base dev para generar una API GraphQL.

Entonces, ahora que tenemos esto, ejecutemos export default config. Y luego voy a pasar el esquema como una G aquí. Estoy utilizando el patrón de constructor. Así que este constructor generador G es algo que podemos usar para hacer varias cosas. Ahora, mencioné antes, quiero usar un conector. Así que he desconectado una configuración aquí. Y luego lo que queremos hacer es invocar y agregar una nueva conexión a una database. No estoy usando Neon localmente, pero sí lo estoy. Me registré en Neon, creé una database, y luego obtienes una cadena de conexión. Veremos eso en aproximadamente un minuto o algo así. Pero sí, ve a neon.tech y crea una database. Si quieres seguir adelante, si solo quieres mirar, eso también está bien. Y podrías volver a reproducir esto y pausarlo más tarde. En algún momento también, pero sí, la mejor manera es simplemente ir a Neon. Es una plataforma serverless de Postgres alojada. Solo crea una database allí y obtienes una cadena de conexión. Acabo de crear una database con ellos y luego creé una tabla y agregué algo de contenido. Así que de vuelta aquí, voy a llamar a este conector Neon y luego voy a llamar conector, conector, si puedo deletrear conector.postgres. Ups, es posible que necesite instalar. Probemos esto. Podría estar usando una versión antigua aquí. Ahí vamos. Entonces sí, si ejecutas un NPS graph base init y no ves Postgres aquí, entonces necesitarás ejecutar NPM install solo para obtener esa última versión. Pero luego voy a elegir el conector postgres y le voy a dar un nombre de Neon. No necesitas darnos ningún... Es bueno darle un nombre. El nombre realmente no significa demasiado. Si no quieres que signifique nada, puedes deshabilitar ese nombre que se usa desde el espacio de nombres. Pero por defecto, Graphbase usará el espacio de nombres de la API de salida, lo cual es bastante genial. Y finalmente, todo lo que necesitamos hacer aquí es decirle que use una variable de entorno, así que simplemente voy a llamar a esto url de neon. Y luego vamos a colocar eso dentro de este archivo aquí. Así que hay url de neon voy a pegar dentro de aquí. Y tomaré esto de un ejemplo que tuve anteriormente, que está aquí. Lo pegaremos allí. No importa realmente. No podrías usar este si quisieras durante esta masterclass. Pero ya sabes, probablemente querrás usar tu propia cosa. Borraré esto después de la masterclass. Ahora que tenemos esa cadena de conexión establecida. Lo último que necesitamos hacer es ejecutar un G.dataSource, y luego podemos pasar en Neon. Y esa es la última pieza del rompecabezas. Probaría la última. Este es un conector muy nuevo que hemos creado. Así que yo imagino que está ejecutando la última versión de Postgres que soporta Neon. Entonces, sí, simplemente probaría la versión predeterminada. No estoy seguro de cuánto apoyamos otras versiones, porque todo lo que realmente hacemos es introspeccionar la database y crear una API para ti. Así que ahora que tenemos eso. Lo siguiente que hay que hacer, obtener mi pantalla, es ejecutar mpx graph base. Voy a etiquetar eso como lo último, porque creo que tengo una versión antigua instalada. Y luego voy a ejecutar dev. Eso va a mirar este archivo de configuración,

6. Generación Automática del Esquema GraphQL

Short description:

Los tipos se generan automáticamente y se crea un esquema para el servicio. El esquema GraphQL se genera a partir de la base de datos NEON. No es necesario instalar Express ni ningún plugin. Solo se necesita tener instalado Node.js y npm. La documentación de inicio rápido proporciona una guía paso a paso. El esquema GraphQL incluye tipos para las tablas de la base de datos y admite mutaciones por lotes. La consulta 'neon' es el espacio de nombres del adaptador de la base de datos. La consulta obtiene el primer usuario de la colección de usuarios utilizando la paginación basada en el cursor. La consulta se ejecuta en la base de datos en términos de SQL.

y va a generarme una API GraphQL. Y si prestas un poco de atención aquí, podemos ver que ha generado algunos tipos aquí. No he hecho nada. No he creado ningún tipo personalizado. No hay ningún esquema todavía. Pero esto muestra que las cosas han comenzado, y hay una carpeta oculta aquí, esquema. Y ha creado una especie de esquema que necesitamos para que el servicio funcione. Así que eso es todo lo que necesitamos. Luego necesitamos ir a Pathfinder en localhost puerto 4000. Y luego esto es lo genial. Tenemos un esquema GraphQL aquí que ha sido generado a partir de la base de datos NEON que tengo. Si voy al tipo de consulta, y vemos aquí tenemos una consulta NEON. Ahora vamos a buscar esa consulta NEON. Luego podemos ver que tenemos una consulta para obtener un único usuario NEON por un campo. Ese campo podría ser un ID o podría ser otro campo único restringido fila uh columna lo siento. Y luego tenemos una consulta de colección también. Y podemos ver aquí que tenemos paginación y ordenación aquí. Eso es algo que generamos automáticamente y manejamos por ti. Así que si has usado algún servicio que crea APIs GraphQL a partir de un esquema de base de datos, esto es todo lo que estamos haciendo en este punto, lo cual es bastante genial.

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.

7. API GraphQL con Base de Datos Neon

Short description:

Tenemos una API GraphQL basada en nuestra base de datos neon con capacidades de paginación, ordenación y filtrado. Neon es una oferta de Postgres y compite con PlanetScale, Hasura y posiblemente Apollo. GraphBase se centra en una experiencia local para la creación de APIs GraphQL sin instalaciones adicionales. Podemos buscar usuarios por ID o correo electrónico, y las mutaciones se generan automáticamente. Sin embargo, puede haber algunos problemas con la mutación en este nuevo conector.

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,

8. Creando Conectores y Configurando Reglas de Caché

Short description:

Exploraremos cómo crear un conector para una API y usar la API de TrevorBlades para obtener países. También aprenderemos cómo obtener datos de diferentes APIs y configurar reglas de caché para reducir la latencia. GraphBase tiene como objetivo resolver problemas de latencia proporcionando caché en el borde y reglas de caché. Al configurar las reglas de caché, podemos mejorar el rendimiento de nuestra API GraphQL y reducir la latencia de los datos.

haremos user create. Le pasaremos algo de input. Aquí obtendremos el nombre. Simplemente diremos test el correo electrónico es test.test.test.com. Esa vez funcionó. Podría ser que sea un problema de espacio de nombres. Haré una nota mental de eso y lo averiguaremos. Probablemente solo para eso.

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,

9. Caché en el borde y extensión de las APIs GraphQL

Short description:

El caché en el borde mejora la experiencia del usuario al almacenar datos en el punto de despliegue, reduciendo las consultas a la base de datos y el tiempo de resolución. Los cambios realizados en la base de datos se invalidan automáticamente en la caché de GraphQL. Las reglas de caché se pueden configurar por tipo, permitiendo tiempos de caché más largos para los datos que cambian con menos frecuencia. El caché reduce el tráfico a la base de datos de origen y ayuda a mantenerse dentro de los límites de la API. El caché es especialmente poderoso para los LLMs y OpenAI. Las bases de datos Postgres pueden ser utilizadas con GraphBase, y se está trabajando para soportar bases de datos no borde. GraphBase permite extender las APIs de GraphQL y unirlas. Se puede obtener una URL de Gravatar para los usuarios extendiendo el tipo de usuario neon y creando un archivo de resolución.

obtienes esos mismos números en producción también. Sí, es bastante genial. Es muy fácil simplemente agregar el caché en el borde aquí. Y donde sea que esto esté desplegado, esos data entonces se almacenan en ese punto. Así que tus usuarios, dondequiera que estén en el mundo, obtienen esos data. Todo está almacenado. Está replicado. Y esperamos que tus usuarios, tengan una mejor experiencia porque no tienen que ir a la database y esperar cada vez. Y a medida que añades más y más servicios, tarda más y más y más en resolver esas cosas tambié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.

10. Añadiendo Gravatar a la API GraphQL

Short description:

Podemos añadir Gravatar a la API GraphQL y personalizar las opciones. La respuesta se almacena en caché, lo que resulta en solicitudes posteriores más rápidas. Se pueden crear resolutores personalizados para consultas, mutaciones y campos. GraphBase puede detectar automáticamente los cambios y desplegarlos cuando el proyecto se compromete en GitHub. GraphBase admite varias bases de datos, incluyendo Postgres, MongoDB y OpenAPI.

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.

11. Uso de MongoDB y Contentful con GraphBase

Short description:

Aquí, exploramos ejemplos de uso de MongoDB y Contentful con GraphBase. Se utiliza MongoDB Atlas para conexiones MongoDB basadas en HTTP. Se pueden añadir restricciones a los documentos y se pueden adjuntar campos JSON como fuentes de datos. Contentful puede integrarse con GraphBase para ampliar su API y obtener datos adicionales. El conector OpenAPI de GraphBase permite la introspección y transformación de las especificaciones OpenAPI. La especificación concisa y restrictiva de GraphQL lo convierte en una herramienta poderosa para federar servicios. GraphBase permite extender campos en las consultas de Contentful y obtener datos externos. Los cambios realizados en las ramas de GitHub desencadenan automáticamente el despliegue en GraphBase.

Eso tiene Mongo en él. Sí, este es un ejemplo de Mongo. Aquí lo llamamos MongoDB. Le damos un nombre, pasamos todas las credenciales. De nuevo, esto es basado en HTTP, por lo que se está utilizando MongoDB Atlas para esto. Luego podemos crear esas restricciones alrededor de nuestros documentos. Así que podemos decir aquí, vamos a decir que esto es una dirección, como estos campos, y luego tenemos un usuario, que tiene una dirección, que tiene una referencia. Y podemos hacer cosas como campos JSON, darle el nombre de la colección, y luego adjuntarlo como una fuente de data, lo cual es bastante genial. Y sí, otro ejemplo aquí es Contentful. Hay una guía de ejemplo en el sitio web de Graphbase. Lo compartiré en el chat porque es bastante genial. Pero una cosa que vemos a muchos usuarios haciendo es añadiendo sus APIs GraphQL existentes, añadiendo caché en el borde, y luego extendiendo esas APIs con su código personalizado. Así que no importa qué API GraphQL estés usando, puedes simplemente añadirla a Graphbase, eliminar el espacio de nombres, y todo debería funcionar como de costumbre. Todo lo que necesitarías hacer es cambiar el punto final. Así que esta guía aquí, dejaré un enlace en el chat, OpenAPI funcionaría de manera similar a generar tipos a partir de una especificación OpenAPI. Sí, idea muy similar. Creo que lo más importante con OpenAPI es la especificación, puede ser tan fácilmente, rápidamente abusada. Y hemos visto esto generar en el conector, es que la gente intenta seguirlo, pero luego, no sé por qué pero la gente, yo mismo lo he hecho, creas una especificación, y es muy fácil simplemente no mencionar cosas en la especificación o no usar ciertos campos o claves, lo cual es totalmente válido por la especificación OpenAPI porque hay bastante ambigüedad y cosas opcionales que hace que sea realmente difícil confiar en esas cosas para crear la mejor experiencia. Así que tenemos un conector OpenAPI que puede introspeccionar la especificación OpenAPI, y hay una forma en la que puedes transformar eso también. Así que podrías decir, usa un nombre diferente, una convención de nombres basada en lo que tengas en la especificación, porque honestamente hay tantas cosas que simplemente se olvidan en esas especificaciones. Y lo que realmente me gusta de GraphQL es que es una especificación muy concisa, y es muy difícil abusar de ella. Me encanta la especificación por esa razón. GraphQL en sí es bastante genial. Creo que es una implementación realmente buena, y se encuentra en un espacio genial cuando se trata de federar todos tus diferentes servicios en una única API GraphQL. Eso es super poderoso, pero creo que la especificación en sí es muy buena. Es muy, muy buena porque es, como digo, muy, muy restrictiva en lo que puedes hacer. Pero sí, esto es lo que estaba hablando antes. Estamos usando Contentful. Creamos algunas cosas en Contentful para propiedades, y luego publicamos eso, luego creamos un backend GraphQL. Y luego esto es ... El concepto de esta guía es en realidad propiedades que pertenecen a Contentful. Quieres hacer una consulta para obtener esas, pero luego quieres obtener el clima actual sobre las propiedades dentro de Contentful. Ahora, Contentful no tiene idea sobre el clima y no puedes extender esa API, pero con GraphBase, somos capaces de añadir un proxy delante de Contentful que es capaz de extender un campo en una consulta de Contentful, lo cual es super genial y funciona localmente también. Luego simplemente usamos los valores de la consulta, pasamos nuestras claves de API a nuestra API del clima y luego devolvemos los data. Honestamente, esto es lo mejor. Me encanta este tipo de cosas con GraphBase. Así que, sí, hay muchos otros casos de uso. Mis resoluciones son un poco, pero mencioné la ramificación y la vista previa instantánea de la ramificación antes. Así que cualquier cambio que hagas y comprometas que hagas a tu rama con GitHub desplegará automáticamente una vista previa para ti. Así que, voy a mi panel de control ahora y simplemente vamos a este proyecto aquí. Si abro el repositorio de Git, si hago cualquier cambio a este repositorio, va a desplegar de nuevo este proyecto, lo cual es bastante genial. Y cualquier analítica, no habrá nada que suceda en este proyecto porque no se utiliza. Es solo una demostración. Así que, sí, cualquier cambio que hagas, puedes ver todos los diferentes tipos de cambios que se hicieron aquí, lo cual es bastante genial. Así que, sí, por favor, háganme saber si hay algún comentario. Probablemente terminaremos en unos ocho minutos o así. Pero solo quería usar el tiempo de hoy realmente para mostrar algunas de esas cosas dentro de GraphBase que puedes hacer. Volviendo a lo que estábamos hablando al principio, lo que hemos podido lograr en un espacio de tiempo muy corto en realidad es añadir diferentes fuentes de data. Y, sabes, como dije, esto podría ser un CMS, podría ser una API, enviar un SMS, comercio electrónico, o pagos o lo que sea. Cuando necesitas recuperar esos data o actualizar esos data o lo que sea, y quieres extender o cachear eso y hacerlo más rápido, ya no tienes

12. Integraciones y Ejemplos de GraphBase

Short description:

GraphBase ofrece integraciones con diferentes servicios de datos y te permite desplegar el tiempo de ejecución por ti mismo. La plataforma es de código abierto, incluyendo la CLI y las plantillas. GraphBase soporta varias bases de datos, como el almacenamiento KV, MongoDB y PlanetScale. Se proporcionan ejemplos de uso de GraphBase en proyectos, incluyendo la obtención de datos con resolvers y la creación manual de APIs GraphQL. La plataforma también ofrece ejemplos para React, Vue, Nuxt, Next, NextAuth y Click.

para ir y pagar para replicar data. Nosotros replicaremos eso por ti. Sí, es en base a caché, pero estamos trabajando en algunas integraciones bastante interesantes con diferentes servicios de data. Así que somos capaces de pensar tus data en el borde automáticamente. Así que si eso suena interesante, por favor avísanos. También tenemos Discord y cosas así. Así que si quieres unirte a eso y hacer cualquier pregunta, puedes ir a graphcase.com y también hay un enlace a Discord aquí.

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.

13. Añadiendo Reglas de API y Seguridad con Click

Short description:

En esta parte, exploramos cómo añadir reglas de API y seguridad a tu API GraphQL utilizando Click como el proveedor de autenticación. Al pasar un encabezado de autorización y un token, Click actúa como el proveedor de conexión de ID abierta y verifica el JWT. Si todo está en orden, se permite que la solicitud proceda a GraphBase. También puedes usar JWT y código/resolvers personalizados para mayor seguridad. Este ejemplo demuestra cómo configurar e implementar estas características.

Si quieres usar cosas como Next, NextAuth o Click. No hemos hablado de nuevo sobre ello porque hay tanto en el producto GraphQL que no lo hemos hecho. Es demasiado para repasar. Pero si miramos la configuración aquí, he especificado, este es un formato de configuración diferente por cierto, pero he especificado aquí que usamos Click como nuestro proveedor de autenticación. Y lo que esto hace es que añade una API, añade una especie de capa delante de GraphBase. Así que si pasas un encabezado de autorización y le pasas un token, utilizará Click como el proveedor de conexión de ID abierta. Mira esa especificación del proveedor para obtener la URL de donde debería comparar el JWT. Así que obtiene lo que llaman JWKS, y lo obtiene y luego mira y comprueba si todo está bien. Si todo está bien y Click dice, sí, estás bien, entonces permitimos la solicitud a GraphBase. Así que si quieres añadir reglas de API y security encima de tu API GraphQL, podrías usar Click, podrías usar JWT, podrías usar algún código personalizado y un resolver personalizado. Puedes hacer todo eso allí en este ejemplo aquí. ¿Eso te muestra cómo hacerlo? Así que sí. Si alguien está interesado en aprender más, como dije, por favor únete a nuestro Discord, haz cualquier pregunta. Si has disfrutado de este tipo de masterclass, sabes, nos encantaría escuchar tus comentarios. También estoy disponible en Twitter. Si alguien tiene alguna pregunta, simplemente dirígete a Twitter.com. Pregúntame cualquier cosa sobre GraphQL. Muchas gracias a todos los que se presentaron. Espero que todos los enlaces en el chat sean útiles. Y sí. Repite esto. Hay muchas otras masterclasses en el portal de Git Nation que son similares a esta que profundizan un poco más en el Conector GraphQL o en el Conector Mongo también. Así que sí, por favor avísame si tienes alguna pregunta.