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

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
Construyendo una Aplicación de Shopify con React & Node
React Summit Remote Edition 2021React Summit Remote Edition 2021
87 min
Construyendo una Aplicación de Shopify con React & Node
Top Content
WorkshopFree
Jennifer Gray
Hanna Chen
2 authors
Los comerciantes de Shopify tienen un conjunto diverso de necesidades, y los desarrolladores tienen una oportunidad única para satisfacer esas necesidades construyendo aplicaciones. Construir una aplicación puede ser un trabajo duro, pero Shopify ha creado un conjunto de herramientas y recursos para ayudarte a construir una experiencia de aplicación sin problemas lo más rápido posible. Obtén experiencia práctica construyendo una aplicación integrada de Shopify utilizando el CLI de la aplicación Shopify, Polaris y Shopify App Bridge.Te mostraremos cómo crear una aplicación que acceda a la información de una tienda de desarrollo y pueda ejecutarse en tu entorno local.
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.

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