🚀 探索我们的第一个查询
太棒了!我们的架构已正确加载,我们的图形正在 4000 端口上运行。现在是时候对我们的服务器进行测试,看看我们是否可以 查询我们主页网格功能所需的音轨数据。
要编写我们的测试 查询,我们将使用 Apollo Explorer。Explorer 可免费使用,它提供了出色的开发功能,如交互式 查询构建、查询历史和响应提示。这将使我们的构建查询变得既快速又有趣。
由于我们仍处于构建 图形的本地开发阶段,我们会从在 Apollo Sandbox中打开 Explorer 开始。Sandbox 是 Apollo Studio 的一种特殊模式,它可让你在部署本地的 图形更改之前对它们进行测试。
注意:我们将在 Lift-off V:生产和模式注册表中详细讨论如何部署 graph。
要在 Apollo Sandbox中打开 Explorer,您可以在终端中cmd+click URL(从启动服务器开始)以在浏览器中打开 URL,也可以在此处打开它:https://:4000.
探索 Explorer
在浏览器中,我们可以看到我们的服务器正在成功运行,并有一条消息邀请我们 查询它。我们点击 查询您的服务器以查看我们 graph在 Apollo Sandbox中

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

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

右侧的 响应面板显示我们歌曲 ID 的列表。太棒了!
构建查询
Explorer 的 文档选项卡允许您深入了解模式的 字段,从 Query类型的入口点开始。

单击 字段时,您可以查看我们添加的说明以及该字段的子字段(如果有)。

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

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

首先,我们可以选择 选择所有标量字段。这会选择所有 字段的类型,这些 字段会返回一个不具有其他子字段的 tracksForHome值。
单击 选择所有标量字段。我们会看到 thumbnail、 length和 modulesCount 字段已被添加到我们的 查询中。

我们已经处理完 标量 字段 了,但我们注意到 author 字段 没有被添加。这是因为 author 字段 不会返回 标量 类型 - 它返回 对象类型,其中包含其他子字段!幸运的是,Explorer 中有另一个选项,无论是返回标量还是对象类型,它都可以一次性添加所有字段。我们再次点击 字段 小标题旁边的下拉列表。
该下拉列表中的第二个选项是 递归选择所有字段。这意味着除了向我们 操作 中添加所有 标量 字段 外,还可以包括返回 对象类型 和对象类型的所有子字段的字段!我们看看这在实践中是怎么样的。

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

我们可以看到 author 字段已包含在 查询中,以及其子字段: id, name 和 photo. 通过递归添加所有 字段,我们能够在不必逐一选择的情况下包含 Author 类型的全部子字段。
运行查询
在此处,我们将会把 操作 从 ExampleQuery 重新命名为 GetTracks,这样就可以更清楚地显示其用途。完善的 操作应与以下内容相符:
query GetTracks {tracksForHome {idtitlethumbnaillengthmodulesCountauthor {idnamephoto}}}
注意,查询的响应与我们为主页网格填充数据所需的数据完全相同:没有额外的内容,也没有缺少的内容,而且一次调用即可完成。REST API 可能需要我们进行多次调用,以便通过其 ID 获取每位作者。
使用上一课程中定义的模拟在 Explorer 中针对本地服务器运行上述查询。在 Explorer 的响应部分:复制 tracksForHome 数组的第一个 Track 条目,并将其粘贴在下面(不包括结尾的逗号)
保存操作
我们将在后续课程中使用 GetTracks 操作,因此,让我们利用另一个 Explorer 功能使此操作变得更容易。
在 操作面板的顶部,我们将找到一个保存图标按钮。

将文件另存为操作一个名称,并将其保存在操作集合
操作在快速访问的位置进行存储,这样我们将来就有可能对架构进行测试。
操作一个名称TracksForHome沙盒创建一个新的默认集合。

操作的标签现在有了我们分配给它的名称!此外,我们还会看到一个书签图标,指明此操作已保存在集合中。

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

查询定义好后,就该着手构建我们前端应用了。
分享你对本次课程的疑问和看法
你的反馈能够帮助我们做得更好!如果你遇到难题或感到困惑,请将问题告知我们,我们会帮助你解决。所有评论均为公开内容,必须遵守 Apollo 行为准则。请注意,评论已解决或已讨论的内容可能会被删除。
你必须拥有 GitHub 账户,才能在下方发布内容。还没有帐户? 改为在我们的 Odyssey 论坛上发布内容。