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

认识 GraphQL

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

知识扩展:GraphQL 和 REST 对比

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 请求,使用它去发起请求,并调试。

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

查询

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

带参查询

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

  • query
  • variables

知识扩展:

了解更多关于 GraphQL 知识。

全部评论

相关推荐

点赞 评论 收藏
分享
1. 事件概述3月10日下午,华为在“心声社区”发布长达6500字通报,曝光72名正式员工及19名非雇员在非雇员招聘中存在徇私舞弊行为,多人出卖公司信息资产获利,引发热议。- “非雇员”一般指华为OD员工,与人力服务公司签劳动合同,以派遣方式到华为工作,薪资待遇与华为内部员工基本一致,可通过考核转正。2. 相关传言与真相华为相关人士称暂无官方回应,很多传言细节不准确。 华为成都研究所员工透露,此次通报主要涉及成都研究所的数据存储部门,整个数据存储业务约100余人,此次明文通报除名辞退或通报批评的有62名,“很多部门基本全开除” 。网传任正非亲赴成都、封楼抓人等消息不实。早在2024年年中,就有...
七安有出处嘛:省流:任正非亲赴成都等消息不实,2024 年年中就有人举报了;涉及36名违规当事人,其中有13人被除名;10人有主动申报情节或情节较严重的,予以辞退处理;另有13人被劝退、个人职级降3等。另外还有26名相关管理责任人作为直接或间接管理者,被处以个人职级降6等,冻结个人涨薪、职级晋升、干部向上任命,冻结期6—12个月不等;若下属违规偶发,则仅通报批评。并没有释放100HC😂😂😂
点赞 评论 收藏
分享
评论
点赞
收藏
分享

创作者周榜

更多
牛客网
牛客企业服务