🧑🔬 测试我们的突变
现在我们已经设置了模式、数据源,和用于提供有用的突变 响应的解析器,现在让我们准备好在Apollo 沙箱 探索者中测试我们的突变。
让我们通过打开一个新的终端窗口来启动服务器。在这里,我们将导航到server
文件夹,使用cd server
,然后运行npm start
。
服务器运行时,让我们转到https://127.0.0.1:4000。在浏览器中,我们可以看到服务器正在成功运行,有一条消息邀请我们查询它。让我们点击查询服务器以查看我们的图与Apollo 沙箱一起的作用。
首先,让我们通过点击左侧侧边栏上的模式页面来检查我们的模式。在参考选项卡下,我们可以看到列出了一个新的Mutation
类型:那就是incrementTrackViews
字段!
为了在探索者中打开incrementTrackViews
突变,让我们点击字段描述右侧的播放按钮。
这会带我们到探索器页面,侧边栏已打开并准备好让我们开始构建我们的第一个变异。
点击旁边的加号按钮(⊕)旁边的 incrementTrackViews
将其添加到我们的 操作面板中。这会为我们预先填写一些信息!语法应该是熟悉的,因为这与我们在查询中看到的相同语法,尤其是在 发射III 中,我们使用了 参数和 变量。
mutation IncrementTrackViews($incrementTrackViewsId: ID!) {incrementTrackViews(id: $incrementTrackViewsId) {}}
✍️ 构建 GraphQL 变异
我们从 mutation
关键字开始,然后是操作的名称(探索器已经为我们命名了 IncrementTrackViews
)。在括号内,我们有一个用 $
符号表示的 incrementTrackViewsId
变量,它是 ID
类型并且是必需的。
此变量在下面的 变量 部分中设置。目前它设置为 null
,所以让我们将其更改为我们一直在使用的同一轨道 ID:c_0
。
{"incrementTrackViewsId": "c_0"}
返回到 突变 在 操作 面板中!
在大括号内部,我们列出我们的 突变 入口点: incrementTrackViews
。它接收一个 id
参数,我们将其设置为 变量 incrementTrackViewsId
,也就是我们刚刚设置为 c_0
的同一个。
现在,在第二对大括号内部,我们可以开始添加我们响应对象中可用的 字段。这些字段在侧边栏中,使得通过点击旁边的加号按钮(⊕)来构建这个 突变 非常容易。
我们想看到 code
、success
布尔值、message
和 track
对象本身。
在 track
对象内部,我们想看到 id
和 numberOfViews
。查看次数是我们正在更新的内容,因此我们想在 突变 希望成功后看到新的更新值。 id
将被我们的 Apollo 客户端 缓存使用,稍后我们将介绍前端实现时将详细阐述。
这个 突变 操作 应该看起来像这样:
mutation IncrementTrackViews($incrementTrackViewsId: ID!) {incrementTrackViews(id: $incrementTrackViewsId) {codesuccessmessagetrack {idnumberOfViews}}}
我们来运行它!
在右侧你可以看到我们预期的 字段: code
是 200,success
标志是 true
,message
表示成功,并返回我们新更新的 track
。
我们反复运行这个 突变 时,可以看到查看次数在增加!
code
、success
和 message
的值是从哪里来的?让我们看看当我们把incrementTrackViewsId
改为我们愚蠢的字符串"DOESNTEXIST"时,会发生什么。
{"incrementTrackViewsId": "DOESNTEXIST"}
当我们运行这个突变时,我们看到响应返回code
404,success
是false
,并且消息message
表示"找不到指定ID的跟踪"。跟踪track
也被设置为null
,没有可用数据。
code
和message
值的来源?我们的突变看起来很棒,它正在做它应该做的事情!现在,让我们跳转到客户端领域。
分享您对本课程的疑问和评论
您的反馈帮助我们改进!如果您遇到困难或困惑,请告诉我们,我们会帮助您。所有评论都是公开的,必须遵守 Apollo行为准则。请注意,已解决或处理的评论可能会被删除。
您需要GitHub账户才能发表以下评论。还没有吗? 请在我们的Odyssey论坛上发帖代替。