3. Apollo探险家
5m

概述

从模式的角度理解SDL很有帮助,但我们要真正,但我们要在客户端实际编写查询来获取数据。幸运的是,我们有一个工具允许我们探索这一过程: 探险家!

在本课中,我们将

  • 在探险家中亲手探索我们的 API
  • 构建和运行轨迹数据查询

介绍探险家

为了编写测试查询,我们将使用阿波罗探险家。探险家是免费的,它提供了交互式查询构建、查询历史和响应提示等卓越的开发功能。这将使我们的查询构建既快速又有趣。

由于我们仍在构建本地开发阶段的,我们首先在中打开探险家。

让我们通过打开新浏览器回到沙盒https://studio.apollographql.com/sandbox/explorer。您也可以通过点击左侧菜单中的探险家选项从Schema页面访问探险家。

http://studio.apollographql.com/sandbox/schema/reference

Accessing the Explorer from the Schema page: the Explorer menu option is outlined

探索资源管理器

沙盒应已从上一步骤连接到我们的API。如果您需要重新连接,请将以下端点粘贴到屏幕顶部的输入框中。

我们的GraphQL API的端点
https://odyssey-lift-off-server.herokuapp.com/
http://studio.apollographql.com/sandbox/explorer

A screenshot of the Explorer interface in Apollo Sandbox, connected to the API with some new data displaying.

资源管理器由三个主要部分组成: 文档操作响应

中间的操作面板是我们创建查询的地方。您可能已经看到其中包含了一个 ;如果有的话,我们可以从头开始,并点击上面的加号按钮来打开一个新标签。

http://studio.apollographql.com/sandbox/explorer

A screenshot of the Explorer interface in Apollo Sandbox, highlighting the plus button above the Operation panel.

构建查询

资源管理器的文档选项卡使您能够深入到方案中 ,从方案的入口点开始。Query类型。

http://studio.apollographql.com/sandbox/explorer

A screenshot of the Explorer interface. The Documentation panel shows a list of possible fields to include in the query.

让我们点击tracksForHome 旁边的加号按钮,将其添加到我们的 中。

http://studio.apollographql.com/sandbox/explorer

The Operation panel updated to include the tracksForHome field.

tracksForHome 返回一个Track项目的列表,我们会看到文档面板会自动更新以显示我们为每个Track可以的字段。

当您点击一个 时,您可以看到我们添加的描述,以及字段的子字段(如果有)。

http://studio.apollographql.com/sandbox/explorer

The Documentation panel displaying greater detail about a Track's title field.

点击某个旁边的加号(⊕)按钮,会自动将该字段添加到操作面板中的中。这是一种组装复杂查询而无需记住方案确切结构的简便方法。

http://studio.apollographql.com/sandbox/explorer

The Operation panel updated to add the title for each track object.

让我们将标题字段添加到我们的中,并通过点击面板顶部的蓝色播放按钮来运行它。片刻之后,响应面板将更新...我们的每个轨迹的标题都已经到达!

http://studio.apollographql.com/sandbox/explorer

The Response panel after the query has run, showing the titles for each track.

添加所有字段

目前,我们只选择了标题字段,但探索器也提供了一种一次性将所有字段添加到中的方法。当我们在字段子标题旁边的下拉菜单中选择时,我们会看到两个选项。

http://studio.apollographql.com/sandbox/explorer

Opening the Fields dropdown to see options to add all fields to a query in Apollo Explorer.

首先,我们可以选择所有标量字段。这将选择所有在tracksForHome类型中返回而不具有其他子字段

点击选择所有标量字段。我们会看到许多新被添加到我们的中。

http://studio.apollographql.com/sandbox/explorer

The Explorer, showing the new scalar fields that were added to our query.

我们已经处理了所有的字段,但我们会发现既没有添加作者字段也没有添加模块字段。这是因为这些字段不返回类型 - 它们返回一个(包含子字段)!幸运的是,探索器中还有一个一次性添加所有字段(无论它们返回标量类型还是对象类型)的选项。让我们再次点击字段子标题旁边的下拉菜单。

这个下拉菜单中的第二个选项是选择所有字段递归地。这意味着除了将所有字段添加到我们的中之外,我们还可以包括返回的字段以及该对象类型的所有子字段!让我们看看在实际中这会是什么样子。

http://studio.apollographql.com/sandbox/explorer

The Fields dropdown, showing the option to select all fields recursively.

当我们点击 递归选择所有字段

http://studio.apollographql.com/sandbox/explorer

The Explorer, showing that all fields have been added recursively to our query.

