Cómo Cachear APIs de GraphQL en el Edge

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 edge, 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 detalles internos de GraphCDN para descubrir cómo exactamente logramos esto.

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

FAQ

GraphCDN es un CDN específicamente diseñado para APIs de GraphQL. Proporciona una solución de almacenamiento en caché en el borde, permitiendo respuestas más rápidas y reduciendo la carga en los servidores al ejecutar código en múltiples centros de datos alrededor del mundo.

Max Stoiber aprendió que es crucial confiar en bases de datos ampliamente utilizadas y soportadas. Su elección inicial fue RethinkDB, que finalmente no escaló bien y carecía de soporte, lo que llevó a problemas significativos de escalabilidad en Spectrum.

GraphQL es excelente para la caché debido a su capacidad de introspección y su esquema estricto, lo que permite un almacenamiento en caché efectivo y preciso de los datos. Esto es crucial para mejorar el rendimiento y la eficiencia de las APIs.

GraphCDN considera el token de autorización en la clave de caché para garantizar que los datos sensibles no sean accesibles por usuarios no autorizados. Además, GraphCDN utiliza Fastly para realizar purgas de caché globales rápidas, asegurando que los datos obsoletos se invaliden eficazmente a nivel mundial en aproximadamente 150 milisegundos.

Fastly es fundamental para GraphCDN debido a su rapidez y la distribución global de sus centros de datos. Esto permite a GraphCDN ofrecer tiempos de respuesta muy rápidos y manejar la invalidación de datos a nivel mundial de manera eficiente y casi instantánea.

La elección de RethinkDB, aunque prometía características en tiempo real, resultó en problemas de escalabilidad debido a su incapacidad para manejar múltiples oyentes de cambios de manera efectiva, lo que llevó a frecuentes caídas de los servidores bajo cargas altas de usuarios.

Sí, se recomienda usar la caché local del cliente GraphQL junto con GraphCDN para maximizar la velocidad de respuesta y la eficiencia. La caché del cliente maneja datos ya vistos por el usuario, mientras que GraphCDN gestiona la caché compartida a nivel de borde.

Max Stoiber
Max Stoiber
23 min
09 Dec, 2021

Comments

Sign in or register to post your comment.
Video Summary and Transcription
Max Stoiber, cofundador de GraphCDN, analiza los desafíos enfrentados con RethinkDB y la necesidad de cachear en una API con una gran carga de lectura. Explora cómo los clientes de GraphQL manejan el caché y el potencial de ejecutar un cliente de GraphQL en el edge para obtener tiempos de respuesta más rápidos. También se discuten la autorización y la gestión de claves de caché en el edge, junto con los beneficios del caché en el edge y la importancia del caché en las APIs de GraphQL. La respuesta de la audiencia revela que un porcentaje significativo ya está cachando sus APIs, mientras se explican diferentes casos de uso para el caché y el concepto de computación en el edge.
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:

Soy Max Stoiber, co-fundador de GraphCDN, un CDN de GraphQL. He trabajado en proyectos de código abierto como Styled Components y React Boilerplate. En 2018, fui el CTO de Spectrum, un foro comunitario moderno que combina chat en tiempo real con publicaciones públicas. Experimentamos un crecimiento significativo de usuarios pero enfrentamos problemas con la elección de la base de datos.

♪♪ ¡Hola a todos! Estoy muy emocionado de estar aquí hoy y hablarles sobre la caché en el borde de las APIs de GraphQL. Mi nombre es Max Stoiber. Estoy en la hermosa Viena, Austria aquí. Desafortunadamente, no puedo estar allí en persona esta vez, pero estoy realmente emocionado de estar aquí. Y si me quieren seguir prácticamente en cualquier lugar de internet, estoy en MXSTBR, básicamente en todas partes.

Soy el co-fundador de GraphCDN, que es el CDN de GraphQL. Si estás en la comunidad de React, en la comunidad de React JS o en la comunidad de JavaScript, en general, es posible que hayas utilizado algunos de los proyectos de código abierto en los que ayudé a construir, como Styled Components o React Boilerplate o Microanalytics, entre muchos otros. Soy muy activo en esa escena. Y si estás allí, es posible que también hayas utilizado algunos de esos proyectos.

