Cómo Cachear en el Borde las APIs de GraphQL

Rate this content
Bookmark

Durante años, no poder cachear GraphQL se consideraba una de sus principales desventajas en comparación con las APIs RESTful. Ya no más. GraphCDN hace posible cachear casi cualquier API de GraphQL en el borde, y no solo eso, sino que nuestra caché es aún más inteligente que cualquier caché RESTful podría ser. Sumergámonos en los entresijos de GraphCDN para descubrir cómo exactamente logramos que esto suceda.

This talk has been presented at React Advanced 2021, check out the latest edition of this React Conference.

FAQ

GraphQL es una tecnología para construir APIs que permite obtener datos específicos desde el servidor. Fue crucial para Spectrum porque permitió construir una API de forma rápida y eficiente, manejando las actualizaciones en tiempo real de manera muy efectiva, lo cual era fundamental dada la naturaleza de tiempo real de la plataforma de chat de Spectrum.

Uno de los mayores desafíos fue la elección de una base de datos que no escalaba adecuadamente, lo que significaba que no podía manejar adecuadamente las conexiones de actualización en tiempo real necesarias para la plataforma, causando caídas frecuentes del servidor.

El problema de la base de datos no se resolvió fácilmente debido a que la base de datos utilizada traía su propio ORM, lo que complicaba cambiar a otra base de datos. Spectrum enfrentó problemas significativos de escalabilidad y estabilidad debido a esta elección inicial.

Un cliente de GraphQL, como Apollo o Urql, gestiona las solicitudes y las respuestas entre el cliente y el servidor, implementando una caché inteligente en el navegador. Este enfoque fue explorado para ser utilizado en el servidor para mejorar el rendimiento y la eficiencia, almacenando respuestas comunes y reduciendo la carga en los servidores.

Spectrum utilizó la técnica de caché en el borde, lo que significa almacenar datos en caché más cerca del usuario final en servidores distribuidos globalmente, reduciendo así el tráfico y la carga en el servidor central y mejorando la experiencia del usuario debido a la menor latencia.

Antes de la adquisición, GitHub contrató a una empresa de seguridad para realizar pruebas exhaustivas en los sistemas de Spectrum. El resultado fue positivo, indicando que no se encontraron grandes brechas de seguridad, lo que fue un momento de orgullo para el equipo de Spectrum, destacando la eficacia de su implementación de GraphQL.

GraphCDN es una solución de caché en el borde para GraphQL, diseñada para manejar problemas similares a los que enfrentó Spectrum, pero a una escala mayor. Surgió como una respuesta a las dificultades encontradas en Spectrum para manejar grandes volúmenes de tráfico y datos en tiempo real.

Max Stoiber
Max Stoiber
29 min
22 Oct, 2021

Comments

Sign in or register to post your comment.
Video Summary and Transcription
El orador habla sobre su experiencia con el caché en el borde de las APIs de GraphQL, comenzando con las dificultades que enfrentaron con una mala elección de base de datos. Encontraron éxito con GraphQL, lo que ayudó a escalar sus servidores y llevó a una adquisición por parte de GitHub. El orador profundiza en la pieza clave que permite el caché de GraphQL, el metafield __typename. También abordan los desafíos del caché en el borde, incluyendo la autorización y la purga global de la caché. El orador comparte una historia de éxito con GraphCDN y menciona el desafío continuo de manejar la caché para listas con paginación.
Available in English: How to Edge Cache GraphQL APIs

1. Introducción a la Caché en el Borde de las APIs de GraphQL

Short description:

Gracias por esa encantadora introducción. Estoy muy contento de estar de vuelta y emocionado de estar aquí hoy y hablarles sobre la caché en el borde de las APIs de GraphQL.

Gracias por esa encantadora introducción. Al igual que todos los oradores aquí y supongo que también todos ustedes, esto se siente absolutamente surrealista. Estar parado frente a personas reales, mirando sus rostros. Esto es increíble. Me encanta. Estoy muy contento de estar de vuelta y emocionado de estar aquí. Amo Londres. De hecho, conseguí mi primer trabajo aquí hace mucho tiempo. Solía vivir en Londres durante un par de meses e hice una pasantía aquí. Esta ciudad tiene un lugar especial en mi corazón y estoy muy emocionado de estar aquí hoy y hablarles sobre la caché en el borde de las APIs de GraphQL.

