Baterías Incluidas Reimaginadas - El Resurgimiento de GraphQL Yoga

Rate this content
Bookmark

El Guild ha lanzado recientemente Envelop - un nuevo y moderno Framework de Servidor GraphQL y sistema de plugins. En esta charla compartiré una breve descripción de Envelop y por qué probablemente deberías actualizar tu servidor GraphQL existente a él.

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

FAQ

GraphQL Yoga es un marco de trabajo para servidores de GraphQL, que fue inicialmente desarrollado por Prisma. En su última versión, ha sido diseñado como un envoltorio con opiniones alrededor de Envelope, permitiendo disfrutar de todas las ventajas de Envelope pero facilitando su inicio y configuración. GraphQL Yoga incluye herramientas como soporte de suscripción de GraphQL, defer y stream, y una versión actualizada de GraphiQL.

Envelope es una solución desarrollada por The Guild para abordar limitaciones en el ecosistema de servidores GraphQL. Introduce un poderoso sistema de plugins que permite conectar y extender funcionalidades en cada paso del proceso de GraphQL, desde el parseo hasta la ejecución. Esto permite una flexibilidad mayor en la implementación y la posibilidad de compartir soluciones en forma de plugins dentro del ecosistema.

El sistema de plugins de Envelope permite resolver problemas comunes de forma centralizada y compartir esa solución en forma de plugins en todo el ecosistema. Esto implica que independientemente del servidor HTTP o el entorno de implementación, los servidores GraphQL pueden usar los mismos plugins, lo que facilita la estandarización y mejora la eficiencia del desarrollo.

The Guild desarrolla y mantiene una variedad de bibliotecas y herramientas para GraphQL, enfocándose en soluciones independientes pero integrables que abarcan desde la generación de código hasta la administración de esquemas y la prevención de cambios que rompan la funcionalidad. Prefieren mejorar o revivir bibliotecas existentes antes que desarrollar nuevas, a menos que sea absolutamente necesario.

Envelope fue creado para abordar problemas como la rigidez de los marcos de trabajo opinionados y poco mantenidos, y las dificultades de implementación en diferentes entornos. Proporciona una plataforma más flexible y menos dependiente de soluciones específicas, permitiendo a los desarrolladores conectar funcionalidades antes y después de cada paso de ejecución de GraphQL, y usar cualquier esquema deseado.

GraphQL Hive es un servicio desarrollado por The Guild que actúa como un registro de esquemas y ofrece capacidades como el seguimiento de solicitudes en vivo. Está diseñado para integrarse con Envelope y otros sistemas, proporcionando herramientas de monitoreo y optimización para aplicaciones GraphQL en producción.

Uri Goldshtein
Uri Goldshtein
33 min
09 Dec, 2021

Comments

Sign in or register to post your comment.
Video Summary and Transcription
Envelope es un poderoso sistema de plugins GraphQL que simplifica el desarrollo de servidores y permite una integración de plugins potente. Proporciona conformidad para grandes corporaciones con múltiples servidores GraphQL y se puede utilizar con varios frameworks. Envelope actúa como el Babel de GraphQL, permitiendo el uso de características no especificadas. El Guild ofrece GraphQL Hive, un servicio similar a Apollo Studio, y fomenta la colaboración con otros frameworks y lenguajes.

1. Introduction to Envelope and the Guild

Short description:

Hola a todos. Mi nombre es Uli y estoy muy emocionado de dar la primera charla magistral en GraphQL Galaxy. Hoy hablaré sobre Envelope, nuestro nuevo sistema de complementos GraphQL que deberías usar en tus servidores hoy. El Guild es el grupo de código abierto más grande en el ecosistema de GraphQL. Desarrollamos muchas bibliotecas que encajan en una gran visión.

usar en tus servidores hoy. Pero también, para esta charla, tengo una sorpresa como título secundario. Batteries Included Reimagined, el Renacimiento de GraphQL Yoga. Aquellos de ustedes que conocen el Guild y conocen GraphQL Yoga deberían emocionarse ahora. Hablaré un poco más sobre eso más adelante. Manténganse atentos.