查询中以及它们各自的子字段。通过递归添加所有字段,我们可以包括AuthorModule类型的所有子字段,而不必逐个选择。

执行查询

在这里,让我们将我们的ExampleQuery重命名为GetTracks,使其更明显地表明用途。您完成的应如下所示:

query GetTracks {
tracksForHome {
title
id
thumbnail
length
modulesCount
description
numberOfViews
author {
id
name
photo
}
modules {
id
title
length
content
videoUrl
}
}
}

现在让我们执行它!看看这些漂亮的数据。

任务!
http://studio.apollographql.com/sandbox/explorer

The Response panel in the Explorer showing all of our queried data.

我们刚刚返回了大量的数据:我们有关于我们所有轨道、作者和模块的详细信息,它们全部在一个中!

保存操作

从执行这个我们可以看出,对于获取干净、精确的数据是多么强大。

但是当我们回到我们的应用 Mock-up,我们会发现我们可能刚刚对首页进行了点过度查询。

A mockup of the app, showing a grid of learning track cards

在上一课中,我们定义了满足前端视图所需的

  • 标题
  • 缩略图图像
  • 长度(估计持续时间)
  • 模块数量
  • 作者名字
  • 作者图片

从这张清单上可以看出,我们从完整的返回的一些数据——例如具体的modules细节——是不必要的。

没问题!让我们在探索器中打开一个新的操作标签页(点击加号按钮),构建一个只获取我们需要的细节,用于上面显示的 Mock-up。

试着你自己!然后检查下面的答案。

query GetTracks {
tracksForHome {
id
title
thumbnail
length
modulesCount
author {
name
photo
}
}
}

这样做好多了。因为我们能按字段构建我们的查询,我们能更精确地控制从我们的 API 返回的数据的形状。

http://studio.apollographql.com/sandbox/explorer

The final query for our home page data, constructed in the Explorer.

保存操作

我们将在未来的课程中使用这个 GetTracks ,所以让我们利用另一个使这变得更容易的探索功能。

操作 面板的顶部,我们会找到一个保存图标按钮。

http://studio.apollographql.com/sandbox/explorer

A screenshot highlighting the save button at the top of the Operation panel in Explorer, opened to the 'Save as' option.

从下拉菜单中选择 另存为 选项将打开一个模态窗口,我们可以给我们 命名,并将其保存到一个操作集合 中。

有了集合,我们可以将一组 存储在一个方便访问的位置,当我们想要测试模式未来的变更时。

让我们先将我们的 命名为 TracksForHome,这样我们在需要时就可以找到它。 然后,在 选择一个集合 下拉菜单中,让我们选择 沙箱 下的选项,以创建一个新的默认集合。

http://studio.apollographql.com/sandbox/explorer

The Save Operation modal, with fields to name an operation and store it in a new default Sandbox collection.

点击 保存 按钮,我们会看到我们的 标签现在有了我们指定的名字!此外,我们还会看到一个书签图标,表示该操作已被保存到集合中。

http://studio.apollographql.com/sandbox/explorer

Explorer showing the named Operation tab and bookmark icon.

我们可以使用探索器左侧的面板访问我们保存到集合中的 点击菜单顶部的书签图标将打开所有我们的 操作集合,在那里我们可以看到我们的 TracksForHome 已经保存,便于快速访问!

http://studio.apollographql.com/sandbox/explorer

Opening the Operation Collections panel to access a saved operation.

探索器可以做得更多,但我们现在就先介绍到这里。 我们的 已经定义,现在是时候着手构建前端应用程序了。

练习

以下哪些是GraphOS Studio Explorer使用的好处?

关键要点

  • 探索者为我们提供了一个环境来构建查询并对其提供的 API 进行操作。
  • 我们可以使用探索者的文档面板深入了解我们的 中的类型和 ,并构建全面、精确的查询。
  • 可以保存到操作集合中以便以后使用。

接下来

我们连接到我们的API并运行了我们的第一个 查询。干得好!现在,是时候将它们从沙盒中拿出来,带入我们的应用程序。接下来,我们将讨论GraphQL 从客户端到服务器再到客户端的旅程,并认识将使我们的数据生动的工具!

上一页

分享您对这节课的疑问和评论

此课程目前处于

beta
.您的反馈帮助我们将课程改进!如果您遇到了困难或疑惑,请告诉我们,我们将帮助您解决。所有评论都是公开的,必须遵守的 Apollo行为准则。请注意,已解决或处理的评论可能会被删除。

您需要在下面发布之前拥有GitHub账户。还没有吗? 请在我们的大冒险论坛中发布。