6. 阿波罗探险家
5m

🚀 探索我们的第一个查询

好的!我们的模式已正确加载,并且我们的正在端口 4000上运行。现在是时候对我们的服务器进行测试,看看我们是否可以 我们首页网格功能所需的曲目数据。

要编写我们的测试 ,我们将使用 阿波罗探险家。探险家是免费使用的,它提供了很棒的开发功能,例如交互式 构建、查询历史记录和响应提示。这将使构建我们的查询变得快速有趣。

由于我们仍然处于构建我们 的本地开发阶段,我们将首先在 阿波罗沙盒中打开探险家。沙盒是 的一种特殊模式,它允许您在部署本地图更改之前对其进行测试。

注意: 要了解如何将应用程序部署到生产环境,请查看 支线任务:使用 Railway 部署阿波罗应用程序

要打开 中的探险家,您可以 cmd+click 您的终端(从启动服务器开始)中的 URL 在浏览器中打开它,或者您也可以在这里打开它: https://127.0.0.1:4000

探索探险家

在浏览器中,我们可以看到沙盒和探险家已打开并连接到 localhost:4000。它应该看起来像这样:

https://127.0.0.1:4000
A screenshot of the Explorer interface in Apollo Sandbox. The UI has three main columns: Documentation, Operation, and Response.

中间的 操作 面板是我们创建查询的地方。探险家已经填充了默认的 ,该操作使用我们的 tracksForHome !您可以直接编辑 或从 文档 选项卡(下面将详细介绍)添加

操作 面板的顶部是运行我们 的按钮。让我们现在点击它,看看会发生什么:

https://127.0.0.1:4000
A screenshot of the Explorer interface after a query has been run. The Response panel now shows the JSON object for the data returned by the server.

右侧的 响应 面板显示了我们的曲目 ID 列表。不错!

构建查询

探险家的 文档 选项卡使您能够深入了解模式的 ,从 Query 类型的入口点开始。

https://127.0.0.1:4000
A screenshot of the Explorer interface. The Documentation panel shows a list of possible fields to include in the query.

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

https://127.0.0.1:4000
A screenshot of the Explorer interface, with focus on the title field and its description

点击 旁边的加号()按钮会自动将该字段添加到 中的 操作 面板。这是一种便捷的方式来组装复杂的查询,而无需记住模式的精确结构。

让我们将 title 添加到我们的 并再次运行它。您将在 响应 面板中看到更新的响应。

https://127.0.0.1:4000
A screenshot of the Explorer interface, with the title field added to the query and response data populated.

添加所有字段

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

https://127.0.0.1:4000
Opening the Fields dropdown to see options to add all fields to a query in Apollo Explorer

首先,我们可以选择 选择所有标量字段。这将选择 tracksForHome 类型上的所有 ,这些字段返回的值没有额外的子

点击 选择所有标量字段。我们会看到 thumbnaillengthmodulesCount 已添加到我们的 中。

https://127.0.0.1:4000
The Explorer, showing the new scalar fields that were added to our query

我们所有的 都已处理,但我们会注意到 author 没有被添加。这是因为 author 没有返回 类型 - 它返回了一个带有额外子字段的 !幸运的是,探险家还有另一个选项可以一次性添加所有字段,无论它们返回标量类型还是对象类型。让我们再次点击 字段 子标题旁边的下拉菜单。

此下拉菜单中的第二个选项是 递归选择所有字段。这意味着除了将所有 添加到我们的 中,我们还可以包括返回 的字段,以及所有对象类型的子字段!让我们看看在实践中是什么样子。

https://127.0.0.1:4000
The Fields dropdown, showing the option to select all fields recursively

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

https://127.0.0.1:4000
The Explorer, showing that all fields have been added recursively to our query

我们可以看到 author 已包含在 中,以及它的所有子字段:idnamephoto。通过递归添加所有 ,我们可以包含 Author 类型的所有子字段,而无需逐个选择它们。

运行查询

既然我们在这里,让我们将我们的 ExampleQuery 重命名为 GetTracks,这样更清楚地表明它的作用。您的完成 应该与以下内容匹配:

query GetTracks {
tracksForHome {
id
title
thumbnail
length
modulesCount
author {
id
name
photo
}
}
}
任务!

请注意, 的响应看起来完全像我们填充首页网格所需的数据:没有多余的,也没有缺少的,全部在一个调用中。REST API 可能需要我们进行多次调用才能通过其 ID 获取每个作者。

代码挑战!

在 Explorer 中,使用本地服务器和上一课中定义的模拟数据运行上述查询。在 Explorer 的响应部分:复制 tracksForHome 数组中的第一个 Track 条目并将其粘贴在下方(不包括尾随逗号)

正在加载...
加载进度

正在保存操作

我们将在下一课中使用 GetTracks ,所以让我们利用 Explorer 的另一个功能来简化这个过程。

操作 面板的顶部,我们会找到一个保存图标按钮。

https://127.0.0.1:4000
A screenshot highlighting the save button at the top of the Operation panel in Explorer, opened to the 'Save as' option

点击 另存为 选项,从下拉菜单中打开一个模态窗口,我们可以在其中给我们的 命名,并将其保存到 操作集合 中。

通过集合,我们可以将一组 存储在一个方便快速访问的位置,方便我们测试对模式的未来更改。

让我们先给我们的 命名为 TracksForHome,以便我们下次需要它时能够找到它。接下来,在 选择一个集合 下拉菜单中,让我们选择 沙盒 下的选项以创建一个新的默认集合。

https://127.0.0.1:4000
The Save Operation modal, with fields to name an operation and store it in a new default Sandbox collection

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

https://127.0.0.1:4000
Explorer showing the named Operation tab and bookmark icon

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

https://127.0.0.1:4000
Opening the Operation Collections panel to access a saved operation

Explorer 可以做更多的事情,但现在我们只介绍这些。随着我们的 定义完毕,现在是构建我们的前端应用程序的时候了。

以下哪些是使用 GraphOS Studio Explorer 的好处?
上一步

分享你关于本课的问题和评论

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

你需要一个 GitHub 帐户才能在下方发布。没有吗? 改用我们的 Odyssey 论坛发布。