Magento 2 es una potente plataforma de comercio electrónico que ofrece funciones listas para usar. Sin embargo, puede haber ocasiones en las que necesites ampliar la plataforma para satisfacer requisitos empresariales específicos. ¡Aquí es donde entra GraphQL personalizado!
Si no estás familiarizado con GraphQL, es un lenguaje de consulta para API desarrollado por Facebook (ahora Meta). Permite a los desarrolladores obtener los datos que necesitan y recibirlos sólo en respuesta a sus consultas. Magento 2 es compatible con GraphQL para ayudarte a agilizar tus procesos de datos.
En este artículo, te explicaré cómo utilizar GraphQL en Magento 2. Empezaré habilitando el módulo GraphQL en Magento 2 y accediendo al punto final GraphQL, y luego haré consultas GraphQL para obtener datos sobre productos, categorías, clientes, pedidos, etc.
- Visión general de GraphQL en Magento 2
- Mejoras de GraphQL en Magento 2.4.6
- ¿Por qué GraphQL es útil para los desarrolladores?
- Comparar GraphQL vs API Rest
- Requisitos para GraphQL en Magento 2
- Acceder al punto final GraphQL en Magento 2
- Ejecutar peticiones GraphQL en Magento 2
- Acceder al punto final GraphQL en Magento 2
- Crear GraphQL personalizado en Magento 2
- Crear una mutación GraphQL
Visión general de GraphQL en Magento 2
GraphQL es una alternativa a REST y SOAP en Magento 2. Te permite especificar y recibir los datos fácilmente, haciendo que las respuestas de la API sean más eficientes y reduciendo la sobrecarga de la red. Un ejemplo sencillo es la Aplicación Web Progresiva (PWA) con renderización del lado del cliente.
En Magento 2, GraphQL es una nueva función añadida en la versión 2.3.4. Su principal objetivo es acelerar y potenciar las API, su flexibilidad y su eficacia. Permite a los desarrolladores consultar y mutar datos en la base de datos de Magento utilizando una sintaxis estandarizada.
Se utilizan tres operaciones principales de GraphQL:
- consultas (para leer y recibir información);
- mutaciones (necesarias para realizar acciones, crear datos y modificar información. Por ejemplo, el correo electrónico de un cliente);
- suscripciones (esta operación aún no está disponible en Magento, pero ofrece la posibilidad de obtener datos del servidor en tiempo real de forma automática al cabo de un tiempo, por ejemplo, para las notificaciones).
Experimenta la Tienda Demo Magento 2 de Cloudways – ¡No necesitas conocimientos técnicos!
Experimenta una tienda Magento 2 totalmente funcional construida sobre el renombrado alojamiento Cloudways para ofrecer las velocidades más rápidas.
Mejoras de GraphQL en Magento 2.4.6
En Adobe Commerce 2.4.6, la funcionalidad de pedidos de compra también se ha expuesto completamente en la capa GraphQL añadiendo reglas de aprobación en la API.
Los propietarios de tiendas y comerciantes tendrán grandes mejoras de rendimiento gracias a la mejora del proceso de representación del árbol de categorías en Magento Open Source 2.4.6.
Se ha mejorado la carga de los hijos de las categorías mediante la refactorización del código, eliminando las llamadas a métodos innecesarios, mejorando el almacenamiento en caché del árbol de categorías y cargando recursivamente los datos de las categorías.
También se han mejorado las operaciones con carros masivos para los tiempos de respuesta de las consultas, concretamente en situaciones en las que se han añadido 500 o más productos al carro de la compra.
¿Por qué GraphQL es útil para los desarrolladores?
GraphQL es útil para los desarrolladores de Magento 2 por las siguientes razones.
- Los desarrolladores pueden solicitar sólo los datos que necesitan, lo que se traduce en transferencias de datos más pequeñas y eficientes. Esto es especialmente importante para los dispositivos móviles y de bajo ancho de banda.
- Proporciona un modelo de datos flexible, que permite a los desarrolladores consultar los datos de forma más natural e intuitiva. Esto facilita la creación de aplicaciones complejas basadas en datos.
- Tiene una sintaxis sencilla e intuitiva, lo que facilita a los desarrolladores su aprendizaje y uso. Esta simplicidad reduce la curva de aprendizaje y permite a los desarrolladores centrarse en crear sus aplicaciones.
- Los desarrolladores pueden crear consultas, mutaciones y tipos GraphQL personalizados, lo que les permite ampliar el esquema predeterminado de la plataforma y crear funcionalidades personalizadas que satisfagan sus requisitos específicos.
- Permite realizar consultas optimizadas, lo que puede mejorar significativamente el rendimiento de la aplicación. Esto se debe a que reduce el número de peticiones API necesarias para obtener datos.
¡No dejes que las API obsoletas frenen tu tienda Magento!
Regístrate en Cloudways y experimenta el poder de una recuperación de datos más rápida y eficiente con GraphQL.
Comparar GraphQL vs API Rest
Con el auge de las PWA, es necesario obtener menores cantidades de datos y hacer menos peticiones a la API. Ahí entra en juego la tecnología avanzada y la necesidad de GraphQL. Magento 2 admite tanto GraphQL como las API REST para interactuar con la plataforma.
Éstas son algunas de las principales diferencias entre la API REST y GraphQL.
| API REST | GraphQL | |
| Consulta de | Con las API REST, normalmente haces peticiones separadas para cada recurso o punto final al que quieres acceder. | Con GraphQL, puedes recuperar todos los datos necesarios en una sola solicitud y especificar qué campos y datos quieres. |
| Almacenamiento en caché | Las API REST suelen ser más fáciles de almacenar en caché que GraphQL porque las URL se utilizan como claves de caché. | Con GraphQL, el almacenamiento en caché puede ser más difícil porque cada solicitud es única y puede requerir un conjunto de datos diferente. |
| Curva de aprendizaje | Las API REST son más sencillas de entender y utilizar, y se dispone de abundante documentación y herramientas. | GraphQL tiene una curva de aprendizaje más pronunciada, y puede llevar más tiempo dominar la tecnología. |
| Rendimiento | Las API REST pueden ser más rápidas cuando sólo se necesita una pequeña cantidad de datos. | GraphQL puede ser más eficiente que las API REST para algunos casos de uso, ya que reduce la sobrecarga y la infracarga de datos. |
Además, se puede observar que GraphQL embrolla realizar la limitación de velocidad y otras medidas de seguridad de denegación de servicio.
Aunque la elección de GraphQL o REST API en Magento 2 es totalmente subjetiva y se basa en las necesidades del sitio web. Pero un punto clave a tener en cuenta es que, en lo que respecta a la seguridad, RestAPI ofrece muchas formas innatas de imponer la seguridad de tus API.
Requisitos para GraphQL en Magento 2
Necesitas GraphQL IDE como GraphiQL o una extensión del navegador para ejecutar los ejemplos de código y los tutoriales. Si instalas una extensión del navegador, asegúrate de que puede establecer cabeceras de solicitud. Altair GraphQL Client es una de las extensiones de la Chrome Web Store que puede hacerlo.
💡 Nota: A efectos de este artículo, utilizaré Cloudways, donde está alojada mi tienda Magento.
Acceder al punto final GraphQL en Magento 2
El punto final GraphQL en Magento 2 es /graphql. Para acceder a la URL GraphQL, establece el punto final GraphQL introduciendo http://<magento2-server> /graphql en la barra de URL de tu IDE o de la extensión que instales más arriba.
Ejemplo: Petición de consulta
{
países {
regiones_disponibles {
código
id
nombre
}
nombre_completo_local
nombre_completo_espanol
id
abreviatura_de_dos_letras
abreviatura_de_tres_letras
}
}
Respuesta: Devuelve la lista de todos los países
Ejecutar peticiones GraphQL en Magento 2
Al hacer una solicitud GraphQL en Magento, la solicitud admite los métodos HTTP GET y POST. Las solicitudes de mutaciones deben hacerse sólo con el método POST. Opcionalmente, puedes enviar una solicitud de consulta GET en una URL.
Por ejemplo, http://<host> /graphql ?query=%7Bproducts envió una petición GET con una cadena de consulta en la URL.
Solicita
{
productos(
filtro: { sku: { eq: "24-WB01" } }
) {
artículos {
nombre
sku
}
}
}
Respuesta
{
"datos": {
"productos": {
"elementos": [
{
"nombre": "Bolsa de yoga Voyage",
"sku": "24-WB01"
}
]
}
}
}
Crear GraphQL personalizado en Magento 2
Es importante tener en cuenta que crear un nuevo módulo con un punto final GraphQL en Magento 2 requiere un buen conocimiento de la sintaxis GraphQL, así como de la plataforma Magento 2. Sigue los pasos que se indican a continuación para crear un módulo GraphQL en Magento 2.
Crea una carpeta Cloudways/Graphql en el directorio app/code.
Paso 1: Crear un archivo registration.php
Crea un archivo registration.php en app/code/Cloudways/Graphql/registrattion.php.
<php \Magento\Framework\Component\ComponentRegistrar::register( \Magento\Framework\Component\ComponentRegistrar::MODULE, Cloudways_Graphql', __DIR__ );
Paso 2: Crear un archivo etc/module.xml
Crea un nuevo archivo module.xml en el directorio etc. Este archivo debe definir la información básica sobre tu módulo, como el nombre, la versión y las dependencias. Aquí tienes un ejemplo de archivo module. xml.
<?xml version="1.0" ?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd">
<module name="Cloudways_Graphql" setup_version="1.0.0">
<secuencia>
<module name="Catálogo_Magento"/>
<module name="Magento_GraphQl"/>
</sequence>
</module>
</config>
Paso 3: Definir el esquema GraphQL
Un esquema GraphQL define los tipos, consultas y mutaciones que admitirá tu API.
A continuación, crea un archivo en el directorio app/code/Cloudways/Graphql/etc/schema. graphls como en el ejemplo siguiente. Ten en cuenta que la parte etc/schema.graphqls es obligatoria.
El archivo <module_name> /etc/schema .graphqls definirá:
- Define la estructura básica de las consultas y mutaciones.
- Define qué atributos pueden utilizarse como entrada y salida en las consultas y mutaciones GraphQL.
- Las solicitudes y las respuestas contienen listas separadas de características válidas.
- Apunta a los resolutores que verifican y procesan los datos de entrada y la respuesta.
- Es la fuente para mostrar el esquema en un navegador GraphQL.
- Define qué objetos se almacenan en caché.
Copia el siguiente código:
tipo Consulta {
productos (
buscar: Cadena
filtro: ProductAttributeFilterInput
TamañoPágina: Int = 20
páginaactual: Int = 1
ordenar: ProductAttributeSortInput
) : Productos @resolver(class: "Cloudways\Graphql\Model\Resolver\Productos")
@cache(cacheIdentity: "Cloudways\Graphql\Model\Resolver\Block\Identity")
}
entrada ProductAttributeFilterInput {
category_id: FilterEqualTypeInput
}
tipo SearchResultPageInfo {
tamaño_página: Int
página_actual: Int
total_páginas: Int
}
Definir consulta
Una definición de consulta consta de una línea, o puede ser compleja. El tipo se define como una Consulta. En el ejemplo anterior, utilizamos el objeto productos definido como nombre de Consulta, que define las palabras clave utilizadas para construir una consulta.
Puedes crear tu consulta personalizada como
tipo Consulta {
miCustomQuery(entrada: MyCustomInput!): MyCustomOutput @resolver(clase: "Vendor\\Module\Model\\Resolver\MyCustomQuery")
}
Ejemplo
tipo Consulta {
hola: Cadena
}
Definir parámetros de entrada
En la consulta GraphQL, cada definición de tipo incluye todos los atributos de entrada, salida y ordenación de un objeto. Puedes definir cada atributo que pueda utilizarse como entrada para realizar operaciones del módulo.
En el código anterior, se utiliza el objeto ProductAttributeFilterInput como atributo de entrada a filtrar.
entrada ProductAttributeFilterInput {
category_id: FilterEqualTypeInput
}
Del mismo modo, el objeto FiltroIgualTipoEntrada define un filtro que coincide exactamente con la entrada.
entrada FiltroIgualTipoEntrada {
en: [Cadena]
eq: Cadena
}
Resultados
El siguiente ejemplo filtra y da como resultado la búsqueda de productos cuyo category_id sea igual a 1.
{
productos(filtro: {category_id: {eq: "1"> {
recuento_total
artículos {
nombre
}
}
}
Especificar atributos de salida
La respuesta de la API permite a los desarrolladores crear una aplicación o integración personalizada, pero a veces no se espera obtener la respuesta personalizada. Por ejemplo, cuando especificas un precio en un filtro de entrada, Magento lo evalúa como un valor Float.
En un archivo schema.graphqls, la interfaz de salida define atributos de nivel superior. Debe especificarse el tipo de datos de cada atributo, ya sea un escalar, un objeto o una matriz.
En el código anterior, utilizamos la consulta productos. El atributo page_info contiene el tipo de datos SearchResultPageInfo definido en el archivo schema.graphqls en ModuleGraphQL.
El SearchResultPageInfo proporciona navegación para la respuesta de la consulta.
tipo SearchResultPageInfo {
tamaño_página: Int
página_actual: Int
total_páginas: Int
}
Definir anotaciones
Puedes describir cualquier atributo, definición de tipo o entidad dentro de un archivo schema.graphqls añadiendo lo siguiente a la línea:
@doc(descripción: "<Texto>")
Ejemplo
SKU: FilterTypeInput @doc(descripción – Número o código asignado a un producto para identificarlo, opciones, precio, etc.).
Paso 4: Caché de consultas
La directiva @cache define si se pueden almacenar en caché los resultados de determinadas consultas. Las consultas relativas a productos, categorías y CMS pueden almacenarse en caché.
Define las consultas almacenables en caché de la siguiente manera:
@cache(cacheIdentity: "Cloudways\Graphql\Model\Resolver\Block\Identity").
El valor Identidad de la caché apunta a la clase responsable de recuperar las etiquetas de la caché. Una consulta sin identidad de caché no se almacenará en caché.
Crea el archivo en Cloudways/Graphql/Model/Resolver/Block/Identity.php y copia el siguiente código:
<php
declara (tipos_estrictos = 1);
namespace MiModulo\NCuentaNumeroDeDias\Modelo\NResolverNavegacion;
utiliza Magento\Framework\GraphQl\Query\Resolver\IdentityInterface;
clase Identidad implementa IdentidadInterfaz
{
/** @var cadena */
private $cacheTag = "mi_modulo_producto_personalizado";
/**
* Obtener identidades de PromoBanners a partir de datos resueltos
*
* @param array $datosresueltos
* @devuelve cadena[]
*/
función pública getIdentities(array $resolvedData): array
{
devolver [ $this->cacheTag ];
}
}
Paso 5: Definir el resolvedor de esquemas
Los resolvers se encargan de gestionar las consultas y las mutaciones. En Magento 2, los resolvedores se definen como clases PHP. Puedes definir tus resolvedores en un directorio separado, como Model/Resolver.
Crea un archivo en Cloudways/Graphql/Model/Resolver/Products.php y copia el siguiente código:
<php
declarar(tipos_estrictos=1);
Espacio de nombres Cloudways\Graphql\Model\Resolver;
utiliza Magento\Framework\GraphQl\Exception\GraphQlInputException;
utiliza Magento\Framework\GraphQl\Config\Element\Field;
utiliza Magento\Framework\GraphQl\Exception\GraphQlNoSuchEntityException;
utiliza Magento\Framework\GraphQl\Schema\Type\ResolveInfo;
utiliza Magento\Framework\GraphQl\Query\ResolverInterface;
La clase Productos implementa ResolverInterface
{
/**
* @inheritdoc
*/
función pública __construct(
\Magento\Catalog\Api\ProductRepositoryInterface $productRepository,
\Magento\Framework\Api\SearchCriteriaBuilder $searchCriteriaBuilder
) {
$this->productoRepositorio = $productoRepositorio;
$this->searchCriteriaBuilder = $searchCriteriaBuilder;
}
public function resolver(Campo $campo, $contexto, ResolverInfo $info, matriz $valor = null, matriz $args = null)
{
$datosProductos = $this->obtenerDatosProductos();
devuelve $datosproducto;
}
/**
* @return array
* @throws GraphQlNoSuchEntityException
*/
función privada getProductsData(): array
{
prueba {
/* filtro para todas las páginas */
$criteriosDeBúsqueda = $this->searchCriteriaBuilder->crear();
$productos = $this->productoRepositorio->getList($criteriosBúsqueda)->getItems();
$productoId = $producto->getId();
foreach($productos como $producto) {
$productRecord['allProducts'][$productId]['sku'] = $producto->getSku();
$productRecord['allProducts'][$productId]['name'] = $producto->getNombre();
$productRecord['allProducts'][$productId]['precio'] = $producto->obtenerPrecio();
}
} catch (NoSuchEntityException $e) {
lanza una nueva GraphQlNoSuchEntityException(__($e->getMessage()), $e);
}
devuelve $productRecord;
}
}
Paso 6: Ejecuta los comandos
Ejecuta los siguientes comandos en el directorio raíz de tu instancia de Magento 2 para habilitar tu módulo y borrar la caché:
bin/magento module:enable Cloudways_Graphql bin/magento setup:actualizar bin/magento setup:di:compilar bin/magento caché:limpiar
Paso 7: Probar y ejecutar la consulta Graphql
El último paso es asegurarse de que la consulta no tiene errores y da respuestas adecuadas. Una de las muchas extensiones disponibles, como ChromeiQl, GraphiQL o Altair GraphQL Client, puede hacerlo.
Solicitar carga útil
{
productos (
buscar: "A"
tamañoPágina: 20
páginaactual 1
ordenar: { nombre: DESC }
filtrar: { }
) {
artículos {
nombre
sku
}
}
}
Resultado
El resultado será toda la colección de Productos con la cadena de búsqueda «A», ordenados de forma descendente.
{
"datos": {
"productos": {
"elementos": [
{
"nombre": "Mochila de hombro Strive",
"sku": "24-MB04"
}
]
}
}
}
Crear una mutación GraphQL
En GraphQL, la Mutación es un tipo de solicitud que realiza operaciones como leer para modificar los datos. Una mutación puede crear, actualizar o eliminar objetos y campos. Una mutación es una solicitud que modifica los datos de alguna manera, como añadir, editar o eliminar información. En la terminología REST, las consultas funcionan como solicitudes GET, mientras que las mutaciones son similares a POST, PUT y DELETE.
Las mutaciones en Magento GraphQL son potentes herramientas que pueden utilizarse para crear nuevas entidades, modificar las existentes o eliminar datos. Por ejemplo, puedes utilizar mutaciones para crear una nueva cuenta de cliente, añadir un producto a un carrito de la compra, actualizar el estado de un pedido o eliminar un registro de cliente.
Aquí tienes un ejemplo de una mutación GraphQL de Magento que crea una nueva cuenta de cliente:
Solicita
mutación {
crearCliente(
entrada: {
correo electrónico: "[email protected]"
nombre: "Juan"
apellido: "Doe"
contraseña: "Admin1234@"
}
) {
cliente {
nombre
apellido
correo electrónico
}
}
}
Respuesta
{
"datos": {
"crearCliente": {
"cliente": {
"nombre": "Juan",
"apellido": "Doe",
"correo electrónico": "[email protected]"
}
}
}
}
En este ejemplo, la mutación crea una nueva cuenta de cliente con el correo electrónico, nombre, apellidos y contraseña especificados. La respuesta incluye el nombre, apellidos y correo electrónico del nuevo cliente.
Resumen
Al utilizar GraphQL en Magento 2, puedes crear API más eficaces y flexibles que las API REST tradicionales. Esto se debe a que GraphQL permite a los desarrolladores especificar exactamente qué datos necesitan, en lugar de recibir un conjunto fijo de datos que puede contener más información de la necesaria.
Preguntas frecuentes
Q. ¿Por qué utilizar GraphQL en Magento 2?
A. GraphQL proporciona una descripción definida y comprensible de los datos necesarios en la API. Puedes crear API más eficaces y flexibles que las API REST tradicionales. GraphQL utiliza tipos para garantizar que los canales sólo piden lo que es posible y proporcionan errores claros y útiles.
Q. ¿Cómo configurar GraphQL en Magento 2?
A. Para configurar GraphQL en Magento, necesitarás seguir los siguientes pasos:
Necesitas GraphQL IDE como GraphiQL o una extensión del navegador para ejecutar los ejemplos de código y los tutoriales. Si instalas una extensión del navegador, asegúrate de que puede establecer cabeceras de petición. Altair GraphQL Client es una de las extensiones de la Chrome Web Store que puede hacerlo, o también puedes utilizar Postman.
Jyotishna Kumari
Jyotishina es Experta de la Comunidad Magento en Cloudways y tiene 4 años de experiencia en desarrollo web. Ha trabajado en sitios de comercio electrónico desde el cambio de milenio y ya trabajaba con Magento antes de que se lanzara la versión 1. Le encanta viajar y explorar nuevas ideas siempre que tiene tiempo. Ponte en contacto con ella en [email protected].