La historia de GraphCDN y cómo llegamos allí comenzó en 2018. En ese momento, era el CTO de otra startup llamada Spectrum. Y en Spectrum estábamos construyendo una versión moderna del clásico foro comunitario. Básicamente, estábamos tratando de combinar lo mejor de lo que nos dio PHP BB hace 20 años con lo mejor de lo que nos ofrecen Discord y Slack en la actualidad. Esa era básicamente la idea. Era un foro público, pero todos los comentarios en cualquier publicación eran chat en tiempo real. Así que intentamos combinar estos dos mundos que actualmente están muy separados, donde las comunidades en Slack y Discord escriben muchos mensajes, pero ninguno de ellos es encontrable y hacerlos públicos y un poco más organizados para que puedas encontrarlos después en Google o en otro lugar. Intentamos combinar esos dos mundos juntos.

Ahora, eso funcionó sorprendentemente bien, lo que llevó a un crecimiento considerable de usuarios. Como puedes imaginar, con todo este contenido generado por los usuarios, mucha gente nos encontró en Google y en otros lugares y comenzó a visitar Spectrum con bastante regularidad. Eso significaba que teníamos mucho crecimiento. Ahora, desafortunadamente, había elegido una base de datos que no tenía mucho soporte. Elegí RethinkDB, que hoy en día ni siquiera existe. La empresa detrás de ella cerró después de un tiempo. Y elegí esa base de datos originalmente porque se anunciaban a sí mismos como la base de datos en tiempo real. Y su característica clave, o lo que elogiaban externamente, era que podías poner esta clave de cambios al final de cualquier consulta de base de datos y te daría actualizaciones en tiempo real del flujo de cambios de esa consulta de base de datos. Y así podías escuchar los cambios en prácticamente cualquier cambio de datos, lo cual parecía encajar perfectamente con lo que estábamos tratando de hacer. Porque obviamente, casi todo en Spectrum era en tiempo real, ¿verdad? Las publicaciones aparecían en tiempo real, el chat era en tiempo real, por supuesto, teníamos mensajes directos que tenían que ser en tiempo real. Así que esto parecía encajar perfectamente con lo que estábamos tratando de hacer. Lección aprendida, a posteriori, confía en las bases de datos que todos usan.

2. Desafíos con RethinkDB y la necesidad de la Caché

Short description:

Hay una razón por la cual todos usan Postgres y MySQL y ahora Mongo. RethinkDB, su naturaleza en tiempo real no escalaba en absoluto. Teníamos cientos de miles de usuarios cada mes, pero RethinkDB ni siquiera podía manejar cien oyentes de cambios concurrentes. Teníamos esta base de datos que no escalaba y básicamente tuvimos que trabajar alrededor de esa limitación. Teníamos un caso de uso ideal para la caché porque nuestra API tenía muchas lecturas. Queríamos cambiar a una base de datos más compatible. Sin embargo, eso implicaba mucho trabajo. Originalmente elegimos GraphQL para nuestra API porque teníamos muchos datos relacionales. El único gran inconveniente con el que nos encontramos fue que no había soluciones preconstruidas para la caché de GraphQL en el borde, que era lo que queríamos hacer. Ahora queríamos ejecutar código en muchos, muchos centros de datos en todo el mundo, y queríamos dirigir a nuestros usuarios al centro de datos más cercano y almacenar en caché sus datos muy cerca de ellos para obtener tiempos de respuesta muy rápidos, pero también para reducir la carga en nuestros servidores. La pregunta que quería responder era: ¿no puedo simplemente ejecutar un cliente de GraphQL en el borde? Para responder a la pregunta, quiero profundizar un poco en cómo los clientes de GraphQL almacenan en caché.

Hay una razón por la cual esas bases de datos son tan prevalentes y es porque funcionan. No lo sabía, ahora soy mucho más sabio, no era tan sabio en ese entonces. Y muy rápidamente resultó que RethinkDB, su naturaleza en tiempo real no escalaba en absoluto. Teníamos cientos de miles de usuarios cada mes, pero RethinkDB ni siquiera podía manejar cien oyentes de cambios concurrentes.

