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