GraphQL Code Generator v3: ¡generar tipos GraphQL nunca ha sido tan fácil!

This ad is not shown to multipass and full ticket holders
React Summit US
React Summit US 2025
November 18 - 21, 2025
New York, US & Online
The biggest React conference in the US
Learn More
In partnership with Focus Reactive
Upcoming event
React Summit US 2025
React Summit US 2025
November 18 - 21, 2025. New York, US & Online
Learn more
Bookmark
Rate this content

GraphQL Code Generator v3 trae la forma más fácil y liviana de obtener GraphQL con tipos en tus front-ends solo generando tipos. En esta charla, veremos que generar tipos GraphQL nunca ha sido tan fácil.

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

FAQ

GraphQL Code Generator es una herramienta creada para generar tipos de esquema y tipos de TypeScript inicialmente, y posteriormente ha sido ampliada para soportar otros lenguajes y generar tipos de operaciones para backend y frontend.

Las nuevas características incluyen la generación de hooks y SDKs, mejoras en la configuración de tipos con TypeScript, y la introducción de Type Document Node y Cliente Preset para mejorar la experiencia de desarrollo con tipos más ligeros y operaciones GraphQL más ajustadas.

Type Document Node es un experimento en GraphQL Code Generator que busca tipificar las operaciones de GraphQL sin usar hooks, utilizando un superset del objeto DocumentNode, mejorando la integración con clientes de GraphQL y verificación de tipos.

El Cliente Preset es una nueva característica de GraphQL Code Generator que permite implementar consultas GraphQL con Apollo Client sin necesidad de importar tipos o documentos, generando una función GraphQL que devuelve el tipo de nodo de documento adecuado.

El fragment masking permite representar las dependencias de datos de los componentes de manera co-ubicada, evitando la filtración de datos entre componentes y facilitando una interfaz de usuario más resistente al uso diferido en el futuro.

Inicialmente, GraphQL Code Generator se centró en generar tipos simples de TypeScript. Con el tiempo, amplió su soporte a otros lenguajes y comenzó a generar hooks y SDKs, además de adoptar un enfoque específico inspirado en los hooks de React.

La versión 3 de GraphQL Code Generator está diseñada para mejorar la experiencia del desarrollador con tipos más ligeros, generar solo los tipos necesarios para las operaciones y soportar características modernas de GraphQL como diferentes transmisiones.

Charly Poly
Charly Poly
22 min
08 Dec, 2022

Comments

Sign in or register to post your comment.
Video Summary and Transcription
¡Hola a todos! Hoy hablaré sobre el futuro de GraphQL Code Generator y las nuevas características que mejoran la experiencia del desarrollador. Code Gen ha evolucionado significativamente desde su creación en 2016, desde generar tipos simples hasta hooks y ahora a una nueva característica. Se ha expandido para admitir múltiples lenguajes y complementos específicos del framework. Code Gen se utiliza ampliamente en el stack de GraphQL, con 7 millones de descargas mensuales en NPM. Las nuevas características incluyen Type Document Node, que permite escribir operaciones GraphQL sin hooks, y el Client Preset, una versión mejorada de Type Document Node. El Client Preset proporciona una experiencia de desarrollo perfecta al generar la función GraphQL que devuelve el tipo de nodo de documento adecuado a tu variable. Otra característica interesante es el enmascaramiento de fragmentos, que simplifica el uso de fragmentos en GraphQL y permite una mejor comprensión de las dependencias de datos dentro del árbol de componentes.

1. Introducción a GraphQL Code Generator

Short description:

¡Hola a todos! Hoy hablaré sobre el futuro de GraphQL Code Generator y las nuevas características que mejoran la experiencia del desarrollador. Code Gen ha evolucionado significativamente desde su creación en 2016, desde la generación de tipos simples hasta hooks y ahora una nueva característica. Se ha expandido para admitir múltiples lenguajes y complementos específicos de frameworks. Code Gen se utiliza ampliamente en el stack de GraphQL, con 7 millones de descargas mensuales en NPM.

