3. 添加子图
5m

概述

期待为 Poetic Plates 添加更多内容?使用 ,非常简单–我们只需点击几下即可!

在本课中,我们将

  • 使用 Studio 将一个新的 添加到我们的
  • 了解启动过程以及如何在 Studio 中检查启动
  • 检查一个

介绍厨房用品 🍳

欢迎来到厨房用品 API,这是关于所有厨房用品的终极指南!此 API 是了解所有关于锅、平底锅和厨房工具信息的专属商店。我们应有尽有,从防粘煎锅到铸铁锅,无所不包。厨房用品的质量可以决定菜品的成败,因此它包含关于每个产品使用的材料(从不锈钢到陶瓷再到铸铁)的详细信息。

一旦您找到了适合您需求的完美厨房用品,我们将为您提供如何保持其外观和性能最佳的建议。此 API 为每种类型的厨房用品提供了清洗和保养说明,以确保您的锅和煎锅在未来几年内保持最佳状态。

这是一个完美的 API,可以添加到 Poetic Plates 中,迄今为止,该超级图只包含关于菜谱的信息!

厨房用品 API 托管在https://poetic-plates-kitchenware-api.herokuapp.com/。您可以通过连接到该端点来使用 Sandbox来探索其模式。

无需克隆仓库,但如果你感兴趣,欢迎自由 浏览代码库

欢迎这个 加入到 Poetic Plates 中!

添加子图

  1. 在 Studio 中打开你的 's 页面,然后导航到 子图 页面。我们可以看到我们的 recipes 已在此处,指向我们托管它的位置。

  2. 点击 添加子图

    注意: 您还可以使用 添加子图。点击 添加子图 旁边的箭头并选择 使用 Rover CLI 添加子图 以获取说明。

    https://studio.apollographql.com/

    Subgraphs page in Studio

  3. 关于 ,我们需要提供两件事:它的 URL 和它的名称。

    https://studio.apollographql.com/

    Add a subgraph modal

    路由 URL
    https://poetic-plates-kitchenware-api.herokuapp.com/
    子图名称
    kitchenware
  4. 然后,点击 添加子图。GraphOS 需要一些时间来检查该 是否成功与其他所有现有子图组合,并生成 。这就是全部了!

    https://studio.apollographql.com/

    Successfully added a subgraph

检查启动

我们新增了一个 ,因此请转到 Studio 中的 启动 页面,查看启动是否成功完成。

选择最近的 ,查看进度和状态。看起来一切都绿趋顺利!

https://studio.apollographql.com/

Launches page in Studio

我们可以看到已成功添加。在“构建输入”中,我们可以看到创建新的所使用的。这个规范是现在正在使用的

https://studio.apollographql.com/

Build inputs for a launch

我们的新超图规范

让我们通过导航菜单查看变更日志,看看厨房ware的子图为诗意的盘子添加了哪些新功能和能力。kitchenware 添加了什么新内容。

https://studio.apollographql.com/

Changelog page in Studio

我们可以看到一共增加了14个关于厨房ware的新增内容!厨具、厨具、电器...还有两个新的入口添加到了查询类型。

所有这些新类型和很可能是都来自厨房ware的子图。我们可以通过转到“规范”页面来确认哪个字段来自哪个子图。

在“参考”选项卡下,选择“查询”,我们可以看到超图的入口点。在“子图”列中,我们可以看到每个字段来自哪个子图。

https://studio.apollographql.com/

Schema reference page for the Query type in Studio

从我们的查询入口点,我们有两个新字段可供使用:allCookware和特定的cookware

当我们深入挖掘规范中的对象时,厨房ware的子图中也有其他类型可用,例如UtensilAppliance,尽管它们目前无法从查询入口点访问。我们将在本课程中关注Cookware类型。

https://studio.apollographql.com/

Schema reference page for Objects in Studio

注意:那些绿色的“E”标签是什么意思?它代表“实体”!你可以悬停查看更多信息,但我们将在接下来的课程中详细介绍,所以请保持关注。

我们的超图正式长大了!

发送查询

有了食谱和厨房用品数据触手可及,你是否迫不及待想测试我们的的威力?让我们试发送一个包含的查询。

让我们回到查询标签,在模式页面中,我们可以看到所有进入的入口点。点击事件标签的模式页面中的“播放”图标,紧挨着cookware

