Hola.

Soy Chuck Kosman,

ingeniero de lanzamiento en Shopify.

Hoy hablaremos sobre GraphQL,

un lenguaje de consultas para API.

Veremos qué es GraphQL

y qué herramientas puedes usar

para ponerte en marcha con GraphQL.

Por último, haremos un tutorial práctico

sobre cómo crear solicitudes de GraphQL

para la tienda Shopify.

Comencemos.

¿Qué es GraphQL?

Tan pronto como accedes a GraphQL.org,

encuentras esta cita.

GraphQL se describe como

un lenguaje de consultas para API

con un tiempo de ejecución

para completarlas con datos existentes.

Los lenguajes de consultas

son métodos expresivos y estructurados

para solicitar datos.

Es posible que los conozcas

en el contexto de las bases de datos.

Aquí se refiere a usar

los lenguajes de consultas para las API.

Para explicarlo de manera más práctica,

esta sería una buena definición:

GraphQL es un método
expresivo y estructurado

para solicitar datos a otra aplicación

y el sistema subyacente
para obtener esos datos.

Es posible que ya conozcas REST,

como método para solicitar datos

a otra aplicación.
GraphQL se considera un REST mejor.

REST solucionó muchos

de los problemas de sus predecesores,

pero GraphQL
está diseñado específicamente

para abordar algunas

de las deficiencias de REST

para aplicaciones modernas.

Uno de los inconvenientes de REST

en las aplicaciones modernas

es que recupera menos o más datos

de los solicitados,

es decir, en una única solicitud,

se obtienen demasiados datos

o no se obtienen los suficientes.

Usemos un restaurante,

una analogía
muy popular para las API,

para explicar estos conceptos

con más detalle.

Utilizaré una heladería

en lugar de un restaurante.

Y comenzaré por el caso

que recupera demasiados datos.

En Shopify, si quiero saber

algo sobre un pedido,

tengo que usar esta terminal

en la API de REST del panel de control.

Al conectar
una identificación de pedido,

obtengo todos los datos

que podría querer saber

sobre un solo pedido.

Para un restaurante o una heladería,

podría tratarse de un camión de helados

con presentaciones de helados

preestablecidas en el menú,

con ingredientes que no quieres

y no hay una combinación

que realmente te guste.

El restaurante dedicó
todo su tiempo y esfuerzo

para agregar los ingredientes

y preparar los productos

como especificaron que lo harían.

Pero si algo no te gusta

o no necesitas,

tienes que sacarlo tú mismo.

Esto puede ser bastante ineficiente

e inflexible para ambas partes.

Por el contrario, puede ocurrir

que no obtengas datos suficientes

de una sola solicitud.

Esto suele pasar

cuando buscas datos demasiado anidados.

Este es un ejemplo en Shopify,

si quiero obtener los metacampos

de un conjunto de productos específico.

Primero, genero una solicitud

para obtener todos los productos.

Pero esos no son todos los datos

que realmente necesito.

Tengo que usar una terminal diferente,

conectar las identificaciones

y, finalmente, obtengo
los metacampos que quiero.

Quizá hayas oido hablar de esto

como el problema de n+1.

Envío una solicitud para obtener

la lista completa de productos

y, luego, tengo que generar

las solicitudes necesarias

para obtener cada recurso

que me interesa realmente.

Para la analogía de la heladería,

sería como comprar un helado

y, para agregar aderezos,

tener que entregárselo al heladero

cada vez,

pudiendo obtener solo un extra cada vez.

Muy ineficiente e inflexible.

Con GraphQL

proporcionas a la vez

los datos del lenguaje de consultas

que quieres usar junto con la solicitud

y obtienes solo los datos que solicitas.

Lo interesante aquí es
que estoy usando una solicitud POST

para esta terminal en la API

del panel de control, GraphQL.json,

y a la vez, proporcionando el cuerpo

de esta estructura de datos anidada.

Esta estructura particular

es un ejemplo de un pseudocódigo

para solicitar ciertos campos

según una identificación específica.