¡Hola a todos y gracias por estar aquí! Estoy feliz de estar aquí para hablar sobre el futuro de GraphQL Code Generator y las nuevas características que hemos agregado recientemente que brindan una experiencia de desarrollo completamente nueva. Así que empecemos. Mi nombre es Charlie. He estado trabajando a tiempo completo en Code Gen durante los últimos seis meses y especialmente en la característica que voy a presentar hoy y en la hoja de ruta próxima para Code Gen. Entonces, antes de ver esta nueva experiencia de desarrollo que Code Gen está trayendo, echemos un vistazo a la historia de Code Gen y cómo pasamos de generar tipos simples a hooks y a la nueva característica que veremos hoy. Code Gen se creó en 2016 para generar inicialmente tipos de esquema, tipos simples de TypeScript y luego, un poco más tarde, en el mismo año, generar tipos de operaciones, tanto para el backend como para el frontend. Pero la primera versión de Code Gen, antes de la 1.0, solo generaba tipos simples de TypeScript. Luego, un poco más tarde, Code Gen comenzó a admitir la generación de tipos para muchos tipos de lenguajes más allá de TypeScript y JavaScript, como Java, C Sharp, pero también Kotlin, etcétera. Y un poco más tarde, nuevamente, debido a la alta demanda en el frontend, Code Gen comenzó a generar complementos específicos del framework, como Apollo Client, Yorkle, Vue, Angular, y así sucesivamente. Code Gen, en la actualidad, es bastante famoso y está presente en la mayoría del stack de GraphQL, especialmente en el lado del cliente, con 7 millones de descargas al mes en NPM.

2. Type Document Node y sus Beneficios

Short description:

Code Gen se utiliza ampliamente en el lado del cliente, especialmente para el stack de TypeScript, y en el lado del servidor con cualquier tipo de implementación de servidor GraphQL. Si bien los hooks y SDK generados son populares, tienen limitaciones como la replicación de cambios de firma y un número exponencial de opciones. Estas desventajas llevaron al experimento llamado Type Document Node, que permite tipificar las operaciones de GraphQL sin usar hooks. Type Document Node ofrece una integración perfecta con los clientes, ofreciendo verificación de tipos en variables y resultados. Es compatible con varios clientes de GraphQL en el ecosistema de TypeScript.

Y si observamos el uso popular, Code Gen es muy famoso en el lado del cliente, especialmente para el stack de TypeScript, pero también en el lado del servidor, con el stack de TypeScript, pero cualquier tipo de implementación de servidor GraphQL. Y si nos acercamos al lado del cliente, porque este es el tema de hoy, vamos a hablar sobre una nueva experiencia en el lado del cliente, vemos que, en la actualidad, la gente está muy, muy contenta con los hooks y SDK generados.

Entonces, si bien los hooks y SDK generados son muy famosos, dimos un paso atrás y también analizamos las desventajas que vienen con este enfoque en particular. En primer lugar, la limitación de los hooks y SDK generados por Code Gen es la replicación de cambios de firma. Dado que Code Gen ahora es responsable de envolver muchas bibliotecas en el lado del cliente, como React, Query, Apollo, tu llamada en React, pero tu llamada en Vue, Apple Angular, etc. Todas esas bibliotecas tienen su propia vida y cambian con bastante frecuencia y ofrecen diferentes opciones.

Por lo tanto, debemos asegurarnos de que cada vez que envolvemos una biblioteca, estamos proporcionando acceso a las opciones específicas subyacentes de cada biblioteca y estamos alineados con las diferentes versiones principales. Esto lleva a muchas solicitudes de extracción, problemas de implementación que a veces son impulsados por la comunidad y no siguen la evolución de las bibliotecas envueltas. El segundo punto es el número exponencial de opciones. Code Gen en sí mismo tiene muchas opciones para adaptarlo más, hacerlo más configurable y asegurarse de que se ajuste bien a su uso de TypeScript en su stack de GraphQL. Pero dado que estamos envolviendo bibliotecas existentes y debe ser flexible, cada complemento obtiene su propio conjunto de opciones además de las docenas de opciones que ofrecen los paquetes principales de Code Gen. Esto dificulta mucho a largo plazo asegurarse de que cada nueva opción introducida sea compatible con la existente y que la actualización o el cambio de comportamiento de las opciones existentes no traiga nada en ningún tipo de complemento que comience a divergir entre sí. Y finalmente, el último punto es el impacto en el tamaño del paquete.

