GraphQL 使用介绍

Stella981
• 阅读 551

GraphQL 使用介绍

GraphQL 是 Fackbook 的一个开源项目,它定义了一种查询语言,用于描述客户端与服务端交互时的数据模型和功能,相比 RESTful API 主要有以下特点:

  • 根据需要返回数据

  • 一个请求获取多个资源

  • 提供内省系统

这使得客户端的功能得到了加强,特别是在查询数据方面。

下面我们从使用的角度来介绍一下。

相关概念

在使用 GraphQL 之前,先介绍几个相关概念,便于理解使用。

  • Operations

GraphQL 服务提供的操作一般有:querymutationquery 可以理解为 RESTful API 中的 GET 的请求。mutation 可以理解为 RESTful API 中的 POSTPUTDELETE 之类的请求。

  • Types

定义了 GraphQL 服务支持的类型,例如:

type User {  id: ID  name: String}type Query {  user: User}

定义了 User 类型和包含的字段以及字段的类型;定义 Query 返回一个 User 类型的userQuery 也是一种类型。

  • Scalar types

标量类型。GraphQL 默认提供的标量类型有:Int、Float、String、Boolean、ID,也可以实现自定义的标量类型,如:Date。

标量类型有什么用呢?返回数据的字段必须是标量类型。例如我们想返回一个 user

