El nuevo GraphiQL: Personalización al siguiente nivel

Hola a todos. Bienvenidos a mi charla en GraphQL Galaxy. Espero que estén disfrutando de una conferencia increíble hasta ahora, disfrutando de muchas otras charlas interesantes y espero tener otra interesante para ustedes ahora. Y quiero comenzar con una pregunta para ustedes. ¿Por qué creen que GraphQL tiene tanto éxito?

Ahora, estoy grabando esta charla, por lo que no puedo obtener su respuesta de inmediato, pero siéntanse libres de dejar sus respuestas, comentarios, preguntas, lo que sea, en el chat, y veamos si podemos entablar una conversación. Y les daré mi respuesta. Creo que GraphQL tiene tanto éxito debido a sus herramientas. Y una herramienta en particular que ya pueden ver en la pantalla y de la que quiero hablar es GraphQL.

GraphQL ha estado presente desde el lanzamiento de GraphQL en 2015. Y hasta el día de hoy, es el portal para mí como desarrollador de GraphQL para interactuar y sumergirme en GraphQL. Ha habido mucho desarrollo en torno a GraphQL en el último año, y eso es de lo que quiero hablarles hoy. Y en particular, quiero centrarme en la capacidad de personalización y cómo pueden llevar GraphQL al siguiente nivel.

Datos rápidos sobre mí. Mi nombre es Thomas, trabajo en Stellate en otras cosas geniales de GraphQL, y soy uno de los mantenedores de GraphQL. Pero basta de hablar de mí. Vamos directo al tema. Y quiero comenzar con el por qué. ¿Por qué existe GraphQL? Reformulemos esto a cuáles son en realidad los problemas a los que se enfrentan los desarrolladores de GraphQL. Antes de hablar sobre cualquier tipo de soluciones como GraphQL.

Si recién estoy comenzando, una gran cosa que debo hacer es simplemente aprender. Necesito aprender qué es realmente GraphQL. ¿Cómo funciona su sintaxis? ¿Qué es un esquema de GraphQL, explorar un esquema de primera mano y tener ese primer momento de éxito de enviar una solicitud de GraphQL y obtener una respuesta y ver ambas cosas lado a lado? Una vez que aprendo GraphQL, comprendo el concepto, entonces quiero poner manos a la obra. Comienzo a desarrollar y construir mi primera API de GraphQL. Esto implica mucha iteración y pruebas de consultas a medida que avanzo y depuración si algo no funciona como espero.

GraphQL ya contiene la palabra Graph en su nombre y un Grafo es algo que se puede representar de manera visual donde puedo explorar, en este caso, es el esquema de Graph QL y cómo se relacionan los diferentes tipos entre sí. Pero no solo se trata del esquema, también de los datos que la API me devuelve. Dependiendo de la semántica de la API, estos datos pueden tener cierto significado, como por ejemplo, datos de geolocalización, que puedo visualizar de una manera muy específica. También se trata mucho de la documentación. Si estoy construyendo mi propia API y quiero que otros la usen, necesito documentarla. Y quiero que esta documentación sea inmersiva, donde las personas puedan sumergirse en la documentación, leer sobre los significados y el funcionamiento de mi API. Y escribir allí, siendo capaces de comenzar a escribir consultas y probarlas, teniendo estos espacios de prueba interactivos incrustados donde pueden comenzar sin salir nunca de la documentación. Y también quiero colaborar.

En resumen, un gran conjunto de problemas. Veamos dónde encaja GraphQL como solución a estos problemas. Comencemos con la versión inicial, la versión 1 de GraphQL, que se lanzó en 2015. Esta versión se centró realmente en la parte de aprendizaje, exploración y desarrollo, y lo hizo de manera excelente. De hecho, en mi opinión, es una de las principales razones por las que GraphQL despegó y tuvo tanto éxito en primer lugar. Porque teníamos esta herramienta, GraphQL, al alcance de nuestras manos, donde podíamos comenzar a explorar y jugar con GraphQL sin necesidad de configurar o instalar nada. Solo ábrelo en una ventana del navegador y listo.

