概述
从模式的角度理解SDL很有帮助,但我们要真正SDL,但我们要在客户端实际编写查询来获取数据。幸运的是,我们有一个工具允许我们探索这一过程:Apollo沙盒 探险家!
在本课中,我们将
- 在探险家中亲手探索我们的GraphQL API
- 构建和运行轨迹数据查询
介绍探险家
为了编写测试查询,我们将使用阿波罗探险家。探险家是免费的,它提供了交互式查询构建、查询历史和响应提示等卓越的开发功能。这将使我们的查询构建既快速又有趣。
由于我们仍在构建本地开发阶段的graph,我们首先在阿波罗沙盒中打开探险家。
让我们通过打开新浏览器回到沙盒https://studio.apollographql.com/sandbox/explorer。您也可以通过点击左侧菜单中的探险家选项从Schema页面访问探险家。
探索资源管理器
沙盒应已从上一步骤连接到我们的API。如果您需要重新连接,请将以下端点粘贴到屏幕顶部的输入框中。
https://odyssey-lift-off-server.herokuapp.com/
资源管理器由三个主要部分组成: 文档、 操作和 响应。
中间的操作面板是我们创建查询的地方。您可能已经看到其中包含了一个 操作;如果有的话,我们可以从头开始,并点击上面的加号按钮来打开一个新标签。
构建查询
资源管理器的文档选项卡使您能够深入到方案中 字段,从方案的入口点开始。Query类型。
让我们点击tracksForHome 字段旁边的加号按钮,将其添加到我们的 查询中。
该tracksForHome 字段返回一个Track项目的列表,我们会看到文档面板会自动更新以显示我们为每个Track可以查询的字段。
当您点击一个 字段时,您可以看到我们添加的描述,以及字段的子字段(如果有)。
点击某个字段旁边的加号(⊕)按钮,会自动将该字段添加到操作面板中的查询中。这是一种组装复杂查询而无需记住方案确切结构的简便方法。
让我们将标题字段添加到我们的操作中,并通过点击面板顶部的蓝色播放按钮来运行它。片刻之后,响应面板将更新...我们的每个轨迹的标题都已经到达!
添加所有字段
目前,我们只选择了标题字段,但探索器也提供了一种一次性将所有字段添加到操作中的方法。当我们在字段子标题旁边的下拉菜单中选择时,我们会看到两个选项。
首先,我们可以选择所有标量字段。这将选择所有在tracksForHome类型中返回而不具有其他子字段的字段。
点击选择所有标量字段。我们会看到许多新字段被添加到我们的查询中。
我们已经处理了所有的标量字段,但我们会发现既没有添加作者字段也没有添加模块字段。这是因为这些字段不返回标量类型 - 它们返回一个对象类型(包含子字段)!幸运的是,探索器中还有一个一次性添加所有字段(无论它们返回标量类型还是对象类型)的选项。让我们再次点击字段子标题旁边的下拉菜单。
这个下拉菜单中的第二个选项是选择所有字段递归地。这意味着除了将所有标量字段添加到我们的操作中之外,我们还可以包括返回对象类型的字段以及该对象类型的所有子字段!让我们看看在实际中这会是什么样子。
当我们点击 递归选择所有字段,
查询中以及它们各自的子字段。通过递归添加所有字段,我们可以包括Author和Module类型的所有子字段,而不必逐个选择。
执行查询
在这里,让我们将我们的操作从ExampleQuery重命名为GetTracks,使其更明显地表明用途。您完成的操作应如下所示:
query GetTracks {tracksForHome {titleidthumbnaillengthmodulesCountdescriptionnumberOfViewsauthor {idnamephoto}modules {idtitlelengthcontentvideoUrl}}}
现在让我们执行它!看看这些漂亮的数据。
我们刚刚返回了大量的数据:我们有关于我们所有轨道、作者和模块的详细信息,它们全部在一个查询中!
保存操作
从执行这个查询我们可以看出,GraphQL对于获取干净、精确的数据是多么强大。
但是当我们回到我们的应用 Mock-up,我们会发现我们可能刚刚对首页进行了点过度查询。

在上一课中,我们定义了满足前端视图所需的字段。
- 标题
- 缩略图图像
- 长度(估计持续时间)
- 模块数量
- 作者名字
- 作者图片
从这张清单上可以看出,我们从完整的查询返回的一些数据——例如具体的modules细节——是不必要的。
没问题!让我们在探索器中打开一个新的操作标签页(点击加号按钮),构建一个只获取我们需要的细节查询,用于上面显示的 Mock-up。
试着你自己!然后检查下面的答案。
query GetTracks {tracksForHome {idtitlethumbnaillengthmodulesCountauthor {namephoto}}}
这样做好多了。因为我们能按字段构建我们的查询字段,我们能更精确地控制从我们的 API 返回的数据的形状。
保存操作
我们将在未来的课程中使用这个 GetTracks 操作 ,所以让我们利用另一个使这变得更容易的探索功能。
在 操作 面板的顶部,我们会找到一个保存图标按钮。
从下拉菜单中选择 另存为 选项将打开一个模态窗口,我们可以给我们操作 命名,并将其保存到一个操作集合 中。
有了集合,我们可以将一组操作 存储在一个方便访问的位置,当我们想要测试模式未来的变更时。
让我们先将我们的操作 命名为 TracksForHome,这样我们在需要时就可以找到它。 然后,在 选择一个集合 下拉菜单中,让我们选择 沙箱 下的选项,以创建一个新的默认集合。
点击 保存 按钮,我们会看到我们的操作 标签现在有了我们指定的名字!此外,我们还会看到一个书签图标,表示该操作已被保存到集合中。
我们可以使用探索器左侧的面板访问我们保存到集合中的操作。 点击菜单顶部的书签图标将打开所有我们的 操作集合,在那里我们可以看到我们的 TracksForHome 操作 已经保存,便于快速访问!
探索器可以做得更多,但我们现在就先介绍到这里。 我们的查询 已经定义,现在是时候着手构建前端应用程序了。
练习
关键要点
- 探索者为我们提供了一个环境来构建查询并对其提供的 GraphQL API 进行操作。
- 我们可以使用探索者的文档面板深入了解我们的 查询 中的类型和 字段,并构建全面、精确的查询。
- 操作 可以保存到操作集合中以便以后使用。
接下来
我们连接到我们的API并运行了我们的第一个 GraphQL 查询。干得好!现在,是时候将它们从沙盒中拿出来,带入我们的应用程序。接下来,我们将讨论GraphQL 查询 从客户端到服务器再到客户端的旅程,并认识将使我们的数据生动的工具!
分享您对这节课的疑问和评论
此课程目前处于
您需要在下面发布之前拥有GitHub账户。还没有吗? 请在我们的大冒险论坛中发布。