Introducción a GraphQL: lecciones del desarrollo de una aplicación de Shopify (Parte 1)

Agustin Queirolo
.
March 1, 2023
Introducción a GraphQL: lecciones del desarrollo de una aplicación de Shopify (Parte 1)

El año pasado, mi equipo comenzó a desarrollar una aplicación de Shopify y una de las tecnologías que debíamos usar era GraphQL. Nunca había usado GraphQL, así que tuve que aprenderlo desde cero. En esta entrada del blog hablaré sobre lo que he aprendido acerca de esta poderosa tecnología.

Usamos GraphQL para enviar solicitudes al servidor de Shopify y también para implementar nuestro propio servidor interno. En la primera parte de esta entrada del blog, después de explicar qué es exactamente GraphQL, explicaré lo que se necesitó para implementar el primero. Esto último se explicará en la próxima segunda parte.

¿Qué es GraphQL? ¿Y por qué deberías usarlo en lugar de REST?

Entonces, ¿qué es exactamente GraphQL? ¿Y por qué considerarías usarlo en lugar de una alternativa más popular como REST?

GraphQL es un lenguaje de consulta para las API y un tiempo de ejecución para ejecutar esas consultas en una fuente de datos. Fue desarrollado por Facebook y ahora se mantiene como un proyecto de código abierto. GraphQL permite a los clientes solicitar solo los datos que necesitan y permite la creación de consultas complejas con varios campos anidados, lo que lo convierte en una alternativa más eficiente a las API REST.

Así que usamos GraphQL para lo mismo que REST, pero ¿en qué se diferencian? ¿Y por qué alguien elegiría GraphQL en lugar de REST? Una de las diferencias clave entre las dos es que las API REST tienen una estructura fija y un conjunto fijo de puntos finales que devuelven un conjunto fijo de datos. Por el contrario, GraphQL permite al cliente solicitar solo los datos que necesita especificando los campos que desea incluir en una consulta en un único punto final, con solo enviar una solicitud POST HTTP. Esto significa que una sola consulta de GraphQL puede recuperar varios recursos en una sola solicitud, mientras que en REST requeriría varias solicitudes a diferentes puntos finales. Gracias a la flexibilidad de GraphQL para solicitar solo los datos que necesitas, puede ser más eficiente que las API REST en términos de uso de la red y de sobreprocesamiento. Reduce la cantidad de viajes de ida y vuelta de la red y la cantidad de datos transferidos a través de la red, lo que mejora la experiencia del usuario.

El control de versiones también es diferente en GraphQL. Con REST, el control de versiones normalmente se gestiona mediante diferentes rutas de URL, como añadir un número de versión a la URL o utilizar diferentes subdominios. Con GraphQL, el control de versiones se puede gestionar simplemente especificando la versión en la consulta. Esto permite al cliente especificar la versión de la API que quiere usar en la consulta, en lugar de en la URL. Además, agregar nuevos campos en una API de GraphQL también puede ser relativamente simple y directo. En GraphQL, el esquema define la estructura de los datos que se pueden consultar, por lo que es posible agregar nuevos campos o cambiar los existentes actualizando el esquema. Esto se puede hacer sin afectar a los clientes existentes, ya que los clientes pueden solicitar solo los campos que necesitan e ignorar los campos nuevos o modificados. Con REST, una nueva versión de la API normalmente implica una revisión completa de los puntos finales y las estructuras de datos, lo que puede suponer un cambio radical para los clientes (a todos nos ha pasado). Si utilizas GraphQL, la probabilidad de introducir cambios importantes disminuye considerablemente.

Espero que después de leer todo lo que hace que GraphQL estéis todos embarcados en el tren de GraphQL. Echemos un vistazo a una consulta simple de GraphQL que realizarías al desarrollar una aplicación de Shopify:

no-line-numbers|graphq1query : { shop { name email description url }}

Al usar esta sencilla consulta, puedes obtener toda la información que necesitas de una tienda que instale tu aplicación (nombre, correo electrónico, descripción, URL) sin sobrecargar los campos que no necesitas (como la información de facturación). Ten en cuenta que esta solicitud es de tipo consulta y se utiliza para recuperar datos del servidor.

Hay otros tipos, como la mutación y la suscripción. Las mutaciones se utilizan para cambiar cosas en el backend (básicamente operaciones de escritura). Las suscripciones se utilizan para obtener datos del servidor, al igual que las consultas, mientras se mantiene una conexión activa. Como podemos especificar todas estas operaciones diferentes en una sola solicitud, no es necesario utilizar diferentes métodos HTTP (GET, POST, UPDATE, etc.) como hacemos en las API REST.