Los otros puntos, algunos de ellos podrían requerir algunos esfuerzos adicionales, pero claramente había margen para mejoras. De hecho, a principios de este año lanzamos la siguiente versión principal, la versión 2 de GraphQL, y también analizamos estos problemas y decidimos que GraphQL debía resolver una gama más amplia de problemas y ser más flexible. Entonces, ¿qué hicimos? Por ejemplo, agregamos una API de complementos, por lo que ahora todos pueden escribir fácilmente sus propios complementos de GraphQL, lo que les permite interactuar con GraphQL, con su interfaz de usuario, y también renderizar componentes adicionales directamente en la interfaz de usuario que se adapten a su API específica y a sus casos de uso específicos. También refactorizamos GraphQL y lo dividimos en sus partes individuales y pusimos todos estos bloques de construcción disponibles en un nuevo paquete llamado GraphQL React. Y utilizando estos bloques de construcción, ahora es más fácil que nunca tomar algunos de estos componentes, unirlos y crear tu propio IDE personalizado que se puede integrar fácilmente en tus productos o sitios web. Por supuesto, la versión dos no es el final del camino para GraphQL. Habrá más cosas en el futuro y queremos resolver una gama aún más amplia de casos de uso y mejorarlo aún más, pero más sobre eso más adelante. Volviendo a lo que estoy tratando de decir aquí, GraphQL ha experimentado un crecimiento inmenso en los últimos años. Y cada año hay nuevas herramientas y nuevos productos que ingresan al panorama. Y creo que GraphQL como herramienta no debe centrarse solo en lo que hizo muy bien hace algunos años. GraphQL también debe evolucionar junto con GraphQL y su ecosistema.

Ahora viene la parte emocionante porque ahora quiero mostrarte en realidad qué significa todo esto y cómo puedes personalizar GraphQL. Y para esto, preparé una demostración. Configuré una aplicación React muy simple, que en este momento solo representa GraphQL. Ve el componente de la aplicación como mi punto de entrada aquí y simplemente representa el componente GraphQL. Y si lo veo en mi navegador, veré GraphQL versión 2, la nueva versión que también presenta un nuevo diseño, pero esencialmente es lo que conoces y amas. Si ingresamos una consulta en el lado izquierdo, también podemos formatearla y ejecutarla, y obtendremos nuestros datos en el lado derecho. Increíble. Así que personalicemos esto. Lo primero, tal vez, o al menos espero que así sea para ti, es que esto se vea visualmente atractivo, pero por lo general quiero que se integre con mi propio producto. No quiero usar los colores que veo aquí. Quiero usar mis propios colores de marca.

En la versión uno, esto habría sido bastante complicado de hacer porque todos los estilos estaban dispersos en diferentes hojas de estilo y usábamos el mismo color en varios lugares. Pero con la versión dos, hemos extraído todo esto en variables CSS. Así que lo único que necesito hacer ahora es básicamente anular un conjunto de variables de color, lo cual estoy haciendo aquí. Si guardo esto y vuelvo, entonces aquí lo tenemos, GraphQL con un aspecto completamente nuevo. Tan fácil como eso.

Pero la apariencia es solo una parte de la personalización. Tal vez la parte más importante sea la funcionalidad. Quiero mostrarte un ejemplo de cómo podemos construir nuestra propia funcionalidad personalizada directamente en GraphQL. El ejemplo que tengo en mente es el tiempo de carga de los datos. Si ejecuto una solicitud, veo que se está cargando durante algún tiempo, y luego veo los datos y quiero saber cuánto tiempo realmente tarda esto. Podría abrir mis herramientas de desarrollo y la pestaña de red y enviar una solicitud y luego ver, ok, esto tardó 285 milisegundos, pero esto es tedioso. Tengo que saltar entre las herramientas de desarrollo y GraphQL. Quiero construir esto directamente en mi interfaz de usuario. Hagámoslo.

Lo primero es la llamada función Fetcher. La función Fetcher es una función que realiza una solicitud de GraphQL, obviamente, y actualmente estamos utilizando esta utilidad llamada createGraphQLFetcher, que nos permite simplemente pasar un punto final y nos devuelve esta función. Muy fácil. Pero para nuestros propósitos, en realidad queremos personalizar esto ahora, porque queremos medir cuánto tiempo tarda la solicitud de recuperación. Ya preparé una pequeña reescritura, donde básicamente tomamos lo que hace esta función createGraphQLFetcher y lo expandimos, básicamente. Escribimos manualmente esta función, y se ve algo así. Recibimos dos argumentos, los parámetros de GraphQL, que es básicamente solo un cuerpo que enviamos con la solicitud, y un objeto de opciones, que en particular contiene los encabezados que puedes agregar en la interfaz de usuario de GraphQL aquí abajo. Y lo que hacemos simplemente es enviar una solicitud de recuperación y luego devolver los datos como JSON. Voy a guardar eso rápidamente y podemos ver que en realidad todo sigue funcionando como se esperaba. Con eso, podemos comenzar a obtener información de tiempo, y voy a usar algunas marcas de tiempo usando dateNow. Y para demostrarte que esto funciona, voy a imprimir esto en la consola. Así que si abro mi consola ahora, veo que cada vez que hago una solicitud obtengo la información de tiempo a la derecha. Increíble. Pero de nuevo, no quiero tener esto en mis herramientas de desarrollo, quiero tener esto en la interfaz de usuario. ¿Cómo lo conseguimos? Vamos a usar complementos. Los complementos son las cosas que ves en el lado izquierdo aquí.