2. La historia de Spectrum y la base de datos en tiempo real

Short description:

Ya tuve una introducción muy encantadora, así que puedo omitir un poco de eso, pero si quieres seguirme en cualquier lugar de Internet, mi nombre de usuario es mxsdbr, que parece muy complicado pero en realidad es solo mi nombre sin las vocales. Así que solo toma mi nombre, quita las vocales y llegarás a mi nombre de usuario. Entonces, esta historia comienza en 2018. Yo era el CTO de una startup joven y en crecimiento llamada Spectrum. Y estábamos construyendo una especie de versión moderna de los foros comunitarios. Y por alguna razón incomprensible que no puedo recordar, elegí una base de datos realmente terrible que no mencionaré, porque no quiero avergonzar a nadie, pero es una base de datos muy pequeña que probablemente ninguno de ustedes haya usado, y se promocionaban como la Base de Datos en Tiempo Real.

Ya tuve una introducción muy encantadora, así que puedo omitir un poco de eso, pero si quieres seguirme en cualquier lugar de Internet, mi nombre de usuario es mxsdbr, que parece muy complicado pero en realidad es solo mi nombre sin las vocales. Así que solo toma mi nombre, quita las vocales y llegarás a mi nombre de usuario. Sé que desearía haber elegido algo diferente cuando era más joven y no sabía lo que estaba haciendo, pero así es como es ahora. No puedo cambiarlo más.

Entonces, esta historia comienza en 2018. Yo era el CTO de una startup joven y en crecimiento llamada Spectrum. Y estábamos construyendo una especie de versión moderna de los foros comunitarios. Así que construimos esta plataforma donde la mayoría de los proyectos de código abierto tenían a todos sus usuarios hablando entre sí. Informaban errores, hablaban entre ellos sobre cómo usar componentes de estilo en mi caso, pero también muchos otros proyectos de código abierto y muchos desarrolladores lo usaban. Y en realidad crecimos bastante rápido. Ahora, yo era el CTO de esa startup y no tenía idea de lo que estaba haciendo. Literalmente cero. Especialmente no una aplicación de chat público en tiempo real, que es un conjunto de problemas bastante interesante para resolver, porque estábamos tomando lo que eran los foros, donde puedes publicar publicaciones, publicar hilos y comentar debajo de ellos, y lo convertimos todo en tiempo real. Intentamos combinar lo mejor de lo que los foros de los años 2000 te ofrecen con lo que Slack y Discord te ofrecen hoy en día. Intentamos combinar lo mejor de ambos mundos. Y eso me trajo algunos problemas técnicos realmente interesantes, porque teníamos todo el tráfico de lectura pesada de un foro. Muchas, muchas personas venían a nuestra plataforma y leían todos los hilos y publicaciones y el contenido que la gente compartía, pero todo era en tiempo real. Así que todos se suscribían a una conexión WebSocket y transmitían actualizaciones en tiempo real mientras las personas conversaban entre sí.

Y por alguna razón incomprensible que no puedo recordar, elegí una base de datos realmente terrible que no mencionaré, porque no quiero avergonzar a nadie, pero es una base de datos muy pequeña que probablemente ninguno de ustedes haya usado, y se promocionaban como la Base de Datos en Tiempo Real. Y toda su idea era que podías tomar cualquier consulta de base de datos y agregarle una cosa al final y luego obtendrías una suscripción en tiempo real a cualquier cambio en esa consulta de base de datos. Vaya, eso suena increíble. Eso suena exactamente como lo que necesitamos. Estamos construyendo esta plataforma de chat en tiempo real. Seguramente eso es exactamente lo que necesitamos. Así que lo usamos, pero el problema era que estaba construido realmente mal. Y descubrí a posteriori que esta empresa que construyó la base de datos había recaudado dinero de inversores y no estaba creciendo muy rápido. No lograron obtener ninguna cuota de mercado en comparación con una MongoDB, ¿verdad? O incluso un Postgres o MySQL. Así que su idea era: `Ok, tenemos esta base de datos realmente genial. Vamos a hacerla en tiempo real. Y luego la vamos a vender`. Y pasaron medio año construyéndola, pero nunca la ejecutaron realmente en producción.

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

