概览

现在是时候通过全新的一项功能来扩展我们的应用了：我们将会引入一个展示特定曲目详情的页面。我们已经获得了一些从查询 曲目列表的实际操作GraphQL API 来获取一个非常具体的曲目？

在此课程中，我们将会

• 了解 GraphQL 参数s
• 编写一个 查询 接受一个 变量
• 构建一个页面来显示一个曲目对象的数据

一项新的功能

我们的目标是创建一个针对特定音轨请求数据的页面。为此，我们需要组合一个查询，它请求针对单一音轨的数据。

让我们从设计团队提供给我们的音轨页面模型开始。在这里，我们需要显示关于音轨的更多信息，而这些信息在主页上的卡片中尚未包含。

除了卡片中的内容外，音轨还应该有

• 描述
• 观看次数
• 该音轨中包含的模块列表

对于每个模块，我们需要

• 标题
• 长度

新增查询入口点

返回 Sandbox，并从左侧工具栏中选择架构选项。

我们已经练习过查询 tracksForHome 字段，但是让我们看看 Query 类型上的另外两个字段： track 和 module。剩下的这些字段中的每个字段都接受一个参数。

GraphQL 参数

一个参数是我们在查询中的特定字段中提供的值。对于track和module，架构定义了一个它们各自接受的id 参数。通过为模块或音轨对象指定id，我们可以查询特定对象的​​数据。

在后端，GraphQL 服务端可以使用 字段提供的 参数来帮助确定如何填充该字段的数据。参数可以帮助你检索具体对象、过滤一组对象集甚至转换字段的返回值。

我们架构中接受 id 参数的 track 字段，看起来正是我们实现曲目页面梦想所需使用的那 一个字段。它接受 id，并返回具体 Track 的数据！

这意味着我们在前端所需要做的就是传递给具体 track 的 id 有效值——服务端将处理好返回我们所需的数据！

让我们看看如何在 Explorer 中，使用 参数来构建具体 查询。

🛠️ 构建查询

回到Explorer来构建我们的 查询。

点击 track 字段上的加号按钮（⊕），我们开始看到我们的 查询在 操作面板中合并起来。

首先让我们重命名 查询以更好地解释它的用途，因此我们将用 Track 替换 GetTrack。

到目前为止，操作面板的 Explorer 应该包含以下内容：

您会在此处注意到一些新内容：美元符号（$）后跟名称trackId。

💰 变量

$符号表示 GraphQL 中的 变量。$符号后的名称是我们 变量的名称，我们可以在整个 查询中使用它。冒号后面是 变量的类型，它必须与我们将为其使用的 参数的类型相匹配。

变量很棒——它们让我们能够动态地从客户端传递 参数值，因此我们不必将值硬编码到我们的 查询中。每当我们创建带参数的查询时，都会使用它们。

在我们的案例中，我们有一个 变量名为 trackId，它是由 Explorer 在 变量部分中为我们设置的。现在，它设置为 null，但让我们用一个有效的音轨 ID 替换它： c_0。

将以下内容添加到 Explorer 中的 变量部分：

在开始添加来自我们最初的模型制作的所有 字段之前，我们先从返回 id 和 title开始。

现在，资源管理器中的 操作面板应如下所示：

当单击按钮以运行 查询时，我们将看到所期望的数据：第一首曲目“天文猫，导言”。

好极了，让我们通过单击 字段子标题旁的下拉菜单，添加剩余的 字段。当我们从下拉菜单中单击 递归选择所有字段时，我们将看到所有 字段和子字段已添加到 查询。

完整的 查询应如下所示：

让我们再次单击 查询按钮… 似乎我们获取了完整的曲目，但作为 JSON 对象有些难以阅读。资源管理器有一个不错的选项，可以将响应格式化为表格。

现在，我们可以清楚地看到所需的曲目，以及每个模块的所有详细信息！太棒了！

实践

重要要点

• 一个 GraphQL 参数是我们为 查询 中特定 字段 提供的值。
• 在后端，GraphQL 服务器可以使用 参数帮助确定如何为 字段 填充数据。
• 我们使用 $ 符号表示 变量 在 GraphQL 中。
• 使用 变量，我们可以在客户端动态传递 参数 值。

下一步

我们的 查询 已准备就绪，但我们仍然需要前端部分！让我们在下一节课中构建曲目页面。