Hay dos complementos incorporados, los documentos y el historial, pero puedes crear fácilmente tu propio complemento. Así que hagamos esto y también preparemos esto nuevamente. Un complemento es básicamente solo un objeto. Podemos usar el tipo de complemento gráfico del paquete gráfico React que mencioné antes para asegurarnos de implementarlo correctamente. Solo tiene tres propiedades, un título, que es solo una cadena. Un icono, que es un componente React, que renderizará el icono aquí al lado. Voy a usar un icono muy genérico para esto. Y contenido, que es otro componente React, que renderizará el contenido aquí en el panel del complemento.

Así que todo lo que tenemos que hacer es tomar este complemento y pasarlo como una propiedad a GraphQL, guardar esto, volver y veremos aquí que tenemos un nuevo icono y un nuevo complemento. Y es tan fácil como eso. Ahora todo lo que necesitamos básicamente es mostrar la información de tiempo aquí. Así que queremos tener algún tipo de variable de tiempo que queremos mostrar aquí. Y en realidad vamos a usar solo un contexto React simple para consumir estos datos. Y esto ahora se está ejecutando rápidamente al crear esto. Agregando el contexto, luego también renderizando el proveedor, por supuesto, para que pueda consumir el contexto. También necesito pasar su valor. Y vamos a almacenar este valor en el estado e importarlo. Y ahora todo lo que tenemos que hacer en lugar de registrar esto, en realidad, lo que queremos hacer es establecer el tiempo aquí. Pero para poder hacer eso, tenemos que mover la función Fetcher dentro del componente. Una cosa que voy a agregar aquí es un gancho de devolución de llamada para preservar la identidad de la función entre las representaciones. Y vamos a guardar eso. Regresando, y ahora si envío una consulta y abro mi complemento, puedo ver que obtengo mi información de tiempo directamente dentro de mi interfaz de usuario cada vez que envío una solicitud. Muy bueno.

Y hay una cosa más que quiero mostrarte ahora. Hablé anteriormente sobre cómo incrustar GraphQL en una página. Y también preparé una demostración para esto. Digamos, imagina que tienes tu blog aquí, donde escribes sobre cosas increíbles de GraphQL, y ahora quiero permitir a mis lectores que, justo dentro de mi blog, prueben los conceptos sobre los que estoy escribiendo. Así que lo que quiero tener es un increíble IDE de GraphQL incrustado dentro de mi blog.

Así que, hagámoslo. Y esta es la configuración. Solo un texto de lorem ipsum aleatorio. Y voy a eliminar esta caja gris. Y también voy a renderizar el proveedor de GraphQL. Esto viene, nuevamente, del paquete gráfico react. Y esto configurará toda la gestión del estado que es necesaria para que GraphQL funcione correctamente. Vamos a pasarle un fetcher nuevamente, que es lo mismo que hemos visto antes. Y también le estamos pasando una consulta, que es solo una consulta con la que creemos que tiene sentido que el usuario comience en el ejemplo.

Y luego estamos renderizando nuestro increíble componente GraphQL. Y es nuevamente, un componente muy simple, ignora las diferencias que ves aquí, son solo para el diseño y los estilos. Así que eso no es demasiado importante. Las partes importantes son, estamos usando un componente llamado editor de consultas y un componente llamado editor de respuestas. Ambos también nos son proporcionados por gráfico react. Y la única otra cosa que necesitamos, o que queremos tener, es que también queremos mostrar un indicador de carga cuando la consulta se está cargando. Y para eso, podemos consumir fácilmente uno de los contextos que gráfico usa para gestionar su estado. Y en este caso, queremos usar el contexto de ejecución, y simplemente podemos usar el gancho de igual nombre de gráfico react para acceder a este contexto cuando ingreses el contexto como una propiedad llamada isFetching. Y si esto es verdadero, vamos a mostrar un spinner. Así que guardemos esto y volvamos. Y aquí estamos. Aquí tenemos nuestro pequeño gráfico incrustado. Puedo presionar comando y enter y mi consulta se está cargando. Viste el spinner de carga. Y por supuesto, no es estático, así que todavía puedo escribir y editar mi consulta como en un gráfico de arranque, solo que más pequeño e incrustado. Increíble.

