El nuevo GraphiQL: Personalización al siguiente nivel

Rate this content
Bookmark

Lanzamos la próxima versión principal de GraphiQL a principios de este año! Repensamos por completo la experiencia con un enfoque particular en la personalización. No todos los usuarios y cada API tienen las mismas necesidades para un entorno de desarrollo integrado (IDE) de GraphQL, por lo que uno de nuestros grandes objetivos fue permitir que GraphiQL funcione para una gran variedad de casos de uso. Sumergámonos en los cambios de cómo llevamos la personalización al siguiente nivel y exploremos juntos cómo puedes hacer que GraphiQL sea tuyo.

This talk has been presented at GraphQL Galaxy 2022, check out the latest edition of this Tech Conference.

FAQ

GraphQL es una herramienta que permite a los desarrolladores interactuar y sumergirse en el desarrollo de APIs de una manera más eficiente. Ha sido fundamental desde su lanzamiento en 2015 por facilitar la exploración y el aprendizaje de nuevas APIs sin configuraciones complicadas.

La versión 2 de GraphQL incluye características como una API de complementos para personalización, un nuevo paquete llamado GraphQL React para crear IDEs personalizados y mejoras en la interfaz de usuario que facilitan la integración y personalización con productos específicos.

En la versión 2, se puede personalizar la interfaz de usuario reemplazando un conjunto de variables CSS para ajustar los estilos visuales. Además, se permite incorporar funcionalidades personalizadas como medidores de tiempo de carga de datos, mediante el uso de complementos y modificaciones en la función Fetcher.

La función Fetcher modificada permite medir el tiempo que tardan las solicitudes de datos y mostrar esta información directamente en la interfaz de usuario. Esto optimiza el proceso de depuración y mejora la interactividad sin necesidad de herramientas de desarrollo externas.

GraphQL puede ser integrado en un blog o página web utilizando el paquete GraphQL React, que facilita la gestión del estado y la configuración necesaria. Esto permite a los usuarios interactuar con el IDE de GraphQL directamente desde la página, mejorando la experiencia de aprendizaje y exploración.

Los futuros planes para GraphQL incluyen la incorporación de Monaco, un editor de código potente, y la mejora del Explorador Gráfico para una experiencia de construcción de consultas más intuitiva. Además, se prevé una expansión de la funcionalidad de los complementos para permitir aún más personalización en la interfacción con el IDE.

Thomas Heyenbrock
Thomas Heyenbrock
21 min
08 Dec, 2022

Comments

Sign in or register to post your comment.
Video Summary and Transcription
GraphQL tiene éxito debido a sus herramientas y personalización, pero los desarrolladores enfrentan desafíos como el aprendizaje, la sintaxis, la exploración de esquemas, la construcción de API, la visualización, la documentación y la colaboración. La versión 2 de GraphQL ha realizado mejoras significativas, incluyendo una API de complementos y bloques de construcción en GraphQL React. La personalización en GraphQL implica la anulación de variables CSS y la construcción de funcionalidades personalizadas utilizando complementos. La capacidad de incrustar un IDE de GraphQL en un blog permite a los usuarios interactuar directamente con los conceptos de GraphQL. En general, GraphQL continúa evolucionando y adaptándose a las cambiantes necesidades de su ecosistema.

1. Introducción a GraphQL y sus desafíos

Short description:

Bienvenidos a mi charla en GraphQL Galaxy. GraphQL tiene éxito debido a sus herramientas. Quiero hablar sobre GraphQL, su capacidad de personalización y llevarlo al siguiente nivel. Los problemas a los que se enfrentan los desarrolladores de GraphQL incluyen el aprendizaje, la sintaxis, la exploración del esquema, la construcción de APIs, la visualización, la documentación y la colaboración.

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.

2. Customizando GraphQL y su Evolución

Short description:

Rara vez trabajo solo en un proyecto, así que quiero compartir cualquier tipo de consultas que esté escribiendo con mis compañeros, tal vez también depurar, y quiero importar y exportar fácilmente todas las operaciones que estoy escribiendo entre diferentes herramientas que estoy usando. La versión 2 de GraphQL ha realizado mejoras significativas para abordar una amplia gama de problemas y brindar más flexibilidad. La adición de una API de complementos y la disponibilidad de bloques de construcción en GraphQL React facilitan la creación de IDE personalizados. GraphQL continúa evolucionando y adaptándose a las cambiantes necesidades de su creciente ecosistema. Ahora, sumerjámonos en una demostración para ver cómo puedes personalizar GraphQL y hacer que se integre perfectamente con tu propio producto.

esté escribiendo con mis compañeros, tal vez también depurar, y quiero importar y exportar fácilmente todas las operaciones que estoy escribiendo entre diferentes herramientas que estoy usando.

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.

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

De GraphQL Zero a GraphQL Hero con RedwoodJS
GraphQL Galaxy 2021GraphQL Galaxy 2021
32 min
De GraphQL Zero a GraphQL Hero con RedwoodJS
Top Content
Tom Pressenwurter introduces Redwood.js, a full stack app framework for building GraphQL APIs easily and maintainably. He demonstrates a Redwood.js application with a React-based front end and a Node.js API. Redwood.js offers a simplified folder structure and schema for organizing the application. It provides easy data manipulation and CRUD operations through GraphQL functions. Redwood.js allows for easy implementation of new queries and directives, including authentication and limiting access to data. It is a stable and production-ready framework that integrates well with other front-end technologies.
Estado Local y Caché del Servidor: Encontrando un Equilibrio
Vue.js London Live 2021Vue.js London Live 2021
24 min
Estado Local y Caché del Servidor: Encontrando un Equilibrio
Top Content
This Talk discusses handling local state in software development, particularly when dealing with asynchronous behavior and API requests. It explores the challenges of managing global state and the need for actions when handling server data. The Talk also highlights the issue of fetching data not in Vuex and the challenges of keeping data up-to-date in Vuex. It mentions alternative tools like Apollo Client and React Query for handling local state. The Talk concludes with a discussion on GitLab going public and the celebration that followed.
Baterías Incluidas Reimaginadas - El Resurgimiento de GraphQL Yoga
GraphQL Galaxy 2021GraphQL Galaxy 2021
33 min
Baterías Incluidas Reimaginadas - El Resurgimiento de GraphQL Yoga
Envelope is a powerful GraphQL plugin system that simplifies server development and allows for powerful plugin integration. It provides conformity for large corporations with multiple GraphQL servers and can be used with various frameworks. Envelope acts as the Babel of GraphQL, allowing the use of non-spec features. The Guild offers GraphQL Hive, a service similar to Apollo Studio, and encourages collaboration with other frameworks and languages.
Aplicaciones sólidas de React y GraphQL para personas con prisa
GraphQL Galaxy 2022GraphQL Galaxy 2022
29 min
Aplicaciones sólidas de React y GraphQL para personas con prisa
The Talk discusses the challenges and advancements in using GraphQL and React together. It introduces RedwoodJS, a framework that simplifies frontend-backend integration and provides features like code generation, scaffolding, and authentication. The Talk demonstrates how to set up a Redwood project, generate layouts and models, and perform CRUD operations. Redwood automates many GraphQL parts and provides an easy way for developers to get started with GraphQL. It also highlights the benefits of Redwood and suggests checking out RedwoodJS.com for more information.
Adoptando GraphQL en una Empresa
GraphQL Galaxy 2021GraphQL Galaxy 2021
32 min
Adoptando GraphQL en una Empresa
Today's Talk is about adopting GraphQL in an enterprise. It discusses the challenges of using REST APIs and the benefits of GraphQL. The Talk explores different approaches to adopting GraphQL, including coexistence with REST APIs. It emphasizes the power of GraphQL and provides tips for successful adoption. Overall, the Talk highlights the advantages of GraphQL in terms of efficiency, collaboration, and control over APIs.
Deja paso a los resolvers: un nuevo enfoque para la ejecución de GraphQL
GraphQL Galaxy 2022GraphQL Galaxy 2022
16 min
Deja paso a los resolvers: un nuevo enfoque para la ejecución de GraphQL
GraphQL has made a huge impact in the way we build client applications, websites, and mobile apps. Despite the dominance of resolvers, the GraphQL specification does not mandate their use. Introducing Graphast, a new project that compiles GraphQL operations into execution and output plans, providing advanced optimizations. In GraphFast, instead of resolvers, we have plan resolvers that deal with future data. Graphfast plan resolvers are short and efficient, supporting all features of modern GraphQL.