En este caso, solo me interesan

el título, el identificador
y las variantes de los productos

que podrían interesarme,

y campos en esas variantes.

También puedo agregar campos

en los tres puntos.

Así obtengo solo los datos que solicito.

En la analogía de la heladería,

sería como ir hasta el mostrador,

decir exactamente
qué sabores y extras quiero,
y obtener exactamente eso
en una solicitud eficiente y flexible.

Indico exactamente qué datos

quiero obtener en cada solicitud.

Es claro tanto para el servidor,

que completa la consulta,

como para el cliente, para mí,

para mis colegas y para la aplicación

qué datos se utilizan.

Es muy útil para mejorar la claridad

y trabajar rápido.

Esto permite
una iteración rápida del front-end.

Como hay una única terminal,

no tengo que manejar

muchas terminales diferentes

como desarrollador front-end.

Qué datos obtengo depende

de la estructura de la solicitud,

no de las llamadas
a terminales en orden.

Es posible que te preguntes,

si solo hay una terminal,

¿cómo sé qué datos puedo obtener?

Esta es la base de GraphQL,

esta documentación clara

de sus capacidades

mediante un esquema.

Ese esquema es de tipado fuerte.

Esto significa que tipos subyacentes

definen qué patrones de datos obtienes.

Entonces, es muy fácil saber,

a medida que escribes,

o das formato a la solicitud,

si introduces un error.
Básicamente esta es la definición
del tipado fuerte en este contexto.

En última instancia,
todas estas características

hacen de GraphQL un sucesor

más eficaz y flexible de REST.

Ahora que ya sabes qué es GraphQL

y cómo se compara con REST,

hablemos sobre qué herramientas

puedes usar para crear

solicitudes de GraphQL en Shopify.

Puede ser tan simple

como una solicitud cURL,

pero así no aprovecharías

este esquema de tipado fuerte,

una de las funciones

más útiles de GraphQL.

Sin embargo, es posible obtenerla

con GraphiQL IDE

o Entornos de Desarrollo Integrado.

Hay disponible una implementación

para la API del panel de control

de GraphQL

y la API de la tienda online.

Hablaré sobre la diferencia

entre ellas en un momento.

Ahora, abordemos la implementación

de la API del panel de control.

Hay un documento

sobre el explorador de la API GraphiQL

del panel de control de Shopify.

Puedes empezar a explorarlo

en modo de solo lectura

aquí mismo en la documentación,

pero si quieres seguir este tutorial,

es recomendable que instales

la aplicación GraphiQL de Shopify.
Necesitarás una tienda para instalarla,

así que si aún no tienes

una tienda en desarrollo de partner

o una tienda en período de prueba,

no te preocupes.

Hay información muy útil

sobre cómo hacerlo.

Antes de instalarlo,

si necesitas poner en marcha una tienda,

puedes consultar la documentación

sobre cómo crear

tu primera solicitud de GraphQL

en los tutoriales
para desarrolladores de Shopify.

Y justo aquí,

hay solo dos pasos

que debes seguir de estos tres.

Primero, crea una cuenta de partner.

Los usuarios del ecosistema

usan estas cuentas

para crear soluciones para comerciantes.

Es totalmente gratis.

Luego, con esa cuenta de partner,

podrás crear una tienda en desarrollo

o iniciar sesión en tu tienda

si ya tienes una.

No seguiré esta última parte

del tutorial con GraphiQL,

pero puedes seguir esto

si prefieres trabajar
con un cliente HTTP independiente.

Mostraré cómo sería esto

en unos minutos.

Si no tienes una tienda, crea una.

Y es muy recomendable
que incluyas datos de prueba.
Así, cuando quieras
realizar una consulta,

podrás obtener datos relevantes.

Puedes detenerte
en los productos y las variantes,

o incluir productos, clientes y pedidos,

si así lo deseas.

Esos son los tres principales.

Volveré al explorador de la API

GraphiQL del panel de control de Shopify

y lo instalaré
en una tienda que ya configuré.