query {  user // 报错}

上面这样是会报错的,因为 user 不是标量类型,需要改成

query {  user {    id    name  }}

指定返回 user 的 id 和 name,这两个字段都是标量类型,就可以正确返回了。

开始使用

如果看完上面的介绍,心中有很多疑问,没关系,我们现在以 GitHub GraphQL API 为例,来实际使用一下。打开 https://developer.github.com/v4/explorer/,然后登录,会看到一个这样的界面

GraphQL 使用介绍

这是 GraphQL 提供的开发工具 GraphiQL,可以检查 GraphQL 的语法,发送 GraphQL 的请求,还提供文档查询功能。在开始使用之前先介绍一下文档查询功能。点击右上角的 < Docs 并可以看到

GraphQL 使用介绍

上面的 ROOT TYPES 表示最顶层支持的类型,只有两个 QueryMutation。点击 Query,可以看到该类型包含的字段。仔细看,会发现这些字段的值又都是类型。

GraphQL 使用介绍

往下滚动,找到 user(login: String!): User,点击 User

GraphQL 使用介绍

终于找到一个标量类型的字段 bio: String,按照之前说法,我们是可以查询这个字段,写出如下的查询语言:

{  user {    bio  }}

准备执行时,会看到 user 下方有条红线,鼠标放上去

GraphQL 使用介绍

提示 user 必须指定一个 login 的参数,再回头看文档中该字段的描述 user(login: String!): User,是不是就可以理解了,(login: ) 表示该字段接受一个 login 参数,为 String 类型,! 表示是必须的。

将查询语言改成:

{  user(login: "booxood") {    bio  }}

再执行,并得到了我们预期指定的结果

{  "data": {    "user": {      "bio": "Happy coding & Happy life"    }  }}

现在是不是有点理解这种查询语言了。下面我们再以【 Gitalk:一个基于 Github Issue 和 Preact 开发的评论插件】中的两个需求为例

  • 展示某个 Issue 的评论和评论上的点赞数据

    query { repository(owner: "gitalk", name: "gitalk") { issue(number: 1) { comments(last: 10) { totalCount nodes { author { login avatarUrl } body reactions(first: 100, content: HEART) { totalCount viewerHasReacted } } } } }}

先通过 repository(owner: "gitalk", name: "gitalk") 找到 repository,再通过 issue(number: 1) 指定 issue,然后 comments(last: 10) 表示从后面取 10 条 comments,同时获取评论的 body 和 评论的 reactions(first: 100, content: HEART) 以及 reactions 的相关信息。

  • 添加或取消某个评论上的点赞

添加

mutation {  addReaction(input: {subjectId: "MDEyOklzc3VlQ29tbWVudDMxNTQxOTc2NQ==", content: HEART}) {    reaction {      content    }  }}

取消

mutation {  removeReaction(input: {subjectId: "MDEyOklzc3VlQ29tbWVudDMxNTQxOTc2NQ==", content: HEART}) {    reaction {      content    }  }}

之前的都是查询,这两个是 mutation,分别调用了 addReactionremoveReaction
可以在从文档的 ROOT TYPE 上选择 Mutation 查看支持的所有 mutation

以上主要介绍了 GraphQL 的基本使用,具体更多内容可以查看 GraphQL 提供的教程。

本文分享自微信公众号 - 凹凸实验室(AOTULabs)。
如有侵权,请联系 support@oschina.cn 删除。
本文参与“OSC源创计划”,欢迎正在阅读的你也加入,一起分享。

点赞
收藏
评论区
推荐文章
blmius blmius
2年前
MySQL:[Err] 1292 - Incorrect datetime value: ‘0000-00-00 00:00:00‘ for column ‘CREATE_TIME‘ at row 1
文章目录问题用navicat导入数据时,报错:原因这是因为当前的MySQL不支持datetime为0的情况。解决修改sql\mode:sql\mode:SQLMode定义了MySQL应支持的SQL语法、数据校验等,这样可以更容易地在不同的环境中使用MySQL。全局s
Wesley13 Wesley13
2年前
java将前端的json数组字符串转换为列表
记录下在前端通过ajax提交了一个json数组的字符串,在后端如何转换为列表。前端数据转化与请求varcontracts{id:'1',name:'yanggb合同1'},{id:'2',name:'yanggb合同2'},{id:'3',name:'yang
Jacquelyn38 Jacquelyn38
2年前
2020年前端实用代码段,为你的工作保驾护航
有空的时候,自己总结了几个代码段,在开发中也经常使用,谢谢。1、使用解构获取json数据let jsonData  id: 1,status: "OK",data: 'a', 'b';let  id, status, data: number   jsonData;console.log(id, status, number )
皕杰报表之UUID
​在我们用皕杰报表工具设计填报报表时,如何在新增行里自动增加id呢?能新增整数排序id吗?目前可以在新增行里自动增加id,但只能用uuid函数增加UUID编码,不能新增整数排序id。uuid函数说明:获取一个UUID,可以在填报表中用来创建数据ID语法:uuid()或uuid(sep)参数说明:sep布尔值,生成的uuid中是否包含分隔符'',缺省为
Stella981 Stella981
2年前
SpringBoot整合Redis乱码原因及解决方案
问题描述:springboot使用springdataredis存储数据时乱码rediskey/value出现\\xAC\\xED\\x00\\x05t\\x00\\x05问题分析:查看RedisTemplate类!(https://oscimg.oschina.net/oscnet/0a85565fa
Stella981 Stella981
2年前
Android So动态加载 优雅实现与原理分析
背景:漫品Android客户端集成适配转换功能(基于目标识别(So库35M)和人脸识别库(5M)),导致apk体积50M左右,为优化客户端体验,决定实现So文件动态加载.!(https://oscimg.oschina.net/oscnet/00d1ff90e4b34869664fef59e3ec3fdd20b.png)点击上方“蓝字”关注我
Easter79 Easter79
2年前
SpringBoot整合Redis乱码原因及解决方案
问题描述:springboot使用springdataredis存储数据时乱码rediskey/value出现\\xAC\\xED\\x00\\x05t\\x00\\x05问题分析:查看RedisTemplate类!(https://oscimg.oschina.net/oscnet/0a85565fa
Wesley13 Wesley13
2年前
MySQL部分从库上面因为大量的临时表tmp_table造成慢查询
背景描述Time:20190124T00:08:14.70572408:00User@Host:@Id:Schema:sentrymetaLast_errno:0Killed:0Query_time:0.315758Lock_
Python进阶者 Python进阶者
3个月前
Excel中这日期老是出来00:00:00,怎么用Pandas把这个去除
大家好,我是皮皮。一、前言前几天在Python白银交流群【上海新年人】问了一个Pandas数据筛选的问题。问题如下:这日期老是出来00:00:00,怎么把这个去除。二、实现过程后来【论草莓如何成为冻干莓】给了一个思路和代码如下:pd.toexcel之前把这
彭玘 彭玘
2星期前
React18+TS+NestJS+GraphQL 全栈开发在线教育平台
React18TSNestJSGraphQL全栈开发在线教育平台download》chaoxingit.com/163/GraphQL是一种由Facebook开发的查询语言和运行时环境,用于API的查询和操作。与传统的RESTfulAPI相比,Gra