概述

到目前为止，我们仅处理从 API 中获取数据。现在是时候进行转换，修改我们的数据了。

我们应用程序中的每个音轨都显示了查看次数。当用户通过主页访问曲目页面时，我们希望每次都增加此数字。我们将使用GraphQL 突变!

在本课程中，我们将

• 了解突变是什么
• 在 Explorer 中测试突变

的Mutation 类型的

到目前为止，我们的应用只使用了一种 GraphQL 操作：查询。这些都是用于检索数据的只读操作。要修改数据，我们需要使用另一种类型的 GraphQL 操作： 变异，即 写操作。

与 Query 类型非常类似， Mutation 类型用作我们的模式的入口点。它遵循与 模式定义语言或 SDL（我们到目前为止一直在使用的）相同的语法。

模式语法

在 GraphQL 服务器的模式中， Mutation 类型使用 type 关键字，然后是 Mutation 名称来声明。大括号内是入口点： 字段，我们可以用它们来更改我们的数据。

变异通常以一个描述我们更新 操作（例如 add、 delete或 create）的具体操作的动词开头，后跟 变异作用的任何数据。由于变异通常会修改特定对象，因此它们通常需要 参数。变异的返回类型显示在冒号之后。

变异响应应包括变异更新的数据，以便我们的客户端可以在不必运行后续 查询来获取这些详细信息的情况下更新其 UI！

我们可以通过返回沙箱的架构页面，并从左侧菜单中选择Mutation来更仔细地查看 API 的Mutation类型。

我们可以看到，要增加特定曲目上的观看数，此字段以该曲目的id作为参数。它返回一种类型，称为IncrementTrackViewsResponse。我们点击该类型，仔细查看一下。

此类型上的字段向我们展示了查询时我们将能够访问的数据Mutation完成。我们可以看到code、success和message，它们是操作产生的结果，我们还可以访问整个Track对象，该对象在track 字段下已修改。

处理变更

要开始使用此变更，让我们返回Mutation页面，向下滚动到incrementTrackViews 字段。要在 Explorer 中打开此变更，让我们点击字段描述中右侧的播放图标。

这将带我们进入 Explorer 页面，其中侧边栏已打开，让我们准备好开始构建我们的第一个变更。

单击 ⊕旁边的加号按钮 (incrementTrackViews) 将其添加到我们的 操作面板中。这会为我们预先填写一些信息！

✍️生成 GraphQL 突变

我们从 mutation关键字开始，然后再写 操作的名称 (Explorer 已将其命名为 IncrementTrackViews给我们)。在括号内，我们有一个 变量，用 $符号表示，名为 incrementTrackViewsId，类型为 ID，并且是必需的。

此 变量在下面的 变量部分中设置。现在它被设为 null，因此我们将其更改为我们一直使用的相同曲目 ID: c_0。

返回到 突变，到 操作面板中！

在花括号内，我们列出 突变的入口点: incrementTrackViews。它接收一个 id 参数，我们将该参数设为 变量 incrementTrackViewsId，这个变量与我们刚刚设为 c_0相同。

现在在第二对大括号内部，我们可以开始添加字段在我们的响应对象中可用。这些字段位于侧边栏中，通过单击字段旁边的加号按钮（⊕）按钮，可以非常轻松地构建此突变。

我们希望看到code、success布尔值、message和track对象本身。

在track对象内部，我们希望id和numberOfViews。浏览次数是我们正在更新的内容，因此希望在突变成功后看到新更新的值。我们的Apollo Client缓存将使用id，我们将在稍后介绍前端实现时对其进行介绍。

这突变 操作应如下所示：

让我们继续运行它！

在右侧，您可以看到我们预期的字段：code为 200，success标志为true，message表示成功，并且我们获得了新更新后的track。

当我们一次又一次地运行突变时，我们可以看到浏览次数正在上升！

让我们看看当我们把 incrementTrackViewsId 更改为我们的无聊字符串“DOESNTEXIST”时会发生什么。

当我们运行此 mutation 时，我们看到响应中有 code 404，success 为 false，而 message 显示 Could not find track with specified ID。 track 也被设置为 null，没有任何可用数据。

我们的 mutation 看起来很棒，并且它正在做它应该做的事情！是时候将此功能引入我们的应用程序中了。

实践

要点

• Mutations 是写入-operations，允许我们更改数据。
• 就像 Query 类型一样，Mutation 类型充当我们模式的入口点。

下一步

我们的 mutation 已经构建并按我们预期运行。现在进入最后一步：将它引入我们的客户端代码，并看到我们的更改反映在 UI 中！