Seleccionaré este enlace para instalar

la aplicación GraphiQL de Shopify.

Ya tengo una tienda para comenzar,

graphql.myshopify.com.

La seleccionaré
con la función de autocompletar.

Y aquí es donde defines los alcances

del acceso de la aplicación.

Si sabes que las tiendas

no se utilizan para producción,

puedes seleccionar todas sin problemas.

Si la tienda ya está en producción,

es recomendable que uses

una tienda en desarrollo o de prueba.

Además, ten cuidado.

Esta aplicación puede leer y escribir.

Presta atención
al seleccionar los alcances.

Para lo que quiero mostrar

en este tutorial,

realmente solo necesito productos.

Seleccionaré todo,
porque facilita el proceso
y lo instalaré.

Se mostrará un aviso
para confirmar si deseo otorgar

todos estos alcances a la aplicación.

y respondo que sí.

Cuando finaliza la instalación,

se muestra una interfaz como esta:

una columna a la izquierda,

con el nombre de la tienda

en formato similar a JSON,

y esta columna a la derecha,

en blanco por ahora.

Usaré esta sección para el tutorial,

pero volveré a los otros métodos

de trabajo con GraphQL

por el momento.

Como dije antes, también puedes usar

un cliente HTTP independiente.

Para este tutorial

estoy usando GraphiQL IDE

porque no es necesario
especificar la terminal.

Solo hay una en GraphQL.

Es una de sus ventajas.

Y tampoco tengo
que configurar los encabezados.

Mostraré cómo se ven esos encabezados,

si prefieres trabajar de esta manera.

Necesitarás dos encabezados.

Deberás iniciar una aplicación privada

y usar la contraseña de esa aplicación

como token de autenticación

en este nombre de encabezado.

Y especificar el tipo de contenido

como aplicación JSON.
Hay una aplicación GraphQL
que confunde a algunas personas.

Existen diferencias sutiles.

Pero es recomendable
usar la aplicación JSON

con un cliente HTTP independiente.

Si no funciona,
pasa a la aplicación GraphQL.

Para obtener más información,

si olvidaste dónde está la diapositiva,

o si quieres explorar el tema a fondo,

en el documento sobre cómo crear

tu primera solicitud de GraphQL,

podrás consultar cómo usar GraphiQL

y, además, cómo usar

un cliente HTTP independiente.

De hecho, hay un artículo del blog

excelente con un tutorial completo

sobre cómo configurar

un cliente llamado Insomnia.

También hay un kit

con consultas cargadas previamente

que puedes usar

para ponerte a trabajar de inmediato.

En el documento, se detallan
los encabezados que necesitarás

y se incluyen
algunos ejemplos de solicitudes.

Este es un excelente recurso

para explorar después del tutorial.

También hablaré

sobre algunos elementos de esto.

Por último, si comienzas

a trabajar a escala,

GraphQL IDE no será útil para ti,

ya que es más un método de prueba.

Tampoco usarías
un cliente HTTP en producción,

crearías una aplicación completa.

Para crear una aplicación completa,

es recomendable que explores

las bibliotecas del cliente de GraphQL.

Gracias a la predictibilidad

que ofrece el esquema

de tipado fuerte de GraphQL,

puedes superponer sobre este

muchas herramientas

para lograr un desarrollo

realmente rápido y asombroso.

Quizá conozcas Apollo o Relay,

bibliotecas populares de clientes,

pero hay otras disponibles

según qué lenguajes,

marcos y plataformas
sean tu objetivo.

Mencioné brevemente esto antes,

hay dos API diferentes

para trabajar con GraphQL.

Las API del panel de control,

REST y GraphQL, se usan

para crear aplicaciones e integraciones

del panel de control de Shopify,

es decir,
para extender la trastienda de Shopify.

La API de la tienda online se usa

para compras orientadas al cliente,

un propósito muy diferente.

También tenemos
kits de desarrollo de software o SDK

para la web, Android, iOS e incluso

experiencias en juegos con Unity.

Además de que GraphQL