Ahora, como puedes imaginar, cada persona que visita el sitio web inicia muchos oyentes de cambios diferentes, ¿verdad? Estamos escuchando cambios en la publicación específica que están viendo. Estamos escuchando cambios en la comunidad en la que se publica la publicación. Estamos escuchando nuevas notificaciones. Teníamos un montón de oyentes por usuario y esencialmente nuestros servidores de base de datos estaban en llamas, literalmente en llamas. Bueno, afortunadamente no literalmente, pero se bloqueaban con bastante frecuencia. Busqué en Google servidores en llamas y encontré esta increíble foto de archivo de servidores en llamas, que si tu centro de datos se ve así, tienes algunos problemas muy graves. Los nuestros no eran tan malos, pero aún así eran bastante malos. Así que teníamos esta base de datos que no escalaba y básicamente tuvimos que trabajar alrededor de esa limitación. Queríamos cambiar a una base de datos más compatible. Sin embargo, eso implicaba mucho trabajo. Reescribir las cientos de consultas de base de datos que habíamos escrito y optimizado hasta ese momento, migrar todos esos datos sin tiempo de inactividad, eso era todo un proyecto y queríamos llegar allí eventualmente, pero necesitábamos una solución para evitar que nos bloqueáramos literalmente todos los días, justo en este momento.

Mientras pensaba en esto, por supuesto, me di cuenta de que la caché, teníamos un caso de uso ideal para la caché porque nuestra API tenía muchas lecturas. Por supuesto, es datos públicos, mucha gente lo lee, pero no tanta gente escribe en él. Y así que en realidad teníamos un caso de uso ideal para la caché. Originalmente elegimos GraphQL para nuestra API porque teníamos muchos datos relacionales. Estábamos obteniendo una comunidad, todas las publicaciones dentro de esa comunidad, los autores de cada publicación, el número de comentarios, un montón de datos relacionales y GraphQL fue una solución fantástica para ese caso de uso. Funcionó extremadamente bien para nosotros y realmente disfrutamos nuestra experiencia de construir nuestra API con GraphQL. El único gran inconveniente con el que nos encontramos fue que no había soluciones preconstruidas para la caché de GraphQL en el borde, que era lo que queríamos hacer.

Ahora queríamos ejecutar código en muchos, muchos centros de datos en todo el mundo, y queríamos dirigir a nuestros usuarios al centro de datos más cercano y almacenar en caché sus datos muy cerca de ellos para obtener tiempos de respuesta muy rápidos, pero también para reducir la carga en nuestros servidores. Ahora, si alguna vez has usado GraphQL, entonces sabes que eso es básicamente lo que los clientes de GraphQL hacen en el navegador. Si has oído hablar de Apollo Client, Relay, Urql, todos estos clientes de GraphQL, lo que hacen es básicamente un mecanismo de obtención para consultas de GraphQL que las almacena en caché de manera muy inteligente en el navegador para una mejor experiencia de usuario. Así que en mi cabeza, básicamente, la pregunta que quería responder era, ¿no puedo simplemente ejecutar un cliente de GraphQL en el borde? Los clientes de GraphQL hacen esto en el navegador. ¿Por qué no puedo tomar este cliente de GraphQL que se está ejecutando en mi navegador local, ponerlo en un servidor en algún lugar y tener esa misma lógica de caché pero en el borde? Para responder a la pregunta, quiero profundizar un poco en cómo los clientes de GraphQL almacenan en caché. Si observamos este ejemplo de una consulta de GraphQL, que obtiene una publicación de un blog por un slug, y obtiene su ID, título y autor.

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

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.
Despídete de tus esquemas de API con tRPC
React Day Berlin 2022React Day Berlin 2022
29 min
Despídete de tus esquemas de API con tRPC
Today's Talk introduces TRPC, a library that eliminates the need for code generation and provides type safety and better collaboration between front-end and back-end. TRPC is demonstrated in a Next JS application integrated with Prisma, allowing for easy implementation and interaction with the database. The library allows for seamless usage in the client, with automatic procedure renaming and the ability to call methods without generating types. TRPC's client-server interaction is based on HTTP requests and allows for easy debugging and tracing. The library also provides runtime type check and validation using Zod.
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.

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.
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
WorkshopFree
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