¿Para qué lo usa Shopify?

Para recuperar los datos de la tienda, Shopify proporciona muchas API de GraphQL y REST diferentes. Si bien normalmente puedes usar las versiones GraphQL y REST de la misma API indistintamente, a veces hay algunas funciones presentes en una que no están presentes en la otra; por lo tanto, en algunos casos terminarás usando ambas. Sin embargo, Shopify recomienda el uso de sus API de GraphQL siempre que sea posible.

Si bien hay varias API en el repertorio de Shopify, es posible que no acabes usándolas todas. Las que es más probable que utilices son sus API de administración y API de Storefront. La primera es la API de referencia de Shopify, puedes usarla para una amplia variedad de propósitos. Desde consultar información de la tienda (como productos, pedidos, clientes) hasta suscribirse a webhooks o procesar pagos, esta es la API más potente de Shopify.

Shopify limita el uso de la API de administración mediante límites de tarifas. Para cada solicitud, se calculan los costos de consulta, medidos en puntos de costo. Cada campo devuelto por una consulta cuesta un número determinado de puntos. El costo total de una consulta es la suma de todos los campos que devuelve, por lo que la ejecución de las consultas más complejas cuesta más. A cada combinación de aplicación y tienda se le asigna un conjunto de 1000 puntos de coste, con una tasa de pérdida de 50 puntos de coste por segundo. Esto significa que el coste total de las consultas no puede superar los 1000 puntos en un momento dado y que se crea espacio en el segmento de la aplicación a un ritmo de 50 puntos por segundo. Al realizar consultas más sencillas y de bajo costo, puedes realizar más consultas a lo largo del tiempo. Esto significa que los desarrolladores deben tener cuidado de no sobrecargar campos innecesarios.

Los códigos de error también se manejan de manera diferente cuando se usa una API de GraphQL. La API de GraphQL puede devolver un código de respuesta de 200 OK en casos en los que normalmente se producen errores de 4 o 5 xx en REST. Debes comprobar el cuerpo de la respuesta y comprobar si hay un campo de error que no sea nulo. En este caso, encontrarás el mensaje de error dentro del cuerpo de la respuesta.

Cuando haces una solicitud al servidor de Shopify, debes incluir un token de acceso para la autorización. Este token se crea cuando un comerciante instala tu aplicación y pasa por un proceso de OAuth. Te autoriza a obtener información sobre la tienda. Si no lo incluye, su solicitud será rechazada.

Cómo aprovechar al máximo las solicitudes de GraphQL de Shopify

Comenzar con Shopify es una tarea abrumadora si nunca lo has hecho antes, incluso si eres un experto en GraphQL. Aquí hay un par de consejos que han facilitado mi proceso de desarrollo.

Usa una de las plantillas estándar de Shopify

Shopify proporciona un código estándar para las aplicaciones, por lo que puedes saltarte toda la configuración y dedicarte a lo que es importante: desarrollar tu aplicación. Teníamos la intención de implementar nuestro proyecto usando Node.js, por lo que nuestro equipo usó el texto estándar en el repositorio aplicación de administración de shopify-marketplaces-de-mercado que nos dio algunas funcionalidades ya desarrolladas, como OAuth, que necesitarás tener si deseas publicar la aplicación en la tienda de aplicaciones de Shopify. Incluso hay un método llamado «callShopifyGraphQLAPI» para que puedas empezar a hacer solicitudes en GraphQL de inmediato.

Usa la aplicación GraphiQL

GraphiQL es una herramienta para interactuar con las API de GraphQL. Permite a los desarrolladores explorar fácilmente el esquema de una API de GraphQL y enviar consultas y mutaciones al servidor para recuperar o actualizar los datos. Puedes usar GraphiQL en Sitio web de Shopify para tener una idea de su API, pero te recomiendo instalar la aplicación Shopify GraphiQL en tu tienda de desarrollo. Acelerará el desarrollo, ya que puedes diseñar la consulta allí y ver lo que obtendrás.

Conclusión

GraphQL es una herramienta esencial para desarrollar una aplicación de Shopify. Si nunca la has usado antes, puede parecer desalentador, pero puedes estar seguro de que la herramienta es fácil de aprender y es una herramienta invaluable para tener en tu equipo de desarrollo. En la siguiente parte, exploraremos cómo implementar un servidor GraphQL con Apollo y cómo Shopify hace un esfuerzo adicional para facilitarte las cosas.

Si la primera parte de esta entrada de blog te pareció interesante, no querrás perdértela segunda parte.