Estamos en una nueva era de aplicaciones web y de front-end donde el rendimiento del paquete y el impacto en el ancho de banda son muy importantes. Y Code Gen, al generar envoltorios como SDK, pero especialmente al generar hooks, está generando todo este código solo para asegurarse de que reenviamos los tipos correctamente y verificamos los tipos de las variables. Por lo tanto, todas estas versiones llevaron a un experimento muy específico que se llama Type Document Node.

Type Document Node es un experimento que comenzó en 2020 y comenzó con una pregunta simple. ¿Qué pasaría si pudiéramos tipificar las operaciones de GraphQL sin usar hooks? ¿Qué pasaría si pudiéramos ofrecer la misma increíble experiencia de desarrollo que a todos les gusta alrededor del uso de hooks que son similares a React pero sin generar realmente hooks y usando solo tipos?

Entonces, esta es una consulta a la izquierda que devuelve una tasa, por ejemplo, para un producto, en una moneda determinada. A la derecha, este es el código que se genera mediante CodeGen cuando se utiliza el complemento TypeDocumentNode. Como puedes ver, es muy similar a los primeros días de CodeGen. Muy similar a lo que generan los complementos TypeScript y TypeScript operations. La única diferencia es que aquí usamos un TypeDocumentNode y TypeDocumentNode es un superset del objeto DocumentNode y del tipo de la biblioteca GraphQL.js y TypeDocumentNode, a diferencia de DocumentNode, está correctamente tipado al llevar el tipo de la consulta y el tipo de las variables. Y esto permite tener una integración perfecta con tu cliente. Aquí, en este ejemplo, puedes ver que simplemente importamos nuestro documento, como lo haces en cualquier aplicación, importas tu documento y lo pasas directamente a la consulta de uso de Apollo. Y de inmediato, obtienes verificación de tipos en la variable y obtienes el tipo de resultado. Entonces aquí, los datos están correctamente tipados con el tipo de consulta correcto de TypeScript operations y lo mismo con las subpropiedades. Esto ha sido posible porque Dotan y otras personas de la comunidad han estado trabajando muy duro para asegurarse de que TypeDocumentNode, esta nueva versión de tipo de DocumentNode de GraphQL.js, sea compatible con todos los clientes de GraphQL en el ecosistema de TypeScript.

A lo largo de los años, todo el trabajo realizado condujo a una integración perfecta en el ecosistema de front-end de GraphQL y TypeScript. Ya puedes usar TypeDocumentNode con Apollo Client, ReoCall, Preact, React Query, incluso en VR. Y también puedes usarlo en Svelte, Vue, etcétera.

3. Introducción al Cliente Preset

Short description:

CodeGen ha evolucionado para generar más que tipos y ahora presenta el Cliente Preset, una versión mejorada de Type Document Node. Desarrollado como un experimento por Lauren de la Guild, ofrece una nueva experiencia para los desarrolladores.

Entonces aquí podemos ver que la visión que trajo es que primero se creó CodeGen para, ya sabes, generar tipos de TypeScript y luego se agregó soporte para otros lenguajes, lo cual sigue siendo cierto hoy en día. Pero luego comenzó a tener un enfoque muy específico inspirado en los hooks de React para generar una mejor y, ya sabes, brindar una mejor experiencia para los desarrolladores al generar más que tipos y generar código. Y ahora estamos cerrando el ciclo con una nueva experiencia para los desarrolladores que te mostraré ahora mismo. Y esto no es Type Document Node. Type Document Node es una forma estable de usarlo, pero ahora estamos trayendo una versión mejorada de Type Document Node que fue desarrollada primero como un experimento por Lauren de la Guild y ahora se ha lanzado como un complemento estable de CodeGen. Y esta nueva característica se llama el Cliente Preset.

4. Implementación de Consultas GraphQL con Apollo Client

Short description:

