认识 GraphQL 前段时间, GraphQL 出现并掀起了一阵热潮。但是 GraphQL 跟 REST 是两种不同的东西,所以也需要一定的学习成本,导致大部分人都没有选择去学习" />

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

编辑: admin 分类: 电脑知识 发布时间: 2023-06-14 来源:互联网
认识 GraphQL" class="reference-link">认识 GraphQL

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

知识扩展:GraphQL 和 REST 对比

GraphQL 好在哪?" class="reference-link">GraphQL 好在哪?

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

  • GraphQL 速度快并且稳定
  • GraphQL 可以获取更多的资源
  • GraphQL 是单端点查询
  • GraphQL 的可持续性非常出色
  • GraphQL 具有向下兼容的特性
GraphQL 使用场景" class="reference-link">GraphQL 使用场景

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

  • 轮播图接口
  • Tag 接口
  • List 接口

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

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

GraphQL 教程" class="reference-link">GraphQL 教程

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

query 查询" class="reference-link">query 查询

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

分析一下上面的语句:

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

这样查询,返回的数据为:

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

传参查询" class="reference-link">传参查询

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

query

variables

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

mutation 修改" class="reference-link">mutation 修改

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

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

调试 GraphQL 接口步骤

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

新建 GraphQL 请求" class="reference-link">新建 GraphQL 请求

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

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

查询" class="reference-link">查询

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

带参查询" class="reference-link">带参查询

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

  • query
  • variables

知识扩展:

了解更多关于 GraphQL 知识。

  • GraphQL 有什么优点和缺点
  • API 开发:gRPC vs GraphQL - 如何选择更适合你的开发方案
【感谢龙石为本站提供数据共享交换平台 http://www.longshidata.com/pages/exchange.html】