如何使用GraphQL操作名称和变量

Graphql操作名称和变量

这是一个免费的博客文章的视频从ShopifyDevs YouTube频道.在本文中,Shopify Plus的发布工程师Chuck Kosman将向您介绍GraphQL的一些关键特性,这些特性有助于大规模构建应用程序。这是一个由五部分组成的系列教程的第一个视频,旨在教育和提高您对GraphQL好处的知识。

在本教程中,Chuck将探索GraphQL操作名称和变量。

注:本文中的所有图片都超链接到YouTube视频的相关时间戳,因此您可以单击它们查看更多信息。

使用GraphQL创建基本查询

这里我使用的是图形化IDE。这是一个安装在开发商店上的应用程序,我有一些产品、客户和订单。如果这些听起来像行话,看看我们的GraphQL入OB欧宝娱乐APP门文章在Shopify开发人员系列开始设置。OB欧宝娱乐APP

Graphql操作名称和变量:后端定义查询的图像

这是一个非常简单的产品查询。我所做的就是通过ID,我正在提供那个GraphQLIDID论点。这样就行了,我按一下我应该把数据拿回来。

Graphql操作名称和变量:视频编码查询的gif

虽然它是可行的,但它并不能大规模使用。你必须把这个查询传递到,字面上,当我做HTTP请求。这意味着如果你想换掉IDS,你每次都要用字符串插值来组合查询。

虽然这是可以的,但并不理想,而且它也没有真正利用GraphQL的类型系统。

在GraphQL中定义一个名称

我们可以在查询体的开头添加一些东西,以使其更具可重用性。它们都是操作名和变量。请记住,这是隐式查询,因为我省略了查询关键字。不过,我需要为下一个操作提供query关键字。

你可能还会喜欢:GraphQL入OB欧宝娱乐APP门

通过在查询关键字后输入操作名称,我可以为操作命名任何我想要的名称。我也可以对突变进行同样的处理。如果这说突变然后我有一个空间,我可以这样做。约定是PascalCase,描述返回的内容。

我要说ProductTitleAndDescription.当我再次运行它时,您将看到实际上没有任何变化,但我们可以自由地添加操作名称。

Graphql操作名称和变量:说话者命名查询的GIF

用GraphQL定义变量

下一部分是变量。变量语法如下所示:

Graphql操作名称和变量:定义变量视频中的截图

我要在操作名后面加一个括号,假设我要提供一个变量ID.的符号用来表示这是一个变量。我写上a然后我说这个变量是类型ID.变量的重要性在于你必须指定它的类型。

我们将稍微改变这个查询。我要把这个复制到我的剪贴板上,然后我要说ID我提供给这个积域的是ID变量。

Graphql操作名称和变量:演讲者定义变量的GIF

现在,我还没有提供一个变量。当我点击播放时,它会说,嘿,我们期待你输入输入类型ID这个ID变量。你没有提供一个有效值,实际上你什么都没有提供。

这就是查询变量窗格在以下情况中使用的地方HTTP客户端或图形化应用程序和实际提供变量的语法是这样的:

graphql操作名称和变量:从定义ID变量的视频截屏

我要打开一组花括号,然后我要说theID值,注意这里,它实际上选择了我试图提供的ID类型变量ID,它已经知道这个基于我设置查询的方式。

我复制粘贴一下ID我之前拿到的,我来运行这个。IDE在后台所做的是将值替换为ID变量,而不需要我自己做任何字符串插值。

IDE在后台所做的是将值替换为ID变量,而不需要做任何字符串插值。”

Graphql操作名称和变量:GIF从视频od定义一个变量

GraphQL语言的实际特性就是允许我这样做。现在,因为我们是在一个IDE中工作,所以这并不是很详细的描述,但是我们可以看到在一个非常简单的客户机应用程序中是什么样子的。

我们将转到Visual Studio Code看看这些在规模化中哪里会派上用场。

在应用程序中使用名称和变量