Workshops on related topic

Construye una aplicación WordPress sin cabeza con Next.js y WPGraphQL
React Summit 2022React Summit 2022
173 min
Construye una aplicación WordPress sin cabeza con Next.js y WPGraphQL
Top Content
WorkshopFree
Kellen Mace
Kellen Mace
En esta masterclass, aprenderás cómo construir una aplicación Next.js que utiliza Apollo Client para obtener datos de un backend de WordPress sin cabeza y usarlo para renderizar las páginas de tu aplicación. Aprenderás cuándo debes considerar una arquitectura de WordPress sin cabeza, cómo convertir un backend de WordPress en un servidor GraphQL, cómo componer consultas usando el IDE GraphiQL, cómo colocar fragmentos GraphQL con tus componentes, y más.
Construir con SvelteKit y GraphQL
GraphQL Galaxy 2021GraphQL Galaxy 2021
140 min
Construir con SvelteKit y GraphQL
Top Content
WorkshopFree
Scott Spence
Scott Spence
¿Alguna vez has pensado en construir algo que no requiera mucho código de plantilla con un tamaño de paquete pequeño? En esta masterclass, Scott Spence irá desde el hola mundo hasta cubrir el enrutamiento y el uso de endpoints en SvelteKit. Configurarás una API de GraphQL en el backend y luego usarás consultas de GraphQL con SvelteKit para mostrar los datos de la API de GraphQL. Construirás un proyecto rápido y seguro que utiliza las características de SvelteKit, y luego lo desplegarás como un sitio completamente estático. Este curso es para los curiosos de Svelte que no han tenido una experiencia extensa con SvelteKit y quieren una comprensión más profunda de cómo usarlo en aplicaciones prácticas.