Manténgase a la vanguardia de las últimas tendencias y conocimientos sobre big data, aprendizaje automático e inteligencia artificial. ¡No se lo pierda y suscríbase a nuestro boletín de noticias!

El año pasado, mi equipo comenzó a desarrollar una aplicación de Shopify y una de las tecnologías que debíamos usar era GraphQL. Nunca había usado GraphQL, así que tuve que aprenderlo desde cero. En esta entrada del blog hablaré sobre lo que he aprendido acerca de esta poderosa tecnología.

Usamos GraphQL para enviar solicitudes al servidor de Shopify y también para implementar nuestro propio servidor interno. En la primera parte de esta entrada del blog, después de explicar qué es exactamente GraphQL, explicaré lo que se necesitó para implementar el primero. Esto último se explicará en la próxima segunda parte.

¿Qué es GraphQL? ¿Y por qué deberías usarlo en lugar de REST?

Entonces, ¿qué es exactamente GraphQL? ¿Y por qué considerarías usarlo en lugar de una alternativa más popular como REST?

GraphQL es un lenguaje de consulta para las API y un tiempo de ejecución para ejecutar esas consultas en una fuente de datos. Fue desarrollado por Facebook y ahora se mantiene como un proyecto de código abierto. GraphQL permite a los clientes solicitar solo los datos que necesitan y permite la creación de consultas complejas con varios campos anidados, lo que lo convierte en una alternativa más eficiente a las API REST.

Así que usamos GraphQL para lo mismo que REST, pero ¿en qué se diferencian? ¿Y por qué alguien elegiría GraphQL en lugar de REST? Una de las diferencias clave entre las dos es que las API REST tienen una estructura fija y un conjunto fijo de puntos finales que devuelven un conjunto fijo de datos. Por el contrario, GraphQL permite al cliente solicitar solo los datos que necesita especificando los campos que desea incluir en una consulta en un único punto final, con solo enviar una solicitud POST HTTP. Esto significa que una sola consulta de GraphQL puede recuperar varios recursos en una sola solicitud, mientras que en REST requeriría varias solicitudes a diferentes puntos finales. Gracias a la flexibilidad de GraphQL para solicitar solo los datos que necesitas, puede ser más eficiente que las API REST en términos de uso de la red y de sobreprocesamiento. Reduce la cantidad de viajes de ida y vuelta de la red y la cantidad de datos transferidos a través de la red, lo que mejora la experiencia del usuario.

El control de versiones también es diferente en GraphQL. Con REST, el control de versiones normalmente se gestiona mediante diferentes rutas de URL, como añadir un número de versión a la URL o utilizar diferentes subdominios. Con GraphQL, el control de versiones se puede gestionar simplemente especificando la versión en la consulta. Esto permite al cliente especificar la versión de la API que quiere usar en la consulta, en lugar de en la URL. Además, agregar nuevos campos en una API de GraphQL también puede ser relativamente simple y directo. En GraphQL, el esquema define la estructura de los datos que se pueden consultar, por lo que es posible agregar nuevos campos o cambiar los existentes actualizando el esquema. Esto se puede hacer sin afectar a los clientes existentes, ya que los clientes pueden solicitar solo los campos que necesitan e ignorar los campos nuevos o modificados. Con REST, una nueva versión de la API normalmente implica una revisión completa de los puntos finales y las estructuras de datos, lo que puede suponer un cambio radical para los clientes (a todos nos ha pasado). Si utilizas GraphQL, la probabilidad de introducir cambios importantes disminuye considerablemente.

Espero que después de leer todo lo que hace que GraphQL estéis todos embarcados en el tren de GraphQL. Echemos un vistazo a una consulta simple de GraphQL que realizarías al desarrollar una aplicación de Shopify:

no-line-numbers|graphq1query : { shop { name email description url }}

Al usar esta sencilla consulta, puedes obtener toda la información que necesitas de una tienda que instale tu aplicación (nombre, correo electrónico, descripción, URL) sin sobrecargar los campos que no necesitas (como la información de facturación). Ten en cuenta que esta solicitud es de tipo consulta y se utiliza para recuperar datos del servidor.

Hay otros tipos, como la mutación y la suscripción. Las mutaciones se utilizan para cambiar cosas en el backend (básicamente operaciones de escritura). Las suscripciones se utilizan para obtener datos del servidor, al igual que las consultas, mientras se mantiene una conexión activa. Como podemos especificar todas estas operaciones diferentes en una sola solicitud, no es necesario utilizar diferentes métodos HTTP (GET, POST, UPDATE, etc.) como hacemos en las API REST.

¿Para qué lo usa Shopify?