El Guild es el grupo de código abierto más grande en el ecosistema de GraphQL. Desarrollamos muchas bibliotecas que encajan en una gran visión. Pero la idea es que cada biblioteca es individual. Algunos ejemplos son GraphQL Code Generator, GraphQL Tools y Sceva Stitching, GraphQL para básicamente tomar cualquier fuente como OpenAPI, Swagger, gRPC, SQL y generar APIs de GraphQL a partir de ellas. GraphQL Inspector para prevenir cambios que rompan, GraphQL Modules para distribuir el trabajo entre muchos equipos diferentes en la empresa, y muchos, muchos otros. Y la filosofía del Guild es que cada una de estas herramientas debe y se desarrolla de manera completamente independiente. No necesitas usar las otras herramientas para usar cualquiera de las herramientas aquí. Se ajustan a una gran plataforma, desde la base de datos y las fuentes de datos hasta el front-end. Pero no estás bloqueado a un proveedor. Puedes introducir gradualmente estas herramientas cuando realmente lo veas necesario. Además, parte de nuestra filosofía es no desarrollar herramientas que simplemente queremos desarrollar, sino solo herramientas que vemos como necesarias. Preferimos confiar en otras herramientas de código abierto y también contribuir a ellas. Pero cada vez que vemos que la biblioteca no se mantiene o no puede aceptar las cosas que necesitamos de ella, solo entonces creamos una nueva biblioteca. O lo que hacemos muchas veces es tomar bibliotecas sin mantenimiento y revivirlas.

Así que al comienzo de este año, vimos mucha necesidad en el ecosistema del servidor de GraphQL. Intentamos descubrir qué necesitamos y cómo podemos mejorarlo. Intentamos contribuir y tener conversaciones con los frameworks existentes en la comunidad. Y terminamos creando nuestra propia solución. Así que hoy quiero hablarles sobre Envelope. También deberías visitar el sitio web y echarle un vistazo allí. Pero hoy quiero comenzar realmente con cuál fue nuestra mentalidad cuando comenzamos a crear Envelope. Entonces, lo primero que nos preguntamos, al observar el ecosistema existente, fue qué necesitamos realmente de un servidor de GraphQL. Quiero decir, esta es una diapositiva que uso en muchas, muchas de mis charlas.

2. GraphQL JS y el Servidor GraphQL

Short description:

GraphQL JS es el núcleo del sistema, proporcionando funciones como validate, parse, execute y subscribe. Sin embargo, un servidor GraphQL necesita características adicionales como la creación de esquemas, integración de capa de comunicación y aspectos operativos como el almacenamiento en caché, el seguimiento, el registro, la seguridad y el manejo de errores. El ecosistema actual de servidores tiene problemas con los marcos de trabajo con opiniones y mantenimiento deficiente, lo que puede limitar la flexibilidad y las actualizaciones.

Básicamente, aquí vemos que un cliente realiza consultas a un servidor GraphQL, el servidor GraphQL luego realiza llamadas a todo tipo de fuentes y lugares, y el servidor me devuelve un resultado, orquestando todas las llamadas y enviándome un resultado como espero. Esto es algo que todos conocemos. ¿Cuál es el mecanismo aquí y qué necesitamos de él?

Entonces, el núcleo de esto es GraphQL JS en sí, la implementación de referencia y la implementación de referencia. En realidad, si miramos el código interno, básicamente expone un par de funciones para nosotros. Validate, parse, execute y subscribe. Validate se encarga de validar el esquema y la consulta para asegurarse de que sea un esquema y una consulta válidos. Parse analiza la consulta como AST y la comprende, convirtiéndola en un documento que podemos ejecutar. Y luego la función execute en sí misma, de la cual he dado muchas charlas sobre cómo se ve por dentro. Esta es como una diapositiva de seudocódigo sobre lo que realmente sucede dentro de la función execute, es decir, la función execute recibe el esquema ejecutable y la consulta, y luego realiza toda la orquestación y el trabajo de automatización para obtener el resultado correcto en la forma que queremos, orquestando todo lo que sucede con las llamadas de red o los resolvers. Eso es básicamente la función execute y GraphQL JS. Esas son las cosas que GraphQL JS nos brinda. Pero luego está el servidor. ¿Qué son las cosas adicionales que GraphQL JS no nos brinda y que necesitamos de un servidor GraphQL?