es la única opción disponible

de API de tienda online a tienda online,

existen ventajas claras

que ubican a GraphQL sobre REST.

De hecho, hay ciertas tareas

que puedes completar

con la API de GraphQL

del panel de control

que no puedes hacer

con la API de REST.

En otras palabras,
Shopify confía en GraphQL.

Vemos los beneficios de GraphQL

en comparación con las API de REST.

Por eso en el futuro,

y, de hecho, ya está sucediendo,

habrá ciertas tareas

que solo podrás hacer

con la API de GraphQL

del panel de control.

Puedes ver algunas aquí,

en orden cronológico

si ya se lanzaron.

Con la API de GraphQL, puedes

realizar cambios masivos de inventario

de forma mucho más eficiente

que con la API REST.

Una excelente opción

para gestionar inventario a gran escala.

La API de traducción
solo es compatible con GraphQL.

Para elementos multimedia de productos,

GraphQL permite usar imágenes,

videos y modelos 3D.

Edición de pedidos, muy solicitado.

Solo puede hacerse con GraphQL.

Las API de aranceles e impuestos

y la vista previa para desarrolladores

solo son compatibles con GraphQL.

En el futuro habrá más funciones

disponibles solo con GraphQL.

Echa un vistazo al registro de cambios

para mantenerte actualizado

con las versiones de Shopify API.

Las herramientas ya están configuradas.

Ahora, comenzaré a crear solicitudes

a la tienda de Shopify con GraphiQL IDE.

Abriré la tienda aquí en el navegador,

justo donde la dejé

con la instalación de GraphiQL IDE.

Deberías ver algo similar.

Lo primero que haré es aplicar formato

a esto para que se parezca

a cómo otros trabajan con esto.

Como puedes ver,

el lenguaje de consultas de GraphQL,

incluso para este ejemplo simple,

se parece un poco
a una estructura anidada de JSON.

Toco el botón de ejecutar aquí.

Básicamente, así envío la solicitud

para obtener lo que necesito.

Ejecuto la consulta.

Y obtengo un formato JSON

con dos propiedades.

Una se llama "data".

Verás que la estructura de los datos

refleja exactamente
el formato de la solicitud que ingresé.

Tengo una propiedad de tienda,

y el valor de la propiedad es un objeto.
Ese objeto tiene
una clave llamada "name" que solicité.

El nombre de mi tienda
es "Getting Started with GraphQL".

Esta extensión en realidad

indica el costo de la consulta.

Si utilizaste las API de Shopify antes,

en particular la API de REST,

sabes que hay un límite

en la cantidad de solicitudes
que puedes enviar en un cierto momento

y cuán rápido esas solicitudes

se fugan del cubo.

Lo que se conoce como

"modelo de cubo de fugas".

GraphQL tiene las mismas limitaciones,

pero en el costo de la consulta,

no en la llamada.

El resultado de esto es que

GraphQL sea mucho más eficiente.

Recuerda el ejemplo
con demasiados datos.

Una gran cantidad de cálculos

se procesan en segundo plano

que no son necesarios para ti.

GraphQL calcula el costo de la solicitud

en función de la solicitud,

por lo que es mucho más eficiente.

¿Qué otra consulta puedo realizar?

Pulso Enter (Intro)

y empiezo a escribir cualquier letra.

Escribiré "C" para el código de moneda.

Tan pronto como hago esto,

obtengo opciones de las cosas

que puedo consultar para la tienda.

Seré más específico,

no son solo cosas,

se llaman "campos".

Un campo son los datos

que te interesan.

Puedes hacer esto con GraphiQL

porque es un esquema de tipado fuerte.

Conoce las capacidades de la API

y sabe exactamente qué campos

pertenecen a qué nodos.

Hablaré sobre los nodos en unos minutos.

Entonces, si quiero conocer

el código de moneda de la tienda,

presiono reproducir nuevamente

y obtengo la moneda.

Tengo que configurar la tienda en USD.

Además de la opción de autocompletar,

