GraphQL 查询语言与 Mutation 变更操作完整教程
GraphQL 究竟是什么？简单来说，它是一种专为 API 设计的查询语言与运行时环境，能够高效地基于现有数据完成各类查询操作。它对 API 中的数据提供了完整而清晰的描述，让客户端可以精确地请求“我需要什么”，而不是被动接收整个数据包。更重要的是，它大幅简化了 API 的迭代演进——你不再需要频繁修改接口版本，同时它也催生了大量强大的开发者工具。
GraphQL 核心操作指令
作为一套高效的开发手段，GraphQL 提供了内置指令，让数据操作更加简洁直观。以下两个指令最为常用：
- query：查询操作
- mutation：变更操作
query 查询指令
借助 GraphQL 的 query 指令，你可以只获取所需的数据。没错，就是这么灵活——它显著降低了查询返回的数据量，从而提升了查询速度。这在传统的 RESTful 接口中很难实现。
举个具体例子。假设我们在开发一个图书管理系统，需要查询图书列表，query 语句可以这样编写：
query getBooks {books {id,name,page}}
这里的含义非常清晰：
- query——执行的操作，即查询
- getBooks——你自定义的函数名称
- books——后端定义好的数据接口
- id, name, page——你想要返回的字段
这个查询会返回什么数据？下面的结果很说明问题：你看，它只返回了你指定的字段，不会附带任何无关信息。降低数据量、提升查询效率——这才是 GraphQL 的精髓所在。
{"data": {"books": [{"id": "123","name": "ja vascript","page": 500},{"id": "125","name": "vuejs","page": 600}]}}
前面提到，getBooks 是一个函数名称。既然是函数，就可以传递参数。如何传递？GraphQL 通过 variables 字段来实现。
比如我想查询 id 为 123 的那本书，query 可以这样写：
query getBook($id: ID!){book(id: $id) {id,name,page}}
注意，这里需要传入一个 ID 参数才能获取对应的书籍，因此还要配合 variables：
{"id": "123"}
这样，返回的数据就是你要的那一本：
{"data": {"id": "123","name": "ja vascript","page": 500}}
mutation 变更指令
mutation 指令专门用于修改数据。继续使用前面的例子：将 id 为 123 的那本书的 page 从 500 改为 550。
mutation 的写法如下：
mutation editBook($id: id!,$page: page!) {editBook(id: $id,page: $page) {id,name,page}}
variables 填入对应的值：
{"id": "123","page": 550}
修改完成后，它会返回修改后的数据，方便你核对结果：
{"data": {"id": "123","name": "ja vascript","page": 550}}
使用 Apifox 调试 GraphQL mutation
理论讲完了，接下来看看如何借助 Apifox 工具进行实际调试。
查询列表
先用 Apifox 查询现有的 books 列表。在请求中填写 query 参数和 variables 参数，就能看到当前数据。你看，返回的 page 是 500：
将这个请求保存为接口用例。
然后同样保存为接口用例。
关于 Apifox
Apifox 是一个一体化 API 协作平台，将 API 文档、调试、Mock 和自动化测试集成于一身。它在统一界面上完成设计、调试、测试和协作，消除了以往在多个工具间切换、数据不一致的烦恼。可以说，它简化了整个 API 工作流，让前端、后端和测试人员之间的协作更加高效顺畅。
