从零开始学习 GraphQL：入门指南和教程

曾经终败给现在 2024-03-23 13:19 20阅读 0赞

### **认识 GraphQL** ###

前段时间，**[GraphQL][]** 出现并掀起了一阵热潮。但是 GraphQL 跟 REST 是两种不同的东西，所以也需要一定的学习成本，导致大部分人都没有选择去学习它，今天就带大家简单过一遍 GraphQL 吧，希望大家能有所收获。

知识扩展：**[GraphQL 和 REST 对比][GraphQL _ REST]**

![49f1bc25d3ec6301c7976da9d1d84d3e.png][]

#### **GraphQL 好在哪？** ####

首先来说说 GraphQL 到底好在哪：

*  GraphQL 速度快并且稳定
 *  GraphQL 可以获取更多的资源
 *  GraphQL 是单端点查询
 *  GraphQL 的可持续性非常出色
 *  GraphQL 具有向下兼容的特性

#### **GraphQL 使用场景** ####

GraphQL 的按需查询非常实用，试想一下，你们在开发一个非常大型的网站的时候，一个首页就得请求很多个接口了，比如：

*  轮播图接口
 *  Tag 接口
 *  List 接口

在上面的例子里，一个首页就得请求三个以上的接口了，浏览器并发数太多的话，会大大影响用户的使用体验。

那如果使用 GraphQL 去查询呢，就只需要一个接口就完事了，也就是一个请求就可以查询很多个请求所需要的数据，那自然减少了并发数。

### **GraphQL 教程** ###

GraphQL 其实不难，无非就是传个不同的 query语句 到后端，接收不同的 JSON 罢了。

#### **query 查询** ####

比如我现在要设计一个学生管理平台，我想查询学生列表，我应该传什么参数呢？

分析一下上面的语句：

*  query：操作类型
 *  getStudents：操作函数名
 *  students：是后端定义好的接口
 *  id,name,age：指的是我们需要查询的字段

这样查询，返回的数据为：

观察上面的数据，使我们想要的数据，并且只返回我们需要查询的字段。

#### **传参查询** ####

我们刚刚说了 getStudents 是 函数名，那既然是函数，肯定是可以传参的，比如，我们只需要查询 id 为 1 的学生，我们可以这么传：

**query**

**variables**

这样就能查到我们想要的数据了。

#### **mutation 修改** ####

前面讲的是 query 语句，我们试一下 mutation 语句，他可以对数据进行修改、新增。

比如我们想要新增一个学生，我们可以这么写：

### 调试 GraphQL 接口步骤 ###

我们写完 GraphQL 接口之后，我们需要使用 API 工具对 GraphQL 接口进行调试。

#### **新建 GraphQL 请求** ####

我们需要先在 [Apifox][] 里新建一个 GraphQL 请求，使用它去发起请求，并调试。

![2060cccc513fe02610cb69c55a2f5a00.png][]

然后点击 保存 按钮，完成创建。

#### **查询** ####

我们先查出所有的学生，我们需要跳到 运行 页面，并选择对应的 Body 类型，填写 query 语句，然后点击 发送 按钮，得到查询结果，符合我们的预期。

![6e42bbfd5f7e446db433ddbd4dc8a0b1.png][]

#### **带参查询** ####

接着我们可以进行 带参查询，需要同时配置：

*  query
 *  variables

![f92319039b8629248d8612c3c734c36a.png][]

### 知识扩展： ###

了解更多关于 GraphQL 知识。

*  **[GraphQL 有什么优点和缺点][GraphQL 1]**
 *  **[API 开发：gRPC vs GraphQL - 如何选择更适合你的开发方案][API _gRPC vs GraphQL -]**

[GraphQL]: https://apifox.com/apiskills/graphql/
[GraphQL _ REST]: https://apifox.com/apiskills/graphql-vs-rest/
[49f1bc25d3ec6301c7976da9d1d84d3e.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/23/1d978f56fe5b4fceb08833fa6c693209.png
[Apifox]: https://apifox.com/
[2060cccc513fe02610cb69c55a2f5a00.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/23/6817a3ef684d44049bcd46f665ed8a17.png
[6e42bbfd5f7e446db433ddbd4dc8a0b1.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/23/9988055703634067b3cceb053a3df23c.png
[f92319039b8629248d8612c3c734c36a.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/23/a540f64125544a4887b9157653330172.png
[GraphQL 1]: https://apifox.com/apiskills/graphql-pros-and-cons/
[API _gRPC vs GraphQL -]: https://apifox.com/apiskills/api-development-grpc-vs-graphql/