Una cosa es la creación del esquema en sí. GraphQL JS tiene su propia forma de crear el esquema, pero la comunidad realmente se ha diversificado y ha creado muchas soluciones diferentes para crear un esquema, como el enfoque SDL-first, el enfoque code-first con herramientas como Nexus o GraphQL, que es muy emocionante y vale la pena explorar, y muchas otras. Entonces, quieres crear tu propio esquema de muchas maneras diferentes. La otra cosa que necesitamos para conectar GraphQL JS es en realidad la capa de comunicación. Necesitamos conectarlo a un servidor HTTP, tal vez trabajar con WebSockets y tal vez queremos implementarlo en un entorno serverless y necesitamos todo tipo de restricciones y cosas allí. Y queremos que nuestro servidor GraphQL se encargue de eso por nosotros. Y hay muchas, muchas cosas diferentes en torno a la operación de este servidor GraphQL, como el almacenamiento en caché y el rendimiento, el seguimiento, el registro, la seguridad y la autenticación, y un buen manejo de errores. Y, por supuesto, queremos que el servidor GraphQL tenga un ecosistema próspero. Queremos que las personas puedan crear muchas soluciones diferentes en el servicio GraphQL para que podamos usarlo en cualquiera de nuestros casos de uso y no depender de un solo caso de uso que sea lo único que necesitamos para nuestro servidor. Una vez que descubrimos eso, observamos el panorama actual y esta es una diapositiva muy opinada. Puedes discutir con nosotros, me encantaría. Pero creemos que el ecosistema actual de servidores tiene algunos problemas. En primer lugar, los marcos de trabajo más populares actualmente son muy opinionados y a veces no están bien mantenidos. Y creo que la combinación de estos dos es muy problemática. En primer lugar, ser muy opinionado significa que te ajustas a ciertos tipos de casos de uso, generalmente casos de uso simples, y porque quieres obtener mucha comunidad y cosas así. Pero luego, si combinas eso con una biblioteca mal mantenida, significa que ahora tus usuarios no pueden cambiar las cosas y no pueden mantenerse actualizados. Juntos, esta es una situación muy problemática. Y esto es algo con lo que nos enfrentamos mucho cuando trabajamos con nuestros clientes.

QnA

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

Simplificando los Componentes del Servidor
React Advanced 2023React Advanced 2023
27 min
Simplificando los Componentes del Servidor
Top Content
React server components simplify server-side rendering and provide a mental model of components as pure functions. Using React as a library for server components allows for building a basic RSC server and connecting it to an SSR server. RSC responses are serialized virtual DOM that offload code from the client and handle interactivity. The client manifest maps serialized placeholders to real components on the client, enabling dynamic rendering. Server components combine the best of classic web development and progressive enhancement, offering the advantage of moving logic from the client to the server.
Explorando los fundamentos de los Componentes del Servidor React
React Day Berlin 2023React Day Berlin 2023
21 min
Explorando los fundamentos de los Componentes del Servidor React
Top Content
This Talk introduces React Server Components (RSC) and explores their serialization process. It compares RSC to traditional server-side rendering (SSR) and explains how RSC handles promises and integrates client components. The Talk also discusses the RSC manifest and deserialization process. The speaker then introduces the Waku framework, which supports bundling, server, routing, and SSR. The future plans for Waku include integration with client state management libraries.
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.
Y Ahora Entiendes los Componentes del Servidor React
React Summit 2024React Summit 2024
27 min
Y Ahora Entiendes los Componentes del Servidor React
Top Content
In this Talk, Kent C. Dodds introduces React Server Components (RSCs) and demonstrates how to build them from scratch. He explains the process of integrating RSCs with the UI, switching to RSC and streaming for improved performance, and the benefits of using RSCs with async components. Dodds also discusses enhancements with streaming and server context, client support and loaders, server component rendering and module resolution, handling UI updates and rendering, handling back buttons and caching, and concludes with further resources for diving deeper into the topic.
Una Guía Práctica para Migrar a Componentes de Servidor
React Advanced 2023React Advanced 2023
28 min
Una Guía Práctica para Migrar a Componentes de Servidor
Top Content
React query version five is live and we'll be discussing the migration process to server components using Next.js and React Query. The process involves planning, preparing, and setting up server components, migrating pages, adding layouts, and moving components to the server. We'll also explore the benefits of server components such as reducing JavaScript shipping, enabling powerful caching, and leveraging the features of the app router. Additionally, we'll cover topics like handling authentication, rendering in server components, and the impact on server load and costs.