https://studio.apollographql.com/

Schema reference page in Studio, click the play icon next to the cookware field

这将会打开探索器,并显示文档标签,其中显示和可以用来构建的内容。

https://studio.apollographql.com/

Explorer, with the cookware field open in the Documentation field

如果你在操作面板中有一个正在进行的操作,请清除它或打开一个新的探索器标签。事件,我们在这里从头开始!

文档面板中,让我们为特定的厨房用品构建一个查询。点击cookware ,我们可以看到类型描述中 Cookware表示“烹饪设备,如锅和锅 Wand”。

我们将添加所有三个可用的字段:名称name,描述description和清洁说明cleaningInstructions。它还需要一个name ,所以我们会添加这个参数。

变量面板下,我们将name变量设置为“铸铁锅”。这似乎是一块需要特别注意的厨房用品,因此清洁说明应该为我们提供一些有价值的信息!

厨房用品的数据如下kitchenware!让我们用recipes 的数据来为事情增添趣味!我们为什么不来看看最近添加的一些菜谱的名称呢?

在资源管理器中有一个方便的快捷方式,可以搜索我们对该的方案。按 Command + KCtrl + K访问闪亮搜索开始键入recently,这样就可以弹出Query.recentlyAddedRecipes字段

https://studio.apollographql.com/

Explorer using Spotlight to search for a specific field

我们将选择这个,然后我们就可以在文档面板中直接访问它。这样可以节省几次点击,特别是当我们的继续增长时将非常有用!

现在,让我们添加recentlyAddedRecipes字段,并请求name作为子字段

最后,我们将把重命名为更具说明性的名称。称GetSkilletAndRecipes.

您的现在看起来应该是这样的:

query GetSkilletAndRecipes($name: String) {
cookware(name: $name) {
name
description
cleaningInstructions
}
recentlyAddedRecipes {
name
}
}

并在变量部分:

{
"name": "cast iron skillet"
}

让我们运行它!

哇哦,我们得到数据回来了!一个查询,但是数据来自两个单独的子图🤯🎉

添加很简单!但到目前为止,你可能会觉得这两个子图中的数据是隔离的。没有直接连接厨具和菜谱,或者相反。不知道一个特定菜谱使用哪种厨具以及如何清洁它不是很好吗,所有的这些都可以在一个干净的中完成?

新的功能:菜谱的厨具

这是一个示例梦,让我们可以要求有关特定菜谱的详细信息:其描述、说明和成分,以及所需的厨具类型,其外观描述和清洁方法!我们有了有用的信息来成为烹饪专家!

query GetRecipeAndCookwareInformation {
recipe(id: "rec3j49yFpY2uRNM1") {
name
description
ingredients {
text
}
instructions
cookware {
name
description
cleaningInstructions
}
}
}

注意:为了便于参考,我们在查询中直接包含了菜谱的ID。在现实中,这个id 将会被提取到一个变量中。

深入研究数据,每个菜谱都包含了一系列参与菜谱的厨具名称集合。数据源RecipesAPI也提供了一个名为getRecipeCookware的方法来获取这个列表。

但是,recipes子图没有其厨具的描述和清洁指南的字段--这些字段在kitchenware子图中是可用的!

因此,我们需要一种方法来连接这两个子图之间的数据,以便使我们的理想查询工作(提示:这就是实体!)。

但首先,让我们设置我们的本地开发环境,以确保我们对recipes子图做出的更改不仅正确,而且与kitchenware子图相处愉快!

练习

为了添加一个新的子图,GraphOS需要知道哪些值?

关键要点

  • 要添加一个新的,我们可以使用Studio UI或
  • 我们可以使用探查器查看
  • 一个 表示对 进行模式更新的完整过程。当模式发布到 时会触发启动。我们可以在 studio 的启动页面中检查启动的结果。

接下来

下一个课程中我们将为本地开发做准备。

上一页

分享您对本课程的问题和评论

此课程目前处于

beta
.您的反馈可以帮助我们改进!如果您遇到困难或感到疑惑,请告诉我们,我们会帮助您。所有评论都是公开的,必须遵守 Apollo 行为准则。注意,已解决或处理的评论可能会被删除。

您需要在下方发布之前拥有 GitHub 账户。还没有吗? 请在我们的大航海家论坛上发帖。