¿cómo sé cuáles son

las funciones de esta API?

¿Cuál es ese esquema de tipado fuerte?

En este GraphiQL IDE

y en clientes HTTP independientes

con buenas funciones de GraphQL,

verás documentación, como aquí,

o un esquema.

Esto indica exactamente

qué se puede hacer.

Puede parecer
algo misterioso al principio

cuando comienzas con GraphQL.

Puedo hacer dos cosas

en el nivel más básico.

Puedo leer datos, que es una consulta,

y puedo realizar una mutación.

La mutación se utiliza
en operaciones de escritura.
Si hacemos una comparación
con arquitecturas CRUD en REST,

leer es todo lo que hace una consulta.

Y las mutaciones son todo lo demás:

crear, actualizar y eliminar.

Lo que estoy haciendo aquí,

incluso si omito la palabra "consulta",

es una consulta.

Entonces, si escribo "Query" aquí

y le doy a reproducir,

obtengo exactamente lo mismo.

Empezaré con una consulta

y, luego, pasaré a las mutaciones.

La siguiente pregunta es,

¿cómo sé que puedo obtener la tienda

a partir de la ruta de la consulta?

En otras palabras, mi punto de entrada

para la consulta de datos

es la ruta de consulta.

Puedo explorar el esquema

para obtener exactamente eso.

Una consulta siempre proporciona

un tipo de ruta de consulta.

Si hago clic en la ruta de consulta,

hay mucha información disponible.

Podría consultar muchas cosas,

y este es el esquema.

Esto define lo que puedo

y no puedo consultar.

Está en orden alfabético.

Me desplazaré hasta la tienda (shop).

Esta es la definición del esquema

para la tienda.

Indica que proporciona

un recurso de tienda

que corresponde al token de acceso

de la solicitud.
En realidad, no indiqué explícitamente
un token de acceso.

Esto es lo mejor de usar GraphiQL.

Entonces, ¿qué significa esto

cuando se trata de un esquema?

¿Qué significa "shop:shop!"?

Significa que si hago una consulta

para un campo de la tienda,

"s-h-o-p" en minúscula,

obtengo un tipo,

como lo indica "S-H-O-P" en mayúscula.

Entonces, con "SHOP" en mayúscula,

sé qué campos puedo consultar

debajo de la tienda.

El signo de exclamación significa

que no se puede anular.

Es decir, debo obtener un resultado.

¿Cómo sé si nombre y código de moneda

están disponibles en la tienda?

Si hago clic en el tipo de tienda,

aquí mismo,

esto es todo lo que incluye la tienda.

Si me desplazo hacia abajo,

hay mucha información.

Aquí obtuve el código de moneda.

¿Qué muestra el código de moneda?

Proporciona un tipo de código de moneda.

¿Qué muestra el nombre?

El nombre proporciona una cadena.

Esta es la ventaja del esquema

de tipado fuerte de GraphQL

y las herramientas relacionadas.

Puedo explorar el esquema en tiempo real

para ver exactamente qué puedo obtener.
Y sé exactamente, de manera predecible

qué datos puedo obtener y cuáles no,

y qué formato tendrán.

Para muchos propósitos, a veces,

puedes usar la tienda en producción,

pero es recomendable
comenzar a explorar a fondo

algunas entidades de datos de la tienda.

Mostraré un ejemplo con productos.

Estructuraré la consulta mientras avanzo

y la compararé con el esquema

para que puedas ver qué ocurre.

También mostraré una visualización

sobre cómo modelar mentalmente

la relación entre estos tipos

en el esquema.

Eliminaré la palabra "query",

porque al hacerlo, se genera

implícitamente una consulta.

Elimino esto y conservo las llaves.

Estoy en la raíz de la consulta.

Y me interesan los productos.

Los productos son algo más complicados.

Tengo el campo de productos

y este paréntesis donde se indica

"primero", "siguiente", "último",

"anterior", "clave de ordenación", etc.

Finalmente, indica que obtendré

un tipo llamado "ProductConnection".

