Ejemplos
En este apartado, ofrecemos algunos ejemplos que explican cómo crear consultas y mutaciones para la API de Shopify. En todos los ejemplos, nos conectamos a la API de administrador de Shopify. Nuestra tienda se llama altovamapforcetest.
Para ver las instrucciones para conectarse a la API de Shopify, consulte el tema API de Shopify y API de GraphQL . Para obtener información sobre cómo trabajar con el editor del cuadro de diálogo Configuración GraphQL, consulte el tema Editor de consultas/mutaciones.
Ejemplo 1: recuperar los primeros 10 productos
En este ejemplo, nuestro objetivo es recuperar los datos de los primeros 10 productos de nuestra tienda. El cuadro de diálogo Configuración GraphQL muestra la URL de nuestra tienda y el token de acceso como parámetro del encabezado, así como la definición de una operación de consulta.
La operación de consulta se ha definido de la siguiente manera:
•El tipo de operación raíz es el tipo de objeto consulta, que sirve como punto de entrada a la API.
•La estructura de consulta especifica el conjunto de campos que nos interesan para la selección. En este ejemplo, nos gustaría recuperar una lista de productos.
•El campo products tiene un argumento first : 10 que limita el número de productos recuperados a los primeros 10 artículos.
•El campo nodes es un campo de conexión que se utiliza para acceder a los datos de cada producto de la lista products.
•Los campos id y title especifican los atributos del producto que se deben devolver.
Aprenda a definir la consulta con este GIF
Para ver una demostración rápida que muestra cómo crear una consulta en el editor del cuadro de diálogo Configuración GraphQL, consulte el GIF de temal Editor de consultas/mutaciones.
Asignación
En cuanto haga clic en el botón Aceptar del cuadro de diálogo Configuración GraphQL, en el área de asignación aparecerá un componente de llamada a servicio web. En el componente, la estructura de la respuesta viene determinada por el esquema GraphQL de Shopify y los campos seleccionados en la consulta (en nuestro ejemplo, id y title de los primeros 10 productos). La respuesta se asigna a un archivo CSV (imagen siguiente).
Resultados
Se ha recuperado la siguiente respuesta del servidor:
gid://shopify/Product/9881539871060,Very Nice Gift Card
gid://shopify/Product/9881539903828,Cool Snowboard
gid://shopify/Product/9881539936596,Super Snowboard
gid://shopify/Product/9881539969364,Epic Ski Wax
gid://shopify/Product/9881540002132,Super-Duper Snowboard
gid://shopify/Product/9881540034900,Crazy Snowboard
gid://shopify/Product/9881540067668,Best Snowboard
gid://shopify/Product/9881540100436,Incredible Snowboard
gid://shopify/Product/9881540133204,Fantastic Snowboard
gid://shopify/Product/9881540165972,Terrific Snowboard
Ejemplo 2: recuperar información sobre un un producto en particular
En este ejemplo, nuestro objetivo es recuperar los datos de un producto en particular con un ID concreto. La operación de consulta (imagen siguiente) se ha definido de la siguiente manera:
•La consulta utiliza una variable llamada $productId. La variable es de tipo ID!. La marca ! indica que la entrada es obligatoria. Se suministrará un valor de entrada a la parte Solicitud del componente de llamada al servicio web.
•El campo product recuperará un solo producto de Shopify, utilizando el productId del producto.
•El campo variants recupera las variaciones del producto (en términos de tamaño o talla, color, etc.).
•El campo variants tiene un argumento first : 10, lo que significa que solo se recuperarán las primeras 10 variantes.
•Dentro de la subestructura de variants, solicitamos datos sobre cada variante seleccionando los siguientes campos que están en el campo nodes: displayName, price, updatedAt, availableForSale y taxable.
Asignación
A continuación, puede ver la asignación con la llamada a servicio web ya configurada. La parte Solicitud de la llamada contiene el parámetro de entrada (productId) que definimos previamente en la operación de consulta. Este parámetro de entrada recibe el ID de un producto a través de la constante. La estructura de la respuesta se asigna a un archivo JSON.
Resultados
Se han recuperado los siguientes datos del servidor:
[
{
"displayName": "Legendary Snowboard",
"price": "749,95",
"updatedAt": "2024-10-29T19:55:34Z",
"availableForSale": true,
"taxable": true
}
]
Ejemplo 3: crear un producto nuevo
En este ejemplo, nuestro objetivo es crear un producto nuevo en el servidor. Para ello, hemos definido una mutación (imagen siguiente) de esta forma:
•La mutación tiene una variable llamada $product que contiene datos de entrada para la función de mutación productCreate. La variable nos permitirá suministrar los datos del producto de forma dinámica (a la parte Solicitud de la llamada al servicio web). La variable es de tipo ProductCreateInput!, que es un tipo de datos predefinido en el esquema GraphQL de Shopify. La marca ! indica que la entrada es obligatoria.
•La función de mutación productCreate crea un producto nuevo.
•La función productCreate mutation tiene un argumento product que acepta como valor la variable $product.
•La subestructura del producto define los campos que queremos que Shopify devuelva una vez creado el nuevo producto. Estos campos son: id, title y descriptionHtml.
Asignación
A continuación, puede ver la asignación con la llamada a servicio web ya configurada. Como el campo id se genera automáticamente, solo hemos suministrado valores solo para los campos title y descriptionHtml. Tenga en cuenta que los datos que envíe para un producto nuevo no tienen por qué coincidir con los campos seleccionados en la estructura Respuesta: Por ejemplo, puede suministrar varios detalles del producto a la estructura Solicitud (por ejemplo, títulos, precios, variantes, etc.) pero recuperar sólo un subconjunto de estos datos (por ejemplo, sólo los títulos).
La respuesta se asigna a un archivo JSON.
Resultados
Se han recuperado los siguientes datos del servidor:
[
{
"ProductCreate": {
"product": {
"id": "gid://shopify/Product/11863012147540",
"title": "Awesome Snowboard",
"descriptionHtml": "<p>This awesome snowboard is for the bold rider who demands power and precision. Choose the color and size that fits your style and your adventure.</p>"
}
}
}
]
Ejemplo 4: recuperar la respuesta completa (depuración)
Según la especificación GraphQL, los datos devueltos por la consulta o mutación residen en la clave data. Además de la clave data, también hay una clave errors y una clave extensions. La clave errors contiene cualquier error que ocurra durante la ejecución. La clave extensions ofrece metadatos adicionales, normalmente con fines de depuración y registro.
A efectos de pruebas y depuración, puede que desee asignar la respuesta completa. La forma más sencilla de hacerlo es asignar el objeto de respuesta que contiene los valores de las claves data, errors y extensions a cualquier esquema JSON. La idea principal es que any es un tipo de datos flexible que puede coincidir con cualquier dato JSON válido. Esto significa, además, que no tiene que crear un esquema especial que corresponda a la estructura Respuesta.
Para definir tal esquema JSON, cree un archivo de esquema JSON (por ejemplo, any.schema.json), abra el esquema JSON en un editor y escriba el valor {}.
En la asignación que aparece más abajo, se observa una llamada a un servicio web cuya respuesta está asignada a un esquema JSON llamado any.
Resultados
Además de los ID y nombres de producto, se han recuperado los siguientes metadatos del servidor:
"extensions": {
"cost": {
"RequestedQueryCost": 6,
"ActualQueryCost": 6,
"ThrottleStatus": {
"MaximumAvailable": 2000,
"currentlyAvailable": 1994,
"restoreRate": 100
}
}
}