Workshops on related topic

Construir con SvelteKit y GraphQL
GraphQL Galaxy 2021GraphQL Galaxy 2021
140 min
Construir con SvelteKit y GraphQL
Top Content
Featured 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
Construye Aplicaciones Modernas Utilizando GraphQL y Javascript
Node Congress 2024Node Congress 2024
152 min
Construye Aplicaciones Modernas Utilizando GraphQL y Javascript
Featured Workshop
Emanuel Scirlet
Miguel Henriques
2 authors
Ven y aprende cómo puedes potenciar tus aplicaciones modernas y seguras utilizando GraphQL y Javascript. En este masterclass construiremos una API de GraphQL y demostraremos los beneficios del lenguaje de consulta para APIs y los casos de uso para los que es adecuado. Se requiere conocimiento básico de Javascript.
Seguridad de tipo de extremo a extremo con React, GraphQL y Prisma
React Advanced 2022React Advanced 2022
95 min
Seguridad de tipo de extremo a extremo con React, GraphQL y Prisma
Featured WorkshopFree
Sabin Adams
Sabin Adams
En este masterclass, obtendrás una visión de primera mano de lo que es la seguridad de tipo de extremo a extremo y por qué es importante. Para lograr esto, construirás una API de GraphQL utilizando herramientas modernas y relevantes que serán consumidas por un cliente de React.
Prerrequisitos: - Node.js instalado en tu máquina (12.2.X / 14.X)- Se recomienda (pero no es obligatorio) utilizar VS Code para las tareas prácticas- Un IDE instalado (se recomienda VSCode)- (Bueno tener) *Un conocimiento básico de Node.js, React y TypeScript
GraphQL para Desarrolladores de React
GraphQL Galaxy 2022GraphQL Galaxy 2022
112 min
GraphQL para Desarrolladores de React
Featured Workshop
Roy Derks
Roy Derks
Hay muchas ventajas en utilizar GraphQL como fuente de datos para el desarrollo frontend, en comparación con las API REST. Nosotros, los desarrolladores, por ejemplo, necesitamos escribir mucho código imperativo para recuperar datos y mostrarlos en nuestras aplicaciones y manejar el estado. Con GraphQL, no solo puedes reducir la cantidad de código necesario para la obtención de datos y la gestión del estado, sino que también obtendrás una mayor flexibilidad, mejor rendimiento y, sobre todo, una mejor experiencia de desarrollo. En este masterclass aprenderás cómo GraphQL puede mejorar tu trabajo como desarrollador frontend y cómo manejar GraphQL en tu aplicación frontend de React.
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.
Next.js 13: Estrategias de Obtención de Datos
React Day Berlin 2022React Day Berlin 2022
53 min
Next.js 13: Estrategias de Obtención de Datos
Top Content
WorkshopFree
Alice De Mauro
Alice De Mauro
- Introducción- Prerrequisitos para la masterclass- Estrategias de obtención: fundamentos- Estrategias de obtención – práctica: API de obtención, caché (estática VS dinámica), revalidar, suspense (obtención de datos en paralelo)- Prueba tu construcción y sírvela en Vercel- Futuro: Componentes de servidor VS Componentes de cliente- Huevo de pascua de la masterclass (no relacionado con el tema, destacando la accesibilidad)- Conclusión