🚀 探索我们的第一个查询
好的!我们的模式已正确加载,并且我们的图正在端口 4000
上运行。现在是时候对我们的服务器进行测试,看看我们是否可以 查询我们首页网格功能所需的曲目数据。
要编写我们的测试 查询,我们将使用 阿波罗探险家。探险家是免费使用的,它提供了很棒的开发功能,例如交互式 查询构建、查询历史记录和响应提示。这将使构建我们的查询变得快速有趣。
由于我们仍然处于构建我们 图的本地开发阶段,我们将首先在 阿波罗沙盒中打开探险家。沙盒是 GraphOS Studio的一种特殊模式,它允许您在部署本地图更改之前对其进行测试。
注意: 要了解如何将应用程序部署到生产环境,请查看 支线任务:使用 Railway 部署阿波罗应用程序
要打开 阿波罗沙盒中的探险家,您可以 cmd+click
您的终端(从启动服务器开始)中的 URL 在浏览器中打开它,或者您也可以在这里打开它: https://127.0.0.1:4000。
探索探险家
在浏览器中,我们可以看到沙盒和探险家已打开并连接到 localhost:4000
。它应该看起来像这样:

中间的 操作 面板是我们创建查询的地方。探险家已经填充了默认的 操作,该操作使用我们的 tracksForHome
查询!您可以直接编辑 操作 或从 文档 选项卡(下面将详细介绍)添加 字段。
在 操作 面板的顶部是运行我们 查询 的按钮。让我们现在点击它,看看会发生什么:

右侧的 响应 面板显示了我们的曲目 ID 列表。不错!
构建查询
探险家的 文档 选项卡使您能够深入了解模式的 字段,从 Query
类型的入口点开始。

当您点击 字段 时,您可以看到我们添加的描述,以及字段的子字段(如果有)。

点击 字段 旁边的加号(⊕)按钮会自动将该字段添加到 查询 中的 操作 面板。这是一种便捷的方式来组装复杂的查询,而无需记住模式的精确结构。
让我们将 title
字段 添加到我们的 查询 并再次运行它。您将在 响应 面板中看到更新的响应。

添加所有字段
现在,我们只选择了 id
和 title
字段,但探险家还提供了一种方法,可以将所有字段一次性添加到 操作 中。当我们点击 字段 子标题旁边的下拉菜单时,我们会看到我们有两个选项。

首先,我们可以选择 选择所有标量字段。这将选择 tracksForHome
类型上的所有 字段,这些字段返回的值没有额外的子字段。
点击 选择所有标量字段。我们会看到 thumbnail
、length
和 modulesCount
字段 已添加到我们的 查询 中。

我们所有的 标量 字段 都已处理,但我们会注意到 author
字段 没有被添加。这是因为 author
字段 没有返回 标量 类型 - 它返回了一个带有额外子字段的 对象类型!幸运的是,探险家还有另一个选项可以一次性添加所有字段,无论它们返回标量类型还是对象类型。让我们再次点击 字段 子标题旁边的下拉菜单。
此下拉菜单中的第二个选项是 递归选择所有字段。这意味着除了将所有 标量 字段 添加到我们的 操作 中,我们还可以包括返回 对象类型 的字段,以及所有对象类型的子字段!让我们看看在实践中是什么样子。

当我们点击 递归选择所有字段 时,查询 会更新。

我们可以看到 author
字段 已包含在 查询 中,以及它的所有子字段:id
、name
和 photo
。通过递归添加所有 字段,我们可以包含 Author
类型的所有子字段,而无需逐个选择它们。
运行查询
既然我们在这里,让我们将我们的 操作 从 ExampleQuery
重命名为 GetTracks
,这样更清楚地表明它的作用。您的完成 操作 应该与以下内容匹配:
query GetTracks {tracksForHome {idtitlethumbnaillengthmodulesCountauthor {idnamephoto}}}
请注意,查询 的响应看起来完全像我们填充首页网格所需的数据:没有多余的,也没有缺少的,全部在一个调用中。REST API 可能需要我们进行多次调用才能通过其 ID 获取每个作者。
在 Explorer 中,使用本地服务器和上一课中定义的模拟数据运行上述查询。在 Explorer 的响应部分:复制 tracksForHome
数组中的第一个 Track 条目并将其粘贴在下方(不包括尾随逗号)
正在保存操作
我们将在下一课中使用 GetTracks
操作,所以让我们利用 Explorer 的另一个功能来简化这个过程。
在 操作 面板的顶部,我们会找到一个保存图标按钮。

点击 另存为 选项,从下拉菜单中打开一个模态窗口,我们可以在其中给我们的 操作 命名,并将其保存到 操作集合 中。
通过集合,我们可以将一组 操作 存储在一个方便快速访问的位置,方便我们测试对模式的未来更改。
让我们先给我们的 操作 命名为 TracksForHome
,以便我们下次需要它时能够找到它。接下来,在 选择一个集合 下拉菜单中,让我们选择 沙盒 下的选项以创建一个新的默认集合。

在我们点击 保存 按钮后,我们会看到我们的 操作 的选项卡现在有了我们给它分配的名称!此外,我们会看到一个书签图标,表示此操作已保存到集合中。

我们可以使用 Explorer 左侧的面板访问我们已保存到集合中的 操作。点击菜单顶部的书签图标将打开所有 操作集合,在那里我们可以看到我们的 TracksForHome
操作 已保存以供快速访问!

Explorer 可以做更多的事情,但现在我们只介绍这些。随着我们的 查询 定义完毕,现在是构建我们的前端应用程序的时候了。
分享你关于本课的问题和评论
你的反馈帮助我们改进!如果你卡住了或感到困惑,请告诉我们,我们会帮助你。所有评论都是公开的,必须遵守 Apollo 行为准则。请注意,已解决或已处理的评论可能会被删除。
你需要一个 GitHub 帐户才能在下方发布。没有吗? 改用我们的 Odyssey 论坛发布。