Esta es una implementación de consulta GraphQL con Apollo Client que utiliza el nuevo Cliente Preset. Proporciona una experiencia perfecta para los desarrolladores al generar la función GraphQL que devuelve el tipo de nodo de documento adecuado a tu variable. Esta integración con Apollo Client y otros clientes garantiza datos con tipos y variables verificadas. El impacto en el paquete es mínimo, ya que solo se genera una función y todos los tipos se eliminan en tiempo de ejecución. El complemento de Babel puede reducir aún más el impacto a cero.

Esta es una implementación de consulta GraphQL con Apollo Client que utiliza el nuevo Cliente Preset, la nueva experiencia para los desarrolladores de CodeGen. Aquí puedes ver que no importamos ningún tipo, no importamos ningún documento, lo único que importamos es la función GraphQL que ha sido generada para ti por CodeGen de la misma manera que importas GQL cuando estás usando Urql o Apollo Client. Y lo que sucede aquí es que esta función GraphQL que te proporcionamos va a devolver el tipo de nodo de documento adecuado a tu variable, dependiendo de la consulta que le pases. Lo que significa que, como se muestra aquí con ese nodo de documento, simplemente usando esta función GraphQL para definir tu operación, esta variable de documento va a tener un tipo, va a llevar el tipo de la consulta y la variable, y está perfectamente integrada con Apollo Client y todos los demás clientes, como se muestra. Entonces tus datos van a tener tipos y tus variables van a ser verificadas. Lo bueno de este enfoque es que ya no necesitas importar documentos o tipos. Cuando usas GraphQL en modo de observación, tus operaciones GraphQL se tipifican a medida que escribes, y finalmente el impacto en el paquete es muy ligero porque aquí solo estamos generando una función que se utiliza en todas partes y no estamos generando un gancho por consulta y solo estamos generando tipos. Entonces, todos los tipos se eliminan en tiempo de ejecución y lo único que queda es en realidad la consulta GraphQL. Si realmente quieres tener un impacto en el paquete de cero con este nuevo cliente preset, puedes usar el complemento de Babel que proporcionamos y que está documentado, que eliminará la función GraphQL en tiempo de ejecución, lo que significa que tendrás una experiencia de operación con tipos de extremo a extremo sin ningún impacto en el tiempo de ejecución.

5. Fragment Masking en Codegen

Short description:

Discutamos fragment masking, una nueva función en Codegen que tiene como objetivo simplificar el uso de fragmentos en GraphQL. Fragment masking es un concepto introducido por el equipo de Relay, que sugiere usar fragmentos para representar las diferentes vistas de nuestra aplicación, es decir, los componentes. Cada fragmento debe representar los datos utilizados por un componente específico. Esto permite una mejor comprensión de las dependencias de datos dentro del árbol de componentes. Tomemos un ejemplo concreto para ilustrar este concepto. Tenemos una aplicación ficticia con una consulta de documento y un fragmento de vista de documento. El componente principal realiza la consulta y utiliza los ajustes preestablecidos del cliente para verificar inmediatamente cualquier error de etiqueta. Los datos específicos de este fragmento se extraen utilizando una función especial generada por GraphQL code gen.

