Problemas difíciles de GraphQL en Shopify

Rate this content
Bookmark

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.

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

FAQ

El problema Nplusone ocurre cuando se solicita una lista de objetos y cada objeto requiere una consulta separada para obtener información adicional, lo que lleva a un número creciente de consultas y afecta el rendimiento. Shopify soluciona este problema mediante técnicas como la precarga de registros y la carga por lotes, optimizando así las consultas y mejorando la eficiencia.

GraphQL Batch es una biblioteca de código abierto desarrollada por Shopify que utiliza la ejecución perezosa de resolutores y la carga por lotes para optimizar el rendimiento de las consultas GraphQL. Permite que las consultas sean más eficientes agrupando y resolviendo dependencias de datos en una sola operación, lo que minimiza el número de accesos a la base de datos.

Shopify maneja las versiones de su API GraphQL mediante un sistema que permite versiones trimestrales y usa un enfoque que alerta a los desarrolladores sobre campos obsoletos y cambios inminentes. Esto asegura que los desarrolladores tengan tiempo para ajustar sus aplicaciones antes de que se realicen cambios que puedan afectar sus operaciones.

Shopify optimiza el rendimiento de GraphQL en dispositivos móviles a través de estrategias como la paginación inteligente, la consulta paralela y el ajuste fino de la caché. Estas técnicas ayudan a manejar redes más lentas e inestables, y permiten que las aplicaciones móviles sean más rápidas y eficientes.

Shopify utiliza varias herramientas y técnicas para asegurar la calidad y consistencia de su API GraphQL, incluyendo linters personalizados, revisiones de código automatizadas, y un enfoque sistemático para manejar versiones del esquema y campos obsoletos. Además, promueven las mejores prácticas y patrones de diseño mediante la educación y la documentación continua para los desarrolladores.

Rebecca Friedman
Rebecca Friedman
Jonathan Baker
Jonathan Baker
Alex Ackerman
Alex Ackerman
Théo Ben Hassen
Théo Ben Hassen
 Greg MacWilliam
Greg MacWilliam
164 min
01 Dec, 2021

Comments

Sign in or register to post your comment.

Video Summary and Transcription

El masterclass cubrió varios temas relacionados con GraphQL en Shopify, incluyendo el problema Nplusone, carga en lote con resolutores perezosos, contextualización de APIs de GraphQL con directivas, optimización de GraphQL para dispositivos móviles, gestión de APIs de GraphQL grandes y manejo de campos y nulabilidad obsoletos. Los oradores compartieron ideas y soluciones a estos desafíos, como el uso de Active Record Preloading, la biblioteca GraphQL Batch y directivas personalizadas. También discutieron la importancia de medir el rendimiento, el diseño de paginación y las consultas paralelas para la optimización móvil. En general, el masterclass proporcionó información valiosa sobre cómo mejorar el rendimiento de GraphQL, el diseño de APIs y las estrategias de versionado.
Available in English: Hard GraphQL Problems at Shopify

1. Introducción al Masterclass

Short description:

Gracias a todos por unirse a nosotros en el masterclass. Durante las próximas tres horas, cinco oradores diferentes discutirán los problemas que han abordado con GraphQL en Shopify. Cada sesión tendrá una duración de 20 minutos, seguida de un breve descanso y una sesión de preguntas y respuestas de una hora. Siéntanse libres de hacer preguntas en el chat durante todo el masterclass.

Entonces, una vez más, gracias a todos los que han podido unirse a nosotros aquí. Aprecio sinceramente su tiempo. Todos nosotros, todos nuestros oradores, todos en Shopify. Muchas gracias por estar allí y unirse a nosotros en el masterclass.

Así es como se verán las próximas tres horas. Será un poco diferente a lo que estamos acostumbrados, pero espero que sea un cambio positivo. Espero que también puedan compartir sus comentarios con nosotros al final de esto, pero vamos a tener cinco sesiones diferentes con cinco oradores diferentes. Todos ellos son ingenieros aquí en Shopify. Y todas estas sesiones hablarán sobre los problemas que hemos tenido que abordar con GraphQL aquí en Shopify. Esperamos que eso arroje algo de luz y obtengan una idea de cómo los equipos pudieron analizar los problemas y las diferentes metodologías que utilizaron para abordar el problema.

