Getting Started with GraphQLYouTube↗  IA↗(long shot)
Science & Technology  1.1K views 47 likes 0 dislikes   26 Aug 2020
ShopifyDevs 50.2K subscribers Canada YouTube↗


Please select the problem
You must specify your email and describe the problem in detail
Describe your problem in detail if it's not obvious

Click to Play Video Click to Play Video
Hola. Soy Chuck Kosman,
你们好 我叫Chuck Kosman
ingeniero de lanzamiento en Shopify.
我是Shopify的投产工程师
Hoy hablaremos sobre GraphQL,
今天我们要介绍GraphQL
un lenguaje de consultas para API.
一种用于API的查询语言
Veremos qué es GraphQL
我们会介绍GraphQL是什么
y qué herramientas puedes usar para ponerte en marcha con GraphQL.
启用GraphQL需要用到什么工具
Por último, haremos un tutorial práctico
最后我们会提供一个实用的教程
sobre cómo crear solicitudes de GraphQL para la tienda Shopify.
让你们亲身实践 如何向Shopify商店发出GraphQL请求
Comencemos.
咱们开始吧
¿Qué es GraphQL?
先从第一个问题开始：什么是GraphQL？
Tan pronto como accedes a GraphQL.org,
如果你进入GraphQL.org
encuentras esta cita.
你会发现顶上方有这么一段话
GraphQL se describe como un lenguaje de consultas para API
GraphQL被描述为 一种用于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.
这里我们谈论的是将查询语言用于API
Para explicarlo de manera más práctica, esta sería una buena definición:
如果我们结合具体情况 更准确的定义是
GraphQL es un método expresivo y estructurado
GraphQL以表达性结构化的方式
para solicitar datos a otra aplicación
向另一个应用程序请求访问数据
y el sistema subyacente para obtener esos datos.
而底层系统去获取这些数据
Es posible que ya conozcas REST,
你可能熟悉REST风格的API
como método para solicitar datos a otra aplicación.
这种请求访问另一个应用程序数据的方式
GraphQL se considera un REST mejor.
但其实大家称赞GraphQL为更好的REST
REST solucionó muchos de los problemas de sus predecesores,
REST解决了之前方案的许多问题
pero GraphQL está diseñado específicamente
但REST用于新式应用程序时有一些缺陷
para abordar algunas de las deficiencias de REST para aplicaciones modernas.
GraphQL是专为解决这些缺陷而设计的
Uno de los inconvenientes de REST en las aplicaciones modernas
REST用于新式应用程序时的一大缺陷是
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,
提到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,
在Shopify上 如果我想了解一笔订单中的某些内容
tengo que usar esta terminal
我得使用后台REST API上的
en la API de REST del panel de control.
这个端点
Al conectar una identificación de pedido,
当我向其输入订单ID时
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.
比如在Shopify上 我需要获取一组产品的元字段
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
所以我然后要使用不同端点 输入ID
y, finalmente, obtengo los metacampos que quiero.
最终获取我需要的元字段
Quizá hayas oido hablar de esto como el problema de n+1.
你可能听说过 这被描述为n+1问题
Envío una solicitud para obtener la lista completa de productos
如果我发出一个请求获取整个产品列表
y, luego, tengo que generar las solicitudes necesarias
然后我需要发出n个请求
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
说到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,
有意思的是 你会注意到 我向这个端点 “/admin/api/graphql.jason” 发送了POST请求
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.
展示如何通过特定产品ID请求访问产品字段
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,
这是GraphQL的重要特色
esta documentación clara de sus capacidades
由被叫做schema(架构)的东西实现
mediante un esquema.
对功能的透明文档化
Ese esquema es de tipado fuerte.
我们称此为强类型的schema
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.
一个更高效、更强大、更灵活的REST后继
Ahora que ya sabes qué es GraphQL y cómo se compara con REST,
我们稍微有点了解了 GraphQL的定义以及和REST相比的情况
hablemos sobre qué herramientas
咱们现在开始聊聊
puedes usar para crear solicitudes de GraphQL en Shopify.
你能在Shopify上使用什么工具 发出GraphQL请求
Puede ser tan simple como una solicitud cURL,
可以像cURL请求一样简单
pero así no aprovecharías este esquema de tipado fuerte,
但你会错过强类型schema
una de las funciones más útiles de GraphQL.
GraphQL最强大的功能之一
Sin embargo, es posible obtenerla
但我们可以使用
con GraphiQL IDE o Entornos de Desarrollo Integrado.
GraphiQL IDE(集成开发环境)做到
Hay disponible una implementación
我们在GraphQL admin API
para la API del panel de control de GraphQL
和店面API上
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.
我们还是先讲它在admin API中的应用
Hay un documento
有一个文档叫做
sobre el explorador de la API GraphiQL del panel de control de Shopify.
“Shopify后台API GraphiQL管理器”
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.
我建议你安装Shopify GraphiQL应用
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
在Shopify开发人员教程中
en los tutoriales para desarrolladores de Shopify.
还有一个文档叫做 “创建您的第一个GraphQL请求”
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,
我们的教程使用GraphiQL的话 就不需要执行这最后一步
pero puedes seguir esto
但如果你更倾向使用独立HTTP客户端
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
我要回到“Shopify后台API GraphiQL管理器”
y lo instalaré en una tienda que ya configuré.
并在已设置好的商店上安装它
Seleccionaré este enlace para instalar
我要点进这个链接 安装Shopify GraphiQL应用
la aplicación GraphiQL de Shopify. Ya tengo una tienda para comenzar,
我已经有了一个商店
graphql.myshopify.com.
getting-started-with- 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,
{shop{name}} 这种类似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
但我们在使用GraphQL时 也会转回其他模式
por el momento.
目前暂用它
Como dije antes, también puedes usar un cliente HTTP independiente.
正如我之前提到的 你也可以使用独立HTTP客户端
Para este tutorial estoy usando GraphiQL IDE
我们在此教程中使用GraphiQL IDE
porque no es necesario especificar la terminal.
是因为我们不用指出端点
Solo hay una en GraphQL. Es una de sus ventajas.
幸运的是 GraphQL里只有一个端点 这是它的非凡优势之一
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.
你也需要明确指示内容类型为application/json
Hay una aplicación GraphQL que confunde a algunas personas.
还有一种类型是application/graphql 一些人会混淆
Existen diferencias sutiles.
还是有微妙的区别
Pero es recomendable usar la aplicación JSON
使用独立HTTP客户端时
con un cliente HTTP independiente.
一般使用application/json
Si no funciona, pasa a la aplicación GraphQL.
如果不对 就换成application/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,
回到“创建您的第一个GraphQL请求”文档
podrás consultar cómo usar GraphiQL
里面谈到了使用GraphiQL
y, además, cómo usar un cliente HTTP independiente.
还谈到了如何使用独立HTTP客户端
De hecho, hay un artículo del blog excelente con un tutorial completo
里面有一篇很棒的博客文章
sobre cómo configurar un cliente llamado Insomnia.
完整教你如何设置一个叫做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,
GraphQL IDE就不适合你了
ya que es más un método de prueba.
它只是用来测试
Tampoco usarías un cliente HTTP en producción,
实际应用中 你也不会使用HTTP客户端
crearías una aplicación completa.
你会构建一个完整的应用
Para crear una aplicación completa,
当你要建完整的应用
es recomendable que explores las bibliotecas del cliente de GraphQL.
我强烈建议你查看GraphQL客户端库
Gracias a la predictibilidad que ofrece el esquema de tipado fuerte de GraphQL,
因为GraphQL的强类型schema 带来的可预测性
puedes superponer sobre este muchas herramientas
你可以在其上放置许多开发人员工具
para lograr un desarrollo realmente rápido y asombroso.
以实现非常快速、优秀的开发
Quizá conozcas Apollo o Relay,
你可能听说过Apollo或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
如果要使用GraphQL
para trabajar con GraphQL.
有两种不同API可选
Las API del panel de control, REST y GraphQL, se usan
后台API REST和GraphQL风格都有
para crear aplicaciones e integraciones del panel de control de Shopify,
它用于为Shopify后台开发应用并进行集成
es decir, para extender la trastienda de Shopify.
扩展Shopify后台 如果你愿意这么想的话
La API de la tienda online se usa para compras orientadas al cliente,
店面API用于面向客户的购买体验
un propósito muy diferente.
目的非常不同
También tenemos kits de desarrollo de software o SDK
我们还有针对网页、Android、iOS
para la web, Android, iOS e incluso experiencias en juegos con Unity.
甚至Unity游戏内体验的软件开发套件(SDK)
Además de que GraphQL
对店面API来说
es la única opción disponible de API de tienda online a tienda online,
GraphQL是目前唯一可用于店面的
existen ventajas claras que ubican a GraphQL sobre REST.
除此之外 显然GraphQL比REST有优势
De hecho, hay ciertas tareas que puedes completar
一些事情你只能
con la API de GraphQL del panel de control
通过GraphQL Admin API实现
que no puedes hacer con la API de REST.
而无法通过REST Admin API实现
En otras palabras, Shopify confía en GraphQL.
换句话说 Shopify把宝押在GraphQL上
Vemos los beneficios de GraphQL en comparación con las API de REST.
和REST风格的API相比 我们看到了GraphQL的好处
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.
只能通过GraphQL Admin API实现
Puedes ver algunas aquí, en orden cronológico
图中按发布时间先后 列出了一些功能
si ya se lanzaron. Con la API de GraphQL, puedes realizar cambios masivos de inventario
在GraphQL Admin API上批量调整库存
de forma mucho más eficiente que con la API REST.
可比在REST Admin API上高效很多倍
Una excelente opción para gestionar inventario a gran escala.
非常有利于大批量库存管理
La API de traducción solo es compatible con GraphQL.
翻译只能通过GraphQL实现
Para elementos multimedia de productos,
产品媒体 不只是图片
GraphQL permite usar imágenes, videos y modelos 3D.
还有视频、3D模型都能通过GraphQL实现
Edición de pedidos, muy solicitado. Solo puede hacerse con GraphQL.
订单编辑 这个大家一直呼吁的功能 只能通过GraphQL Admin API实现
Las API de aranceles e impuestos y la vista previa para desarrolladores solo son compatibles con GraphQL.
在我们录这个视频的时候 关税其他税API及开发人员预览 只能通过GraphQL实现
En el futuro habrá más funciones disponibles solo con GraphQL.
未来敬请期待 更多GraphQL专属功能发布
Echa un vistazo al registro de cambios
如果你想实时了解Shopify API发布情况
para mantenerte actualizado con las versiones de Shopify API.
可根据这个链接查看更改日志
Las herramientas ya están configuradas.
现在工具已就位
Ahora, comenzaré a crear solicitudes
我们开始使用GraphiQL IDE
a la tienda de Shopify con GraphiQL IDE.
向自己的Shopify商店发出请求
Abriré la tienda aquí en el navegador,
我要转到浏览器中我的商店
justo donde la dejé con la instalación de GraphiQL IDE.
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,
你也能看出GraphQL查询语言
se parece un poco a una estructura anidada de JSON.
看起来有点像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
我得到的返回内容是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".
所以这里出现了我的商店名称 "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,
如果你之前用过Shopify API 尤其是REST API
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,
GraphQL也有同样的限制
pero en el costo de la consulta, no en la llamada.
但是消耗的是查询 而不是调用
El resultado de esto es que GraphQL sea mucho más eficiente.
这最终导致GraphQL高效多了
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,
GraphQL就基于你的请求内容
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.
可以是任何字母 比如C 想键入currency code(货币代码)
Tan pronto como hago esto, obtengo opciones de las cosas
一按下C 它就会自动列出
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
GraphiQL能这样做的原因是
porque es un esquema de tipado fuerte.
它具备强类型schema
Conoce las capacidades de la API
它完全知道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?
我该怎么知道这个API还有什么能力？
¿Cuál es ese esquema de tipado fuerte?
我们一直说的强类型schema是什么意思？
En este GraphiQL IDE
在GraphiQL IDE
y en clientes HTTP independientes
以及在GraphQL能力优良的
con buenas funciones de GraphQL,
独立HTTP客户端中
verás documentación, como aquí, o un esquema.
你会看到像文档的东西 就这个例子来说 或者schema
Esto indica exactamente qué se puede hacer.
它具体告诉我 我能做什么
Puede parecer algo misterioso al principio
如果你刚接触GraphQL 一开始会觉得有点神秘
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,
可以类比为REST中的CRUD构架
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.
我能通过查看schema了解这点
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.
我可以查询很多内容 这是schema
Esto define lo que puedo y no puedo consultar.
它定义了我可以或不可以查询什么
Está en orden alfabético.
是字母顺序排列的
Me desplazaré hasta la tienda (shop).
我一路向下滑到S 会看见“商店”
Esta es la definición del esquema para la tienda.
这是“商店”的schema定义
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.
这就是使用GraphiQL的妙处
Entonces, ¿qué significa esto cuando se trata de un esquema?
在schema中
¿Qué significa "shop:shop!"?
“shop:Shop!”到底是什么意思？
Significa que si hago una consulta para un campo de la tienda,
它的意思是 如果我要查询shop(商店)字段
"s-h-o-p" en minúscula,
小写 shop
obtengo un tipo,
返回给我的是
como lo indica "S-H-O-P" en mayúscula.
显示为大写SHOP的类型
Entonces, con "SHOP" en mayúscula,
通过这个大写的SHOP
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
这就是GraphQL强类型schema
y las herramientas relacionadas.
以及位于其上的工具的力量
Puedo explorar el esquema en tiempo real para ver exactamente qué puedo obtener.
我可以实时探索schema 来查看到底会返回给我什么
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.
并会到schema里对比信息 这样你们会看清楚进展如何
También mostraré una visualización sobre cómo modelar mentalmente
我们还会通过可视化 展示出如何构建类型
la relación entre estos tipos en el esquema.
以及这些类型在schema里如何关联
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.
first(起始)、after(之后) last(最后)、before(之前)、sortKey(排序关键字)等
Finalmente, indica que obtendré un tipo llamado "ProductConnection".
最终写道我要返回 一个叫做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.
出现了解析错误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!
谢谢你 强类型schema 太棒了
Pero sugiere que algo está disponible para la conexión del producto
但它建议在“产品联系”上
llamado "edges".
查询一个叫edges(连线)的东西
y hay un conjunto "ProductEdges".
我得到了产品连线数组
Usaré "edges",
那就从“连线”开始
que tendrá algunos campos.
里面应该有一些字段
Hago clic en "ProductEdge"
我就点击“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.
比如我想查询ID和名称
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.
强类型schema会提供很多有用信息
¿Qué es "first" o "last"?
什么是“起始”或“最后”？
Al igual que en REST, no es posible obtener
就像在REST里一样 你无法发出获取所有产品端点的请求
todos los productos con la terminal para obtener todos los productos.
来获取每一个产品 因为它是分页的
Se utiliza la paginación basada en el cursor
我们使用GraphQL规定中建议的
por recomendación de las especificaciones GraphQL.
基于游标的分页
Pero aparte de eso, echa un vistazo a cómo hacer esto.
先把它放在一边 看看如何实现
Para proporcionar un argumento,
要提供参数(argument)
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.
我就写我要起始10个产品
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.
所以我得到了每个产品的ID和名称
¿Cuál es el costo?
这消耗了多少？
Doce puntos.
这消耗了12个“点”
¿Qué significa esto?
这是什么意思？
En GraphQL, el tamaño máximo del cubo
GraphQL给桶设置的容量上限是
es de mil puntos
一千个“点”
y eso se repone a cincuenta puntos por segundo.
这意味着重新装满的速度上限是50个“点”/秒
Compara esto con las cuarenta llamadas de la API de REST que puedes tener
而在REST风格的API中 在一个桶里 你只能发出40次REST调用
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,
最终结果：GraphQL远比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,
我们谈到GraphQL时
en relación con las API,
就说为了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",
如果我键入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.
并设为“10”
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.
比如想查询这些多属性的ID和名称
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é,
根据我的请求 每个节点都有ID和名称
y toda la información de la variante,
还有一切多属性信息
la identificación y el título de cada variante.
但其中只包括我需要的多属性ID和名称
Podría ampliar esto con el precio y así sucesivamente,
我还可以扩展到价格等等
al consultar el esquema y ver qué datos están disponibles para las variantes.
只要这些多属性信息存在于schema里
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.
在GraphQL中 联系意味着一系列连线
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.
遵循此API运行的底层模型
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,
如果我一路回到根目录的schema
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
在Shopify中 变更的命名方式是
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".
我可以就输入字母P
Como ves, se muestran las opciones crear, eliminar y actualizar.
它就会自动填充产品(product)创建、删除、更新等
Selecciono "productCreate".
我选择产品创建
Ahora puedo desplazarme por este esquema en el lado derecho para explorarlo alfabéticamente
我可以按字母顺序 一路在右侧的schema中向下滑
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.
你会得到ProductCreatePayload(产品创建负载)
Y se proporcionarán algunos argumentos como parte de esta mutación
这种变更中 要提供几个参数
Si ya usas la API REST,
关于“产品创建负载” 如果你熟悉REST API
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.
通过感叹号表示 ProductInput(产品输入)类型不能为空
Así que debo incluirlo.
所以我得提供内容
"media" es un conjunto de este tipo de entrada de creación de medios que no se puede anular.
media(媒体)是一个 CreateMediaInput(创建每天输入)类型数组 这个类型不能为空
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.
可以获取各种需要的内容 比如我想了解ID
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.
如果你之前用过REST API 你会注意到这个ID有点不同 它们不可互换
GraphQL tiene su propio conjunto de identificaciones para los nodos.
GraphQL有自己一套ID去指涉节点
No intentes intercambiar las identificaciones.
别试图互换ID
Y finalmente obtengo el título "Producto asombroso".
确实返回给我的是“优秀产品”
¡Buen trabajo!
祝贺
Completaste el tutorial para comenzar a hacer consultas y mutaciones
你们成功实现了在Shopify商店内
en una tienda Shopify con GraphiQL.
通过GraphiQL进行查询和变更
¿Quieres ampliar tus conocimientos sobre GraphQL?
如果你想进一步了解GraphQL 你该去哪儿学习呢？
Hay muchos recursos útiles en la web
你可以在网上找到很多学习GraphQL的优秀资源
para aprender sobre GraphQL. Shopify comparte algunos recursos
一些是Shopify发布的
que mencioné durante el tutorial,
我在这个教程中也列出了
este tutorial y otro sobre cómo crear tu primera solicitud de GraphQL.
尤其是“创建您的第一个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
如果你要启用独立HTTP客户端
es un excelente punto de partida para empezar a trabajar con un cliente HTTP independiente.
适合从“Shopify的GraphQL学习套件”开始学习
En este artículo del blog, hay un debate sobre GraphQL y un conjunto para descargar
里面会有对GraphQL的讨论 以及预先配置好的insomnia查询和变更包
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
如果你对店面API SDK感兴趣
y cómo agilizan el trabajo con la API de la tienda online,
也想了解它们如何让店面API更快运行
accede a este enlace sobre la API de la tienda online en la biblioteca de herramientas de API de la tienda online.
可以点进shopify.dev/tools /libraries/storefront-api 了解我们的店面API
El conjunto de tutoriales de GraphQL
“如何使用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
比如你是React开发人员
y quieres saber cómo combinar React y Apollo, una biblioteca de cliente muy popular,
你想了解React 如何与一个很流行的客户端库Apollo协同工作
hay un tutorial paso a paso sobre cómo hacerlo.
有教程一步一步教你怎么做
Nunca está de más visitar el sitio oficial de GraphQL.
另外查看GraphQL官网总是没错
Allí se explican de manera simple las especificaciones de GraphQL.
它总是会非常清晰地说明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.
来支持你在Shopify上的开发工作
Explora los enlaces en el cuadro de la descripción
记得查看描述框中的链接
para acceder a más recursos útiles.
来获取更多讲解视频
Gracias por ver el video.
感谢观看
Similar videos:

Getting Started
iSpring
17.6K views 50 likes 3 dislikes 23 Apr 201867% match

Getting Started

1.3K views 6 likes 1 dislikes 23 Jun 201767% match

Getting Started
Vevox
4.6K views 25 likes 1 dislikes 21 Mar 201967% match

Getting Started
J. Paul Leonard Library
3.2K views 0 likes 0 dislikes 29 Aug 201767% match

Getting Started
GPFireScience
1.2K views 5 likes 0 dislikes 11 Apr 201367% match

0 Getting Started
IBWrite
1.7K views 1 likes 1 dislikes 05 Aug 201567% match

Getting Started
Zenfolio: Platform to showcase & sell photography.
4.8K views 23 likes 0 dislikes 21 Jul 201567% match

Getting started at VU
Victoria University, Melbourne, Australia
2.8K views 11 likes 1 dislikes 17 Apr 201867% match

Getting Started
Planview
2.5K views 4 likes 0 dislikes 12 Aug 202067% match

Getting Started
Penn Foster
5.2K views 62 likes 2 dislikes 18 Feb 201567% match

Getting Started
Scratch Team
27.8K views 0 likes 0 dislikes 01 Aug 201867% match

Getting Started
UDL On Campus
3.4K views 3 likes 0 dislikes 08 Oct 201567% match