Entonces, hablemos ahora de otra cosa que está siendo introducida por el cliente preset, que es el fragment masking. En el Guild y en todos los proyectos que mantenemos, tratamos de llevar las mejores prácticas al ecosistema y no solo lo que creemos que es lo mejor para nosotros. Estamos tratando de mostrarles cuál es la mejor manera de trabajar con GraphQL en términos de manejo de errores y también de tipificación. Y aquí, el fragment masking no es una práctica muy conocida en el ecosistema de GraphQL y creemos que debería recibir más atención y reconocimiento del ecosistema. Por lo tanto, esta nueva función de Codegen está tratando de brindarte una forma de usar el fragment masking de manera muy sencilla. Así que hablemos de los fragmentos en GraphQL. La mayoría de nosotros usamos fragmentos para descomponer las consultas en modelos de datos. Básicamente, tomamos un tipo y creamos subtipos del tipo existente para poder usarlos en nuestros componentes, etc. La cuestión es que al hacerlo, aquí realmente no sabemos, tenemos una interfaz de usuario a la derecha que muestra un documento y el título es parte del componente principal, pero el acini es un componente y las etiquetas también son un componente independiente, y aquí, al mirar la consulta, no está muy claro qué parte de los datos va a ser utilizada por qué componente. Lo que dificulta saber qué datos utiliza un componente simplemente mirando un componente sin ver todo el árbol de componentes o al menos mirar el componente principal que carga los datos. Esto es exactamente lo que ofrece el fragment masking. El fragment masking es un concepto introducido por el equipo de Relay, el creador inicial de GraphQL, que dice que los fragmentos no deben usarse para descomponer las consultas en modelos de datos. Deberíamos usar fragmentos para representar las diferentes vistas de nuestra aplicación y, por vistas, nos referimos a componentes. Entonces, cada fragmento debe representar qué datos utiliza un componente. Pongamos eso en práctica. Aquí tenemos la misma consulta pero la hemos cambiado. Dado que tenemos un componente para el documento, vamos a crear un fragmento superior para nuestro componente principal y este componente principal solo necesita el título y el id para las diferentes acciones. Entonces, aquí el fragmento principal para la vista del documento va a tener el título, luego el asignado, y este componente está instanciando dos componentes, uno para el asignado y otro para las etiquetas, por lo que vamos a tener dos fragmentos que realmente expresan cuáles son las dependencias de datos de nuestro componente secundario. Sí, tenemos la vista del documento que instancia el asignado, mostramos el título, instanciamos el asignado y las etiquetas, y cada subcomponente tiene su propio fragmento que está colocado junto con el componente en sí. Veamos un ejemplo concreto porque es muy teórico. Aquí tenemos nuestros ajustes preestablecidos del cliente con una nueva configuración de TypeScript de CodeJam, tenemos un esquema que es local porque este es un ejemplo, obtenemos todos los documentos de TypeScript y usamos un nuevo cliente preestablecido. Aquí tenemos nuestra aplicación, que es una aplicación ficticia con solo el propósito de mostrar el concepto de fragment masking. Aquí tenemos nuestra consulta de documento, nuestro fragmento de vista de documento porque estamos en los componentes de documento. Y aquí, dado que este es el componente principal, será el que realice la consulta. Hacemos la consulta y, como te dije, aquí con los ajustes preestablecidos del cliente, obtenemos la verificación de etiquetas de inmediato. Aquí se queja de que el número no se está asignando correctamente a una cadena. Y como puedes ver, no estamos importando ningún tipo de documento o tipo. Solo estamos importando la función GraphQL en todas partes. Luego decimos, está bien, estamos en la vista del documento, por lo que usamos una función especial expuesta generada por GraphQL code gen para extraer los datos.

6. Fragment Masking y Dependencia de Datos del Componente

Short description:

El fragment masking permite expresar la dependencia de datos del componente de manera co-ubicada, evitando la filtración de datos entre componentes y haciendo que la interfaz de usuario sea resistente al uso diferido en el futuro.