Para recuperar los datos de la tienda, Shopify proporciona muchas API de GraphQL y REST diferentes. Si bien normalmente puedes usar las versiones GraphQL y REST de la misma API indistintamente, a veces hay algunas funciones presentes en una que no están presentes en la otra; por lo tanto, en algunos casos terminarás usando ambas. Sin embargo, Shopify recomienda el uso de sus API de GraphQL siempre que sea posible.

Si bien hay varias API en el repertorio de Shopify, es posible que no acabes usándolas todas. Las que es más probable que utilices son sus API de administración y API de Storefront. La primera es la API de referencia de Shopify, puedes usarla para una amplia variedad de propósitos. Desde consultar información de la tienda (como productos, pedidos, clientes) hasta suscribirse a webhooks o procesar pagos, esta es la API más potente de Shopify.

Shopify limita el uso de la API de administración mediante límites de tarifas. Para cada solicitud, se calculan los costos de consulta, medidos en puntos de costo. Cada campo devuelto por una consulta cuesta un número determinado de puntos. El costo total de una consulta es la suma de todos los campos que devuelve, por lo que la ejecución de las consultas más complejas cuesta más. A cada combinación de aplicación y tienda se le asigna un conjunto de 1000 puntos de coste, con una tasa de pérdida de 50 puntos de coste por segundo. Esto significa que el coste total de las consultas no puede superar los 1000 puntos en un momento dado y que se crea espacio en el segmento de la aplicación a un ritmo de 50 puntos por segundo. Al realizar consultas más sencillas y de bajo costo, puedes realizar más consultas a lo largo del tiempo. Esto significa que los desarrolladores deben tener cuidado de no sobrecargar campos innecesarios.

Los códigos de error también se manejan de manera diferente cuando se usa una API de GraphQL. La API de GraphQL puede devolver un código de respuesta de 200 OK en casos en los que normalmente se producen errores de 4 o 5 xx en REST. Debes comprobar el cuerpo de la respuesta y comprobar si hay un campo de error que no sea nulo. En este caso, encontrarás el mensaje de error dentro del cuerpo de la respuesta.

Cuando haces una solicitud al servidor de Shopify, debes incluir un token de acceso para la autorización. Este token se crea cuando un comerciante instala tu aplicación y pasa por un proceso de OAuth. Te autoriza a obtener información sobre la tienda. Si no lo incluye, su solicitud será rechazada.

Cómo aprovechar al máximo las solicitudes de GraphQL de Shopify

Comenzar con Shopify es una tarea abrumadora si nunca lo has hecho antes, incluso si eres un experto en GraphQL. Aquí hay un par de consejos que han facilitado mi proceso de desarrollo.

Usa una de las plantillas estándar de Shopify

Shopify proporciona un código estándar para las aplicaciones, por lo que puedes saltarte toda la configuración y dedicarte a lo que es importante: desarrollar tu aplicación. Teníamos la intención de implementar nuestro proyecto usando Node.js, por lo que nuestro equipo usó el texto estándar en el repositorio aplicación de administración de shopify-marketplaces-de-mercado que nos dio algunas funcionalidades ya desarrolladas, como OAuth, que necesitarás tener si deseas publicar la aplicación en la tienda de aplicaciones de Shopify. Incluso hay un método llamado «callShopifyGraphQLAPI» para que puedas empezar a hacer solicitudes en GraphQL de inmediato.

Usa la aplicación GraphiQL

GraphiQL es una herramienta para interactuar con las API de GraphQL. Permite a los desarrolladores explorar fácilmente el esquema de una API de GraphQL y enviar consultas y mutaciones al servidor para recuperar o actualizar los datos. Puedes usar GraphiQL en Sitio web de Shopify para tener una idea de su API, pero te recomiendo instalar la aplicación Shopify GraphiQL en tu tienda de desarrollo. Acelerará el desarrollo, ya que puedes diseñar la consulta allí y ver lo que obtendrás.

Conclusión

GraphQL es una herramienta esencial para desarrollar una aplicación de Shopify. Si nunca la has usado antes, puede parecer desalentador, pero puedes estar seguro de que la herramienta es fácil de aprender y es una herramienta invaluable para tener en tu equipo de desarrollo. En la siguiente parte, exploraremos cómo implementar un servidor GraphQL con Apollo y cómo Shopify hace un esfuerzo adicional para facilitarte las cosas.

Si la primera parte de esta entrada de blog te pareció interesante, no querrás perdértela segunda parte.

Manténgase a la vanguardia de las últimas tendencias y conocimientos sobre big data, aprendizaje automático e inteligencia artificial. ¡No se lo pierda y suscríbase a nuestro boletín de noticias!