概述
期待为 Poetic Plates 添加更多内容supergraph?使用 GraphOS,非常简单–我们只需点击几下即可!
在本课中,我们将
- 使用 Studio 将一个新的 子图添加到我们的 超级图中
- 了解启动过程以及如何在 Studio 中检查启动
- 检查一个 操作的 查询计划
介绍厨房用品 🍳
欢迎来到厨房用品 API,这是关于所有厨房用品的终极指南!此 API 是了解所有关于锅、平底锅和厨房工具信息的专属商店。我们应有尽有,从防粘煎锅到铸铁锅,无所不包。厨房用品的质量可以决定菜品的成败,因此它包含关于每个产品使用的材料(从不锈钢到陶瓷再到铸铁)的详细信息。
一旦您找到了适合您需求的完美厨房用品,我们将为您提供如何保持其外观和性能最佳的建议。此 API 为每种类型的厨房用品提供了清洗和保养说明,以确保您的锅和煎锅在未来几年内保持最佳状态。
这是一个完美的 API,可以添加到 Poetic Plates 超级图中,迄今为止,该超级图只包含关于菜谱的信息!
厨房用品 API 托管在https://poetic-plates-kitchenware-api.herokuapp.com/。您可以通过连接到该端点来使用 Sandbox来探索其模式。
无需克隆仓库,但如果你感兴趣,欢迎自由 浏览代码库。
欢迎这个 子图 加入到 Poetic Plates 超级图 中!
添加子图
在 Studio 中打开你的 超级图's 页面,然后导航到 子图 页面。我们可以看到我们的
recipes
子图 已在此处,指向我们托管它的位置。点击 添加子图。
注意: 您还可以使用 Rover CLI 添加子图。点击 添加子图 旁边的箭头并选择 使用 Rover CLI 添加子图 以获取说明。
https://studio.apollographql.com/关于 子图,我们需要提供两件事:它的 URL 和它的名称。
https://studio.apollographql.com/路由 URLhttps://poetic-plates-kitchenware-api.herokuapp.com/子图名称kitchenware然后,点击 添加子图。GraphOS 需要一些时间来检查该 子图 是否成功与其他所有现有子图组合,并生成 超级图模式。这就是全部了!
https://studio.apollographql.com/
检查启动
我们新增了一个 子图,因此请转到 Studio 中的 启动 页面,查看启动是否成功完成。
选择最近的 启动,查看进度和状态。看起来一切都绿趋顺利!
我们可以看到子图已成功添加。在“构建输入”中,我们可以看到创建新的超图规范所使用的子图。这个规范是现在正在使用的路由器!
我们的新超图规范
让我们通过导航菜单查看变更日志,看看厨房ware的子图为诗意的盘子添加了哪些新功能和能力。kitchenware
子图添加了什么新内容。
我们可以看到一共增加了14个关于厨房ware的新增内容!厨具、厨具、电器...还有两个新的入口添加到了查询
类型。
所有这些新类型和字段很可能是都来自厨房ware的子图。我们可以通过转到“规范”页面来确认哪个字段来自哪个子图。
在“参考”选项卡下,选择“查询”,我们可以看到超图的入口点。在“子图”列中,我们可以看到每个字段来自哪个子图。
从我们的查询入口点,我们有两个新字段可供使用:allCookware
和特定的cookware
。
当我们深入挖掘规范中的对象时,厨房ware的子图中也有其他类型可用,例如Utensil
和Appliance
,尽管它们目前无法从查询入口点访问。我们将在本课程中关注Cookware
类型。
注意:那些绿色的“E”标签是什么意思?它代表“实体”!你可以悬停查看更多信息,但我们将在接下来的课程中详细介绍,所以请保持关注。
我们的超图正式长大了!
发送查询
有了食谱和厨房用品数据触手可及,你是否迫不及待想测试我们的超级图示的威力?让我们试发送一个包含子图的查询。
让我们回到查询标签,在模式页面中,我们可以看到所有进入超级图示的入口点。点击事件标签的模式页面中的“播放”图标,紧挨着cookware
字段。
这将会打开探索器,并显示文档标签,其中显示字段和可以用来构建查询的内容。
如果你在操作面板中有一个正在进行的操作,请清除它或打开一个新的探索器标签。事件,我们在这里从头开始!
在文档面板中,让我们为特定的厨房用品构建一个查询。点击cookware
字段,我们可以看到类型描述中 Cookware
表示“烹饪设备,如锅和锅 Wand”。
我们将添加所有三个可用的字段:名称name
,描述description
和清洁说明cleaningInstructions
。它还需要一个name
参数,所以我们会添加这个参数。
在变量面板下,我们将name
变量设置为“铸铁锅”。这似乎是一块需要特别注意的厨房用品,因此清洁说明应该为我们提供一些有价值的信息!
厨房用品的数据如下kitchenware
!子图让我们用recipes
子图的数据来为事情增添趣味!我们为什么不来看看最近添加的一些菜谱的名称呢?
在资源管理器中有一个方便的快捷方式,可以搜索我们对该字段的方案。按 Command + K
或 Ctrl + K
访问闪亮搜索开始键入recently
,这样就可以弹出Query.recentlyAddedRecipes
字段。
我们将选择这个字段,然后我们就可以在文档面板中直接访问它。这样可以节省几次点击,特别是当我们的超级图继续增长时将非常有用!
现在,让我们添加recentlyAddedRecipes
字段,并请求name
作为子字段。
最后,我们将把操作重命名为更具说明性的名称。称GetSkilletAndRecipes
.
您的查询现在看起来应该是这样的:
query GetSkilletAndRecipes($name: String) {cookware(name: $name) {namedescriptioncleaningInstructions}recentlyAddedRecipes {name}}
并在变量部分:
{"name": "cast iron skillet"}
让我们运行它!
哇哦,我们得到数据回来了!一个查询,但是数据来自两个单独的子图🤯🎉
添加子图很简单!但到目前为止,你可能会觉得这两个子图中的数据是隔离的。没有直接连接厨具和菜谱,或者相反。不知道一个特定菜谱使用哪种厨具以及如何清洁它不是很好吗,所有的这些都可以在一个干净的查询中完成?
新的功能:菜谱的厨具
这是一个示例梦查询,让我们可以要求有关特定菜谱的详细信息:其描述、说明和成分,以及所需的厨具类型,其外观描述和清洁方法!我们有了有用的信息来成为烹饪专家!
query GetRecipeAndCookwareInformation {recipe(id: "rec3j49yFpY2uRNM1") {namedescriptioningredients {text}instructionscookware {namedescriptioncleaningInstructions}}}
注意:为了便于参考,我们在查询中直接包含了菜谱的ID。在现实中,这个id
参数将会被提取到一个变量
中。
深入研究数据,每个菜谱都包含了一系列参与菜谱的厨具名称集合。数据源RecipesAPI
也提供了一个名为getRecipeCookware
的方法来获取这个列表。
但是,recipes
子图没有其厨具的描述和清洁指南的字段--这些字段在kitchenware
子图中是可用的!
因此,我们需要一种方法来连接这两个子图之间的数据,以便使我们的理想查询工作(提示:这就是实体!)。
但首先,让我们设置我们的本地开发环境,以确保我们对recipes
子图做出的更改不仅正确,而且与kitchenware
子图相处愉快!
练习
关键要点
- 要添加一个新的子图,我们可以使用Studio UI或Rover CLI。
- 我们可以使用探查器查看路由器的查询计划。
- 一个 启动 表示对 图 进行模式更新的完整过程。当模式发布到 GraphOS 时会触发启动。我们可以在 studio 的启动页面中检查启动的结果。
接下来
下一个课程中我们将为本地开发做准备。
分享您对本课程的问题和评论
此课程目前处于
您需要在下方发布之前拥有 GitHub 账户。还没有吗? 请在我们的大航海家论坛上发帖。