Demasiada jerga,
así que comencemos desde cero.

Utilizo productos aquí

y lo selecciono con autocompletar,

sabiendo que puedo consultar productos

en la ruta de consulta.
Luego, abro las llaves nuevamente,
pero ¿qué ocurre si hago esto?

Se produce un error.

Se muestra un error de análisis 403.

Básicamente debo incluir algo más aquí.

¿Qué quiero consultar de los productos?

Supongamos que quiero conocer el título.

¡Qué extraño!

Cuando escribo "title",

no está disponible.

Entonces, ¿qué está pasando?

Presiono el botón de ejecutar.

El campo "title" no existe

en "ProductConnection".

Gracias, esquema
de tipado fuerte. ¡Fantástico!

Pero sugiere que algo está disponible

para la conexión del producto

llamado "edges".

y hay un conjunto "ProductEdges".

Usaré "edges",

que tendrá algunos campos.

Hago clic en "ProductEdge"

para ver qué ocurre exactamente.

Está disponible un cursor y un nodo.

Al parecer, con el nodo,

obtengo el tipo de producto,

que es lo que quiero consultar.

En el nodo, están disponibles

algunas categorías para productos

que resultan más conocidas.

Supongamos que solo quiero

la identificación y el título.
Sé que estos son campos.

No necesito leer toda la lista.

Presiono el botón de ejecutar

y se mostrará un error.

Según el mensaje,
debo agregar "first" o "last".

¿Qué significa esto?

Línea dos, columna tres.

Debo ingresar algo en los productos

para clasificar como primero o último.

El esquema de tipado fuerte

es muy informativo.

¿Qué es "first" o "last"?

Al igual que en REST,

no es posible obtener

todos los productos

con la terminal
para obtener todos los productos.

Se utiliza la paginación
basada en el cursor

por recomendación
de las especificaciones GraphQL.

Pero aparte de eso,

echa un vistazo a cómo hacer esto.

Para proporcionar un argumento,

un requisito en una solicitud,

abro paréntesis.

En realidad, aquí ya se muestran

las opciones disponibles.

Voy a hacer lo más simple posible.

Selecciono "first".

¿Cuáles son los primeros?

Tengo que indicar un número entero.

Diré que quiero obtener

los primeros diez productos.

Ignoremos "edges" y "node"

por el momento,

lo abarcaremos en breve.

Presiono el botón de reproducir

y ahora sí se pone interesante.

Tengo "data", que proporciona

un objeto con la propiedad de producto.

Este proporciona un objeto "edges",

que es un conjunto de objetos.

Cada uno contiene un objeto "node"

y, finalmente, los datos que solicité.

Tengo la identificación
y el título en cada producto.

¿Cuál es el costo?

Doce puntos.

¿Qué significa esto?

En GraphQL, el tamaño máximo del cubo

es de mil puntos

y eso se repone
a cincuenta puntos por segundo.

Compara esto con las cuarenta llamadas

de la API de REST que puedes tener

en el cubo de la API de REST

y se repone a dos llamadas por segundo.

El resultado neto:
GraphQL es mucho más eficiente que REST,

incluso sin todos los demás beneficios.

Volveré a esta sección extraña

de "edges" y "node".

¿Qué es eso?

Cuando hablo sobre GraphQL,

en relación con las API,

me refiero a modelar los datos

como una gráfica,

una representación visual

de cómo se conectan entre sí
diferentes datos.

Así que hablaré un poco

sobre la terminología de las gráficas

y cómo te ayudará a entender esto.

Tan pronto como comiences

a trabajar con listas,

te encontrarás con "edge" y "node"

todo el tiempo.

Retrocederé un paso
y explicaré qué son.

Esto es esencialmente

una versión simplificada

de la consulta que acabo de escribir.

Aquí en formato de código.

Y aquí la representación visual

de lo que está sucediendo.

Comienzo por la raíz de la consulta

y la conecto a los productos.

Esos productos tienen propiedades.

Quiero consultar el título.

En la teoría de gráficas,