Tabla de contenidos:
- Inicio e introducción a Svelte
- Inicializar el proyecto frontend
- Recorrido por el proyecto esqueleto de SvelteKit
- Configurar el proyecto backend
- Consultar datos con GraphQL
- Recuperación de datos en el frontend con GraphQL
- Estilización
- Directivas de Svelte
- Enrutamiento en SvelteKit
- Endpoints en SvelteKit
- Despliegue en Netlify
- Navegación
- Mutaciones en GraphCMS
- Envío de mutaciones GraphQL a través de SvelteKit
- Preguntas y respuestas
Modelado de Bases de Datos Relacionales para GraphQL
GraphQL Galaxy 2020GraphQL Galaxy 2020
106 min
Modelado de Bases de Datos Relacionales para GraphQL
Top Content
Workshop
Adron Hall
Adron Hall
En esta masterclass profundizaremos en el modelado de datos. Comenzaremos con una discusión sobre varios tipos de bases de datos y cómo se mapean a GraphQL. Una vez que se haya establecido esa base, el enfoque se desplazará a tipos específicos de bases de datos y cómo construir modelos de datos que funcionen mejor para GraphQL en varios escenarios.
Índice de contenidosParte 1 - Hora 1      a. Modelado de Datos de Bases de Datos Relacionales      b. Comparando Bases de Datos Relacionales y NoSQL      c. GraphQL con la Base de Datos en menteParte 2 - Hora 2      a. Diseño de Modelos de Datos Relacionales      b. Relación, Construcción de Tablas Multijoin      c. Complejidades de Consulta de Modelado de Datos Relacionales y GraphQL
Prerrequisitos      a. Herramienta de modelado de datos. El formador utilizará dbdiagram      b. Postgres, aunque no es necesario instalar esto localmente, ya que estaré utilizando una imagen de Dicker de Postgres, de Docker Hub para todos los ejemplos      c. Hasura
Construye y Despliega un Backend con Fastify y Platformatic
JSNation 2023JSNation 2023
104 min
Construye y Despliega un Backend con Fastify y Platformatic
WorkshopFree
Matteo Collina
Matteo Collina
Platformatic te permite desarrollar rápidamente APIs GraphQL y REST con un esfuerzo mínimo. La mejor parte es que también te permite aprovechar todo el potencial de Node.js y Fastify cuando lo necesites. Puedes personalizar completamente una aplicación de Platformatic escribiendo tus propias características y complementos adicionales. En el masterclass, cubriremos tanto nuestros módulos de código abierto como nuestra oferta en la nube:- Platformatic OSS (open-source software) — Herramientas y bibliotecas para construir rápidamente aplicaciones robustas con Node.js (https://oss.platformatic.dev/).- Platformatic Cloud (actualmente en beta) — Nuestra plataforma de alojamiento que incluye características como aplicaciones de vista previa, métricas integradas e integración con tu flujo de Git (https://platformatic.dev/).
En este masterclass aprenderás cómo desarrollar APIs con Fastify y desplegarlas en la nube de Platformatic.
Construyendo APIs GraphQL sobre Ethereum con The Graph
GraphQL Galaxy 2021GraphQL Galaxy 2021
48 min
Construyendo APIs GraphQL sobre Ethereum con The Graph
WorkshopFree
Nader Dabit
Nader Dabit
The Graph es un protocolo de indexación para consultar redes como Ethereum, IPFS y otras blockchains. Cualquiera puede construir y publicar APIs abiertas, llamadas subgrafos, para hacer que los datos sean fácilmente accesibles.

En este masterclass aprenderás cómo construir un subgrafo que indexa datos de blockchain de NFT del contrato inteligente Foundation. Desplegaremos la API y aprenderemos cómo realizar consultas para recuperar datos utilizando diferentes tipos de patrones de acceso a datos, implementando filtros y ordenamiento.

Al final del masterclass, deberías entender cómo construir y desplegar APIs de alto rendimiento en The Graph para indexar datos de cualquier contrato inteligente desplegado en Ethereum.
Problemas difíciles de GraphQL en Shopify
GraphQL Galaxy 2021GraphQL Galaxy 2021
164 min
Problemas difíciles de GraphQL en Shopify
WorkshopFree
Rebecca Friedman
Jonathan Baker
Alex Ackerman
Théo Ben Hassen
 Greg MacWilliam
5 authors
En Shopify a gran escala, resolvemos algunos problemas bastante difíciles. En este masterclass, cinco oradores diferentes describirán algunos de los desafíos que hemos enfrentado y cómo los hemos superado.

Tabla de contenidos:
1 - El infame problema "N+1": Jonathan Baker - Vamos a hablar sobre qué es, por qué es un problema y cómo Shopify lo maneja a gran escala en varios APIs de GraphQL.
2 - Contextualizando APIs de GraphQL: Alex Ackerman - Cómo y por qué decidimos usar directivas. Compartiré qué son las directivas, qué directivas están disponibles de forma predeterminada y cómo crear directivas personalizadas.
3 - Consultas de GraphQL más rápidas para clientes móviles: Theo Ben Hassen - A medida que tu aplicación móvil crece, también lo harán tus consultas de GraphQL. En esta charla, repasaré diversas estrategias para hacer que tus consultas sean más rápidas y efectivas.
4 - Construyendo el producto del futuro hoy: Greg MacWilliam - Cómo Shopify adopta las características futuras en el código actual.
5 - Gestión efectiva de APIs grandes: Rebecca Friedman - Tenemos miles de desarrolladores en Shopify. Veamos cómo estamos asegurando la calidad y consistencia de nuestras APIs de GraphQL con tantos colaboradores.