Cada sesión o charla tendrá una duración de 20 minutos. Y al final de eso, tendremos un descanso, un descanso corto de 10 minutos y luego tendremos una hora de horario de oficina, o una sesión de correo, si así lo desean. Entonces, si tienen preguntas, simplemente sigan haciéndolas aquí en el chat, nos aseguraremos de tomar nota de ellas. Y al final de eso, durante la última hora durante el horario de oficina, vamos a responder sus preguntas. Pero también, si tienen una pregunta muy específica sobre alguna de las sesiones a medida que se desarrollan, están pregrabadas, pero nuestros oradores están aquí en vivo, definitivamente pueden hacer sus preguntas en el chat, y ellos se encargarán de eso. Así que espero que esté bien. Suena bien y tiene sentido.

2. Introducción a la sesión de Jonathan

Short description:

Nuestra primera sesión es de Jonathan, un desarrollador de personal en Shopify, enfocándose en aplicaciones de escaparate para clientes. Jonathan está aquí para aclarar cualquier pregunta durante la sesión pregrabada. ¡Comencemos!

Entonces, sin más preámbulos, creo que nuestra primera sesión es de Jonathan. Jonathan está aquí. Jonathan, no sé si quieres tomarte un momento para saludar a las personas que se están uniendo antes de comenzar la sesión. ¡Hola a todos! Soy Jonathan, como verán en la charla, soy un desarrollador de personal aquí en Shopify, enfocándome en nuestras aplicaciones de escaparate para clientes. Desde el punto de vista de GraphQL, se trata de la API de escaparate, que es una de nuestras dos API públicas de GraphQL. Bienvenidos.

Fantástico. Cuéntanos algo sobre ti que probablemente no sepamos, déjame acercarlo más a casa, ¿cuál es tu lectura favorita actual o tu blog o boletín favorito en este momento? El blog de ingeniería de Shopify. Muy bien, muchas gracias, Jonathan. Jonathan es nuestro primer orador, como mencioné, todas nuestras sesiones están pregrabadas, pero siéntanse libres de hacer sus preguntas mientras se desarrolla la sesión. Jonathan está aquí para ayudar a aclarar cualquier cosa en caso de que sea necesario. Así que déjenme ver. Voy a compartir mi pantalla aquí, también compartiré el sonido. Muy bien, fantástico. Déjenme ver. Denme un pulgar hacia arriba si pueden escuchar el sonido aquí.

QnA

Watch more workshops on 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
React a Escala con Nx
React Summit 2023React Summit 2023
145 min
React a Escala con Nx
Top Content
Featured 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 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 Conference 2022React Advanced Conference 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.

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.
Un Marco para Gestionar la Deuda Técnica
TechLead Conference 2023TechLead Conference 2023
35 min
Un Marco para Gestionar la Deuda Técnica
Top Content
Today's Talk discusses the importance of managing technical debt through refactoring practices, prioritization, and planning. Successful refactoring requires establishing guidelines, maintaining an inventory, and implementing a process. Celebrating success and ensuring resilience are key to building a strong refactoring culture. Visibility, support, and transparent communication are crucial for addressing technical debt effectively. The team's responsibilities, operating style, and availability should be transparent to product managers.
Depuración de JS
React Summit 2023React Summit 2023
24 min
Depuración de JS
Top Content
Debugging JavaScript is a crucial skill that is often overlooked in the industry. It is important to understand the problem, reproduce the issue, and identify the root cause. Having a variety of debugging tools and techniques, such as console methods and graphical debuggers, is beneficial. Replay is a time-traveling debugger for JavaScript that allows users to record and inspect bugs. It works with Redux, plain React, and even minified code with the help of source maps.
Principios para Escalar el Desarrollo de Aplicaciones Frontend
React Summit 2023React Summit 2023
26 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.
Construyendo un Asistente AI Activado por Voz con Javascript
JSNation 2023JSNation 2023
21 min
Construyendo un Asistente AI Activado por Voz con Javascript
Top Content
This Talk discusses building a voice-activated AI assistant using web APIs and JavaScript. It covers using the Web Speech API for speech recognition and the speech synthesis API for text to speech. The speaker demonstrates how to communicate with the Open AI API and handle the response. The Talk also explores enabling speech recognition and addressing the user. The speaker concludes by mentioning the possibility of creating a product out of the project and using Tauri for native desktop-like experiences.