Getting Started with Q
Q Research Software
2.4K views 7 likes 0 dislikes 30 Nov 201667% match

Getting started
SimplyBook.me
4K views 13 likes 1 dislikes 08 Oct 201867% match

1.1 Getting Started
BEXEL Consulting
2.1K views 11 likes 0 dislikes 01 Nov 201867% match

Getting Started
BradleyUniversity
4.9K views 37 likes 0 dislikes 28 Apr 201767% match

Getting Started!
Vevox
1.7K views 5 likes 0 dislikes 17 Jul 201867% match

Potato Pirates - 1. Getting Started
Potato Pirates
19.5K views 22 likes 0 dislikes 04 Sep 201767% match

1. Getting started
Perch CMS
4.7K views 10 likes 1 dislikes 27 Mar 201767% match

U3 C3 Getting started
ku.mooc
1.4K views 0 likes 0 dislikes 06 Mar 201967% match

Getting Started

112.7K views 50 likes 6 dislikes 06 Feb 201567% match



Getting started v2
VideoScribe
122.9K views 304 likes 9 dislikes 01 May 201567% match

Getting Started at VU
Victoria University, Melbourne, Australia
4.3K views 29 likes 0 dislikes 28 Jan 201967% match

Getting Started
Yoli Pilipinas
10.3K views 18 likes 1 dislikes 22 Aug 201667% match

Getting Started
Amazon KDP
133.6K views 57 likes 4 dislikes 09 Oct 201767% match

Getting Started
Google Cloud Tech
10.1K views 197 likes 5 dislikes 11 Apr 202067% match

Getting Started with IT
University of Surrey - IT Services
4.7K views 12 likes 0 dislikes 14 Sep 201867% match

Getting Started
ClearCaptions
3.8K views 4 likes 1 dislikes 03 Dec 201067% match

Getting Started
CFP Training Tutorials
2.3K views 0 likes 0 dislikes 13 May 201367% match

Getting Started
Mobile Text Alerts
7.8K views 20 likes 0 dislikes 18 Mar 201867% match


Settings Privacy About Contact Donate