概述
从模式的角度理解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账户。还没有吗? 请在我们的大冒险论坛中发布。