在Visual Studio Code中,我使用名为graphql-request.这只是一种使用节点进行GraphQL请求的轻量级方法。实际上,这几行代码只是为了让这个应用程序在节点环境(而不是浏览器环境)中合作。

graphql操作名称和变量:VS Code视频截图

注意,我也在使用dotenv所以当我真的去提出这个请求时,我不会在这个屏幕上向你暴露我的私人应用程序密码,亲爱的读者。我所做的就是硬编码端点,我要对这些端点发出请求。

https://getting-OB欧宝娱乐APPstarter-with-graphql.myshopify.com/admin/api/2020-20/graphql.json恰好是我正在使用的测试存储的地址。我是实例化graphQLClient并提供必要的头文件,即application / JSON,然后是我私人应用程序的实际密码,process.env.API_PASSWORD

当您使用GraphQL和应用程序时,您经常会看到以这种方式定义的查询,其中您正在使用的客户端通常有一个带标记的模板文字函数,在那里您传递的字符串是您的请求,无论它是一个查询还是一个突变。

graphql操作名和变量:VS Code中的变量语法

您将看到我使用的是变量语法。我说的是我要提供一个ID类型的ID,然后我将它提供给论证ID.有许多不同的用法ID,但它们都有各自的目的。

接下来,我在这里要做的是定义我要传递进来的变量。就像在GraphiQL的查询变量窗格中一样,我指定了一个key对象ID然后是对应于乘积的字符串ID.我根据GraphQL请求包中定义的方法发出请求,并提供查询和我定义的变量。

graphql操作名称和变量:在VS Code中进行大规模开发

我不需要自己做字符串插值,我只需要控制台记录结果。我将运行这个脚本,然后得到我所期望的数据。

现在,变量就派上用场了。

我还有其他变量要找,我要发行不同的产品ID.我将以完全相同的方式发出请求。我要说的是发出相同的查询,但是提供otherVariables我已经定义过了。不是这个积,是这个积,然后是console log。我也要运行这个。

Graphql操作名称和变量:来自视频的GIF

现在我两者都得到了。

这就是变量的重要性。我不需要做任何我自己的字符串插值,这已经内置到GraphQL。现在,这个查询是未命名的。它没有使用任何操作名。如果我把这个注释掉,假设我要做一个请求。假设我引入了一个语法错误,我忘记了一个大括号。如果我再次运行这个脚本,在我保存它之后,它会对我大喊,“嘿,你没有正确地做这个。”

“这就是变量的重要性。我不需要自己做任何字符串插值,这已经内置到GraphQL中了。”

有趣的是,我直接查看查询本身,如果没有命名这个操作,我就很难完成。

这是一个非常简单的应用程序,只发出一个请求。您可以想象,在规模上,您希望查看请求是否失败。你会想知道是哪个请求。我不想遍历整个应用程序然后找出这个结构的查询在哪里。我希望我的日志能够根据操作名计算出这一点。

你可能还会喜欢:Shopify GraphQL学习工具包

GraphQL操作:用于大规模调试的命名

因此,我可以任意地引入一个操作名称。假设ProductIdAndTitle,因为这是我在这个查询中得到的信息。在不修复语法错误的情况下,我将清除并再次运行它。

Graphql操作名称和变量:来自视频缩放部分调试的命名的gif

现在,当它失败时,至少我的日志中有操作名。这就是操作名称的重要性所在。这有点类似于匿名函数和命名函数之间的区别。

在匿名函数中,它们是没有名称的函数,因此在堆栈跟踪中很难确定错误发生在哪里。这就是命名函数的原因;在堆栈跟踪中,它表示这个名称的函数正在失败。这与这里的原理完全相同,您不必为查询或突变命名,但它对于大规模调试非常有用。

请继续关注本教程的第2部分,我们将了解用于大规模工作的另一个特性:别名。

通过Shopify合作伙伴计划发展您的业务

了解更多