a estas entidades individuales

se las conoce como "node" (nodos).

Las relaciones entre las entidades

se denominan "edge" (bordes).

Por eso, a nivel de la raíz,

si quiero saber acerca de los productos,

tengo que hacer una consulta

para obtener todas las relaciones

con los productos.

Le digo, quiero obtener todos los edges

y al final de los edges,

muéstrame las entidades.

Y esas son los nodes.

Cuando empieces a trabajar

con solicitudes múltiples,

por ejemplo, para obtener una lista,

te acostumbrarás a decir "edges, nodes"

antes de finalmente obtener los datos.

Así que vayamos un paso más allá.

Hablamos de las consultas muy anidadas

y sobre obtener menos datos antes.

Supongamos que quiero obtener

todas las variantes

en estos diez primeros productos.

Si escribo la letra "v",

se muestran las variantes

entre las opciones.

Hay una lista de variantes

para los productos.

Sé que tengo
que definir un valor para "first".

Escribiré diez nuevamente.

Así obtengo una lista de edges,

y al final de esos edges,

el nodo de la variante.

Quiero obtener la identificación

y el título de las variantes.

Hago clic en el botón de ejecutar.

Nuevamente, la estructura de los datos

que obtengo

refleja exactamente
la estructura de los datos

como los solicité.

Tengo "data", "products" como objeto

y "edges" como conjunto.

Cada nodo tiene la identificación

en el título, según lo solicité,

y toda la información de la variante,

la identificación
y el título de cada variante.

Podría ampliar esto con el precio

y así sucesivamente,

al consultar el esquema y ver qué datos

están disponibles para las variantes.

Volviendo a este modelo mental,

todo lo que hice

fue tomar la solicitud

y ampliarla un poco más.

Los productos tienen una relación

con las variantes.

Los nodos de productos,

con los nodos de las variantes.

En un modelo de gráficas,
cada vez que hay una relación,

esta se denomina edge,

es decir, la línea entre dos nodos.

Entonces, cada producto

tiene algunas variantes en el extremo.

En este caso, solo tengo dos,

para que el diagrama sea más breve.

Solo quiero mostrar en la gráfica

lo que hicimos

al agregar variantes para los productos.

Comenzamos aquí
con los nodos de productos

junto a esta raíz de consulta.

Sabemos que existe una relación

entre variantes y productos.

Y dentro de este nodo de producto,

hay una conexión de variantes.

En GraphQL una conexión

es una lista de edges.

Un edge es una relación

entre dos nodos.
En el extremo del edge está el nodo,

que tiene los campos

que quiero obtener.

Volviendo a la gráfica visual,

los nodos de producto están conectados

con nodos de variantes.

La línea representa un edge,

y esas variantes tienen títulos.

Cuando veas la palabra "connections"

(conexiones),

recuerda que tienes que seguir

esta secuencia de edges y nodes

para cumplir con este modelo subyacente

y establecer la API correctamente.

Entonces,
hablamos sobre cómo consultar datos.

Eso es solo la mitad de la ecuación.

También es necesario
poder escribir datos.

Esta es una consulta,

incluso si omites la palabra "query"

en la parte superior, es una consulta.

Ahora, escribimos "mutation".

Y si retrocedo
en el esquema hasta la raíz,

puedo realizar consultas y mutaciones.

Por lo tanto, esto ya no será válido.

Explicaré qué tipos de mutaciones

se pueden hacer.

Las mutaciones incluyen

todo lo relacionado con escribir datos.

Crear, cancelar, actualizar, eliminar.

En Shopify nombramos
las mutaciones de esta manera.

Primero, aquello
a lo que se aplica la mutación

y, luego, la operación real

que se lleva a cabo.

Sin explorar alfabéticamente la lista,

escribo la letra "p".

Como ves, se muestran las opciones

crear, eliminar y actualizar.

Selecciono "productCreate".

Ahora puedo desplazarme

por este esquema en el lado derecho

para explorarlo alfabéticamente

o pasar el ratón sobre esta opción

