6. Apollo Explorer
5m
你当前正在使用本课程的旧版本。 查看课程变更日志.

🚀 探索我们的第一个查询

太棒了!我们的架构已正确加载,我们的正在 4000 端口上运行。现在是时候对我们的服务器进行测试,看看我们是否可以 我们主页网格功能所需的音轨数据。

要编写我们的测试 ,我们将使用 Apollo Explorer。Explorer 可免费使用,它提供了出色的开发功能,如交互式 构建、查询历史和响应提示。这将使我们的构建查询变得既快速又有趣。

由于我们仍处于构建 的本地开发阶段,我们会从在 Apollo Sandbox中打开 Explorer 开始。Sandbox 是 Apollo Studio 的一种特殊模式,它可让你在部署本地的 更改之前对它们进行测试。

注意:我们将在 Lift-off V:生产和模式注册表中详细讨论如何部署

要在 中打开 Explorer,您可以在终端中cmd+click URL(从启动服务器开始)以在浏览器中打开 URL,也可以在此处打开它:https://127.0.0.1:4000.

探索 Explorer

在浏览器中,我们可以看到我们的服务器正在成功运行,并有一条消息邀请我们 它。我们点击 查询您的服务器以查看我们

https://127.0.0.1:4000
A screenshot of the landing page with a button prompting to query the server using Sandbox.

当我们进入 Sandbox Explorer 时,它应该是这样的

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.

中间的 操作面板是我们创建查询的地方。Explorer 已经填写了使用我们 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 的列表。太棒了!

构建查询

Explorer 的 文档选项卡允许您深入了解模式的 ,从 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 ,但是 Explorer 还有一个方法可以一次性将所有字段添加到 中。当我们单击 字段子标题旁边的下拉菜单时,我们会看到有两个选项。

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 不会返回 类型 - 它返回 ,其中包含其他子字段!幸运的是,Explorer 中有另一个选项,无论是返回标量还是对象类型,它都可以一次性添加所有字段。我们再次点击 字段 小标题旁边的下拉列表。

该下拉列表中的第二个选项是 递归选择所有字段。这意味着除了向我们 中添加所有 外,还可以包括返回 和对象类型的所有子字段的字段!我们看看这在实践中是怎么样的。

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 已包含在 中,以及其子字段: id, namephoto. 通过递归添加所有 ,我们能够在不必逐一选择的情况下包含 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

,其中我们可以看到我们的TracksForHome已保存用于快速访问!

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

定义好后,就该着手构建我们前端应用了。

下列哪些是使用 Apollo Studio Explorer 的好处?
上一个

分享你对本次课程的疑问和看法

你的反馈能够帮助我们做得更好!如果你遇到难题或感到困惑,请将问题告知我们,我们会帮助你解决。所有评论均为公开内容,必须遵守 Apollo 行为准则。请注意,评论已解决或已讨论的内容可能会被删除。

你必须拥有 GitHub 账户,才能在下方发布内容。还没有帐户? 改为在我们的 Odyssey 论坛上发布内容。