7. 在探索者中测试突变
3m
您目前处于本课程的较旧版本。 查看课程变更日志.

🧑‍🔬 测试我们的突变

现在我们已经设置了模式、,和用于提供有用的 响应的,现在让我们准备好在 探索者中测试我们的突变。

让我们通过打开一个新的终端窗口来启动服务器。在这里,我们将导航到server文件夹,使用cd server,然后运行npm start

服务器运行时,让我们转到https://127.0.0.1:4000。在浏览器中,我们可以看到服务器正在成功运行,有一条消息邀请我们它。让我们点击查询服务器以查看我们的一起的作用。

首先,让我们通过点击左侧侧边栏上的模式页面来检查我们的模式。在参考选项卡下,我们可以看到列出了一个新的Mutation类型:那就是incrementTrackViews字段!

https://127.0.0.1:4000
Screenshot of the GraphOS Studio Schema Reference tab, displaying the new mutation incrementTrackViews

为了在探索者中打开incrementTrackViews突变,让我们点击字段描述右侧的播放按钮。

这会带我们到探索器页面,侧边栏已打开并准备好让我们开始构建我们的第一个

https://127.0.0.1:4000
Screenshot of Explorer with an empty Operation panel, ready for us to start building our query

点击旁边的加号按钮()旁边的 incrementTrackViews 将其添加到我们的 操作面板中。这会为我们预先填写一些信息!语法应该是熟悉的,因为这与我们在查询中看到的相同语法,尤其是在 发射III 中,我们使用了

mutation IncrementTrackViews($incrementTrackViewsId: ID!) {
incrementTrackViews(id: $incrementTrackViewsId) {
}
}

✍️ 构建 GraphQL 变异

我们从 mutation关键字开始,然后是操作的名称(探索器已经为我们命名了 IncrementTrackViews)。在括号内,我们有一个用 $ 符号表示的 incrementTrackViewsId 变量,它是 ID 类型并且是必需的。

此变量在下面的 变量 部分中设置。目前它设置为 null,所以让我们将其更改为我们一直在使用的同一轨道 ID:c_0

https://127.0.0.1:4000
Screenshot showing the Variables panel in Explorer with a populated track ID
{
"incrementTrackViewsId": "c_0"
}
在编写 GraphQL 变异时,应该以哪个关键字开头?
在编写 GraphQL 变异时,作为最佳实践,下面应该紧跟着哪个内容?

返回到 操作 面板中!

在大括号内部,我们列出我们的 入口点: incrementTrackViews。它接收一个 id 参数,我们将其设置为 incrementTrackViewsId,也就是我们刚刚设置为 c_0 的同一个。

现在,在第二对大括号内部,我们可以开始添加我们响应对象中可用的 。这些字段在侧边栏中,使得通过点击旁边的加号按钮()来构建这个 非常容易。

我们想看到 codesuccess 布尔值、messagetrack 对象本身。

track 对象内部,我们想看到 idnumberOfViews。查看次数是我们正在更新的内容,因此我们想在 希望成功后看到新的更新值。 id 将被我们的 缓存使用,稍后我们将介绍前端实现时将详细阐述。

https://127.0.0.1:4000
Screenshot showing the Operation panel in Explorer containing the completed mutation called IncrementTrackViews

这个 应该看起来像这样:

mutation IncrementTrackViews($incrementTrackViewsId: ID!) {
incrementTrackViews(id: $incrementTrackViewsId) {
code
success
message
track {
id
numberOfViews
}
}
}

我们来运行它!

在右侧你可以看到我们预期的 code 是 200,success 标志是 truemessage 表示成功,并返回我们新更新的 track

https://127.0.0.1:4000
Screenshot of the Explorer showing a successful response to the IncrementTrackViews mutation

我们反复运行这个 时,可以看到查看次数在增加!

在成功突变响应中,codesuccessmessage 的值是从哪里来的?

让我们看看当我们把incrementTrackViewsId改为我们愚蠢的字符串"DOESNTEXIST"时,会发生什么。

{
"incrementTrackViewsId": "DOESNTEXIST"
}

当我们运行这个时,我们看到响应返回code 404,successfalse,并且消息message表示"找不到指定ID的跟踪"。跟踪track也被设置为null,没有可用数据。

https://127.0.0.1:4000
Screenshot of the Explorer showing a 404 response to the IncrementTrackViews mutation
当突变失败时,响应中哪些是codemessage值的来源?

我们的看起来很棒,它正在做它应该做的事情!现在,让我们跳转到客户端领域。

上一页

分享您对本课程的疑问和评论

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

您需要GitHub账户才能发表以下评论。还没有吗? 请在我们的Odyssey论坛上发帖代替。