y hacer clic en este nombre.

Así puedes acceder rápidamente

a la definición de la mutación.

Esto es muy útil.

¿Qué ocurre aquí?

Esto significa que con esta mutación

obtendrás una carga

de creación de producto.

Y se proporcionarán algunos argumentos

como parte de esta mutación

Si ya usas la API REST,

sabes que cuando creas un producto,

la respuesta incluye toda la información

que podrías querer obtener

sobre el nuevo producto.

Aquí, al igual que con las consultas,

puedo especificar
qué datos quiero obtener.

Aquí agrego los datos.

Primero, el producto.

Y luego los datos comunes,

creación, descripción, título, etc.
Lo más importante aquí
son los argumentos.

¿Qué información tengo aquí?

El signo"!" indica que no puedo anular

este tipo de entrada de producto.

Así que debo incluirlo.

"media" es un conjunto
de este tipo de entrada

de creación de medios
que no se puede anular.

El conjunto en sí se puede anular.

No es necesario proporcionarlo.

Entonces, solo debo proporcionar

esta entrada de producto.

Como con todos los argumentos,

abro paréntesis.

Incluyo "input".

Agrego un formato de objeto.

Creo un título para este producto,

"Producto asombroso",

Luego, abro la mutación

para obtener la carga

de creación de producto.

Esta incluye un campo de producto,

y dentro de ese producto,

obtengo la información que me interesa,

como la identificación.

Y solo para asegurarme

incluiré el título.

Presiono el botón
para ejecutar la mutación.

Si trabajaste con la API de REST antes,

verás que las identificaciones

son diferentes y no son intercambiables.
GraphQL tiene su propio conjunto
de identificaciones para los nodos.

No intentes
intercambiar las identificaciones.

Y finalmente obtengo
el título "Producto asombroso".

¡Buen trabajo!

Completaste el tutorial para comenzar

a hacer consultas y mutaciones

en una tienda Shopify con GraphiQL.

¿Quieres ampliar tus conocimientos

sobre GraphQL?

Hay muchos recursos útiles en la web

para aprender sobre GraphQL.

Shopify comparte algunos recursos

que mencioné durante el tutorial,

este tutorial y otro sobre cómo crear

tu primera solicitud de GraphQL.

Este es un excelente recurso

para consultar

después de ver este tutorial.

Las mutaciones y consultas del tutorial

son ligeramente diferentes,

pero los principios son los mismos.

El kit de aprendizaje
de GraphQL de Shopify

es un excelente punto de partida

para empezar a trabajar

con un cliente HTTP independiente.

En este artículo del blog,

hay un debate sobre GraphQL

y un conjunto para descargar

de consultas y mutaciones de Insomnia

preconfiguradas, que puedes usar

para comenzar a trabajar con una tienda.

Solo tendrás que completar

una clave de aplicación privada.

Si quieres obtener información

sobre los SDK de API de la tienda online

y cómo agilizan el trabajo

con la API de la tienda online,

accede a este enlace

sobre la API de la tienda online

en la biblioteca de herramientas
de API de la tienda online.

El conjunto de tutoriales de GraphQL

es absolutamente increíble.

Es mucho más detallado

que este tutorial.

También hay
tutoriales prácticos excelentes

para trabajar con ciertos marcos,

bibliotecas y lenguajes.

Por ejemplo, si desarrollas en React

y quieres saber
cómo combinar React y Apollo,

una biblioteca de cliente muy popular,

hay un tutorial paso a paso

sobre cómo hacerlo.

Nunca está de más

visitar el sitio oficial de GraphQL.

Allí se explican de manera simple

las especificaciones de GraphQL.

Es un recurso muy útil para avanzar.

Si el video te resultó de ayuda,

haz clic en Me gusta

y suscríbete a nuestro canal.

Subimos videos útiles todas las semanas

para ayudarte
con el trabajo de desarrollo en Shopify.

Explora los enlaces

en el cuadro de la descripción
para acceder a más recursos útiles.

Gracias por ver el video.