que es específico de este fragmento. Que es el fragmento de nuestro componente superior. Que es un fragmento de vista de documento. Y aquí en la vista de documento obtenemos todos los data a los que este componente debería tener acceso. Por lo tanto, este componente no puede acceder a los data del componente hijo. Solo accede a los data de su propio fragmento, que son el id y el título. Si bajamos, vemos que pasamos la vista de documento al componente hijo. Y aquí, por ejemplo, echemos un vistazo a las etiquetas. Entonces aquí tenemos co-ubicación. Aquí queda muy claro que este componente obtiene estos data. Obtiene un subconjunto de data en el tipo de documento del esquema. Obtiene la categoría, la fecha de creación y el estado. Aquí puedes ver que solo obtengo los data que necesito... en realidad necesito, ya sabes, para mostrar todo lo relacionado con las etiquetas. Y lo mismo ocurre con Ascini. Entonces, ¿por qué es interesante el fragment masking? Primero, te ayuda a expresar la dependencia de datos del componente de manera co-ubicada. Ahora no tienes fragmentos que representen submodelos en el front-end. En realidad, representa los data y esto es para lo que se ha creado GraphQL, para ser muy declarativo acerca de la dependencia de datos en general, no solo a nivel de consulta, sino también a nivel de componente. Evita la filtración de datos entre componentes. Te aseguras de que si un componente es responsable de una cosa, que es mostrar el título, no tenga acceso a otros tipos de data, lo que podría llevar a una implementación incorrecta. Y lo bueno es que si comienzas a hacer eso, si comienzas a definir fragmentos para describir componentes, estás haciendo que tu interfaz de usuario sea resistente al uso diferido en el futuro. Y no estoy hablando de eso hoy, pero ya puedes comenzar a usar defer si estás usando Apollo con Apollo Router, pero también si estás usando Apollo o Yocl con GraphQL Yoga o la biblioteca del servidor GraphQL. Ok, ahora hablemos del futuro de CodeGen. Como acabamos de ver, estamos en proceso de trabajar en la versión 3 de CodeGen. El primer paso ha sido mejorar la developer experience con este ajuste preestablecido del cliente, como acabamos de ver, que funciona con tipos de impacto ligero o sin impacto si usas el complemento de paquete, y te brinda una operación GraphQL muy ajustada mientras escribes. Luego movimos todos los demás complementos existentes, como la generación de hooks, la generación de SDK, a un repositorio de complementos de la community, donde toda la community podrá mantenerlos por sí misma, utilizando el propietario del código de GitHub, y asegurándonos de que la community pueda seguir creciendo por sí misma con nuestra ayuda, pero sin que nosotros seamos un obstáculo para avanzar en todos esos complementos. Además, todos estos tres primeros puntos ya están sucediendo. Ahora mismo, como acabo de mostrar, puedes usar una configuración de CodeGen en TypeScript y obtener una configuración de tipo, por lo que esto te brinda una experiencia superior porque ahora, si cometes un error tipográfico en tu configuración, tendrás un error de TypeScript y tendrás autocompletado de TypeScript. En los próximos meses vamos a comenzar a reescribir el núcleo de CodeGen, el paquete principal, para tener más performance, un monitoreo más inteligente y generar menos tipos, para generar solo los tipos que se utilizan en la operación. Y finalmente, planeamos introducir soporte para características modernas de GraphQL, como diferentes transmisiones y otros RFC en la actualización. Estamos esperando tus comentarios y necesitamos tus comentarios sobre esta propuesta de hoja de ruta y esta hoja de ruta en la que estamos comenzando a iterar. Hay un problema dedicado a eso que está fijado en la parte superior de los problemas en el repositorio principal de CodeGen de GraphQL, por lo que estamos esperando tus comentarios y estamos construyendo esta versión 3 contigo. Como acabo de decir, esta presentación fue sobre GraphQL Code Gen, el Guild está haciendo muchas cosas en el ecosistema de GraphQL, estamos construyendo nuestra propia biblioteca de puerta de enlace con GraphQL Mesh, nuestra propia implementación de servidor GraphQL que ofrece muchas características para API modernas, especialmente una API de GraphQL a prueba de futuro, con Envelope, todavía tenemos GraphQL module, GraphQL Scalar, acabamos de lanzar nuestro primer SaaS de registro de GraphQL, que es de código abierto, GraphQL Hive. Puedes ir a nuestro blog, tenemos muchos artículos que publicamos con mucha frecuencia, y especialmente tenemos algunos artículos que explican en detalle este concepto de fragment masking. ¡Muchas gracias!

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
Workshop
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
Workshop
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
Construir y Desplegar un Backend Con Fastify & Platformatic
JSNation 2023JSNation 2023
104 min
Construir y Desplegar un Backend Con Fastify & Platformatic
Top Content
WorkshopFree
Matteo Collina
Matteo Collina
Platformatic te permite desarrollar rápidamente GraphQL y REST APIs con un esfuerzo mínimo. La mejor parte es que también te permite desatar todo el potencial de Node.js y Fastify siempre que lo necesites. Puedes personalizar completamente una aplicación de Platformatic escribiendo tus propias características y plugins adicionales. En la masterclass, cubriremos tanto nuestros módulos de Open Source 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 esta masterclass aprenderás cómo desarrollar APIs con Fastify y desplegarlas en la Platformatic Cloud.
Construyendo APIs GraphQL sobre Ethereum con The Graph
GraphQL Galaxy 2021GraphQL Galaxy 2021
48 min
Construyendo APIs GraphQL sobre Ethereum con The Graph
Workshop
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
Workshop
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.