Elevando Monorepos con los Espacios de Trabajo de npm
DevOps.js Conf 2022DevOps.js Conf 2022
33 min
Elevando Monorepos con los Espacios de Trabajo de npm
Top Content
NPM workspaces help manage multiple nested packages within a single top-level package, improving since the release of NPM CLI 7.0. You can easily add dependencies to workspaces and handle duplications. Running scripts and orchestration in a monorepo is made easier with NPM workspaces. The npm pkg command is useful for setting and retrieving keys and values from package.json files. NPM workspaces offer benefits compared to Lerna and future plans include better workspace linking and adding missing features.
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.
Principios para Escalar el Desarrollo de Aplicaciones Frontend
React Summit 2023React Summit 2023
25 min
Principios para Escalar el Desarrollo de Aplicaciones Frontend
Top Content
This Talk discusses scaling front-end applications through principles such as tearing down barriers, sharing code in a monorepo, and making it easy to delete code. It also emphasizes incremental migration, embracing lack of knowledge, and eliminating systematic complexity. The Talk highlights the use of automation in code migration and the importance of removing barriers to enable smoother code migration.
Automatizando Todo el Código y las Pruebas con GitHub Actions
React Advanced 2021React Advanced 2021
19 min
Automatizando Todo el Código y las Pruebas con GitHub Actions
Top Content
We will learn how to automate code and testing with GitHub Actions, including linting, formatting, testing, and deployments. Automating deployments with scripts and Git hooks can help avoid mistakes. Popular CI-CD frameworks like Jenkins offer powerful orchestration but can be challenging to work with. GitHub Actions are flexible and approachable, allowing for environment setup, testing, deployment, and custom actions. A custom AppleTools Eyes GitHub action simplifies visual testing. Other examples include automating content reminders for sharing old content and tutorials.
Ajustando DevOps para las Personas sobre la Perfección
DevOps.js Conf 2022DevOps.js Conf 2022
33 min
Ajustando DevOps para las Personas sobre la Perfección
Top Content
DevOps is a journey that varies for each company, and remote work makes transformation challenging. Pull requests can be frustrating and slow, but success stories like Mateo Colia's company show the benefits of deploying every day. Challenges with tools and vulnerabilities require careful consideration and prioritization. Investing in documentation and people is important for efficient workflows and team growth. Trust is more important than excessive control when deploying to production.

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
React a Escala con Nx
React Summit 2023React Summit 2023
145 min
React a Escala con Nx
Top Content
WorkshopFree
Isaac Mann
Isaac Mann
Vamos a utilizar Nx y algunos de sus plugins para acelerar el desarrollo de esta aplicación.
Algunas de las cosas que aprenderás:- Generar un espacio de trabajo Nx prístino- Generar aplicaciones frontend React y APIs backend dentro de tu espacio de trabajo, con proxies preconfigurados- Crear librerías compartidas para reutilizar código- Generar nuevos componentes enrutados con todas las rutas preconfiguradas por Nx y listas para usar- Cómo organizar el código en un monorepositorio- Mover fácilmente las librerías alrededor de tu estructura de carpetas- Crear historias de Storybook y pruebas e2e de Cypress para tus componentes
Tabla de contenidos: - Lab 1 - Generar un espacio de trabajo vacío- Lab 2 - Generar una aplicación React- Lab 3 - Ejecutores- Lab 3.1 - Migraciones- Lab 4 - Generar una librería de componentes- Lab 5 - Generar una librería de utilidades- Lab 6 - Generar una librería de rutas- Lab 7 - Añadir una API de Express- Lab 8 - Mostrar un juego completo en el componente de detalle de juego enrutado- Lab 9 - Generar una librería de tipos que la API y el frontend pueden compartir- Lab 10 - Generar historias de Storybook para el componente de interfaz de usuario compartido- Lab 11 - Prueba E2E del componente compartido
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.