Esto es todo, esto concluye la demostración. Esto es todo lo que quería mostrar, así que volvamos a las diapositivas. Y estoy agradecido de que haya funcionado como lo hizo y espero que también lo hayas disfrutado y hayas aprendido algo nuevo.

Mencioné anteriormente que la versión dos no es el final del camino. Entonces también quiero decirte, ¿qué quiero decir con eso? ¿Qué estamos buscando para futuras versiones de GraphQL? La primera cosa en esta lista es Monaco, que es el editor de código que también alimenta a VS Code. Actualmente, GraphQL utiliza un editor de código diferente, pero queremos introducir Monaco por varias razones. Tiene una experiencia de edición más familiar ya que VS Code es uno de los IDE más utilizados para programar. Es más accesible y esperamos que nos brinde un pequeño impulso de rendimiento.

Volviendo a la personalización, Monaco también tiene algunas características muy interesantes para personalizar la experiencia del editor. Para mostrarte un ejemplo, esto es algo que hemos construido en Stellate, que es un estimador de complejidad de consultas. Aquí puedes ver a la izquierda mientras escribo mi consulta, hemos insertado estas pequeñas cajas grises que muestran exactamente qué complejidad se agrega por un determinado campo, lo cual es muy útil si estás trabajando en algo como la limitación de velocidad gráfica.

Lo siguiente en mi lista es el Explorador Gráfico. Es posible que conozcas el Explorador OneGraph, que también ha estado presente en GraphQL v1. Hemos adaptado esto para que coincida con el diseño de v2, pero queremos ir más allá. Queremos realmente construir esta experiencia intuitiva de construcción de consultas en Graphical. Y quiero dar un reconocimiento a Jonathan, uno de los mantenedores de Graphical, que está explorando y reduciendo los riesgos de este esfuerzo, e incluso ha construido su propio prototipo para probar y validar las ideas que tenemos, como puedes ver a la izquierda aquí con el conocido generador de consultas visuales.

Y lo último que quiero mencionar nuevamente son los plugins, porque nos encantan los plugins, creemos que los plugins son el camino a seguir para permitir aún más personalización. Y al mirar la estructura de la interfaz de usuario de Graphical, ya has presenciado el panel de plugins en el lado izquierdo, que utilizamos en la demostración. Pero en realidad hay aún más lugares donde los plugins tienen sentido. Por ejemplo, debajo del editor de consultas o debajo del editor de respuestas y pensando en nuestra demostración y el plugin que construimos para el tiempo, hubiera sido quizás más sensato colocarlo debajo de la respuesta para ubicar mejor el tiempo junto a la respuesta real.

Muy bien, ¿cómo puedes tomar acción? ¿Qué puedes hacer ahora después de escuchar esta charla? Puedes instalar GraphQL versión 2. Ha estado disponible durante algunos meses. Tiene todas las nuevas características que has visto aquí hoy, incluido el nuevo diseño renovado. También puedes construir tu propio IDE como lo hicimos en la demostración utilizando el paquete GraphQL React. Si quieres una referencia de cómo usar este paquete, simplemente puedes mirar el código fuente de GraphQL de hecho, que utiliza GraphQL React en su núcleo. Si tienes alguna pregunta, puedes encontrarnos en Discord en el canal oficial de GraphQL. Tenemos un canal de GraphQL allí y si notas algo que no funciona o tienes algunas ideas para mejorar, no dudes en abrir un problema en nuestro repositorio de GitHub.

Y con eso, todo lo que me queda por decir es muchas gracias por asistir a mi charla. Espero que lo hayas disfrutado, hayas aprendido algo nuevo. Si quieres encontrarme, puedes encontrarme en Twitter, puedes encontrarme en GitHub o también en Sted8 donde estoy trabajando en cosas de GraphQL. Y con eso, espero que tengas un buen resto de la conferencia y nos vemos por ahí.