项目中有功能要调用 API,对方 API 用的是 GraphQL 实现,就简单学了下,感叹技术进步真快,Facebook 发明的这玩意儿咋这么牛逼,使前端开发人员变得主动起来,想要什么接口、返回什么结果,可以自己通过查询构建,而不是以前被动接受 RESTful API 标准,不得不说是 API 的革命,GraphQL 的语法强大且灵活,IDE智能提示也很棒,入门容易、边学边用。

这里用三个实例演示 GraphQL 应用:

用户登录

接收参数:app_key、账户名、密码,参数通过变量赋值,登录成功返回用户基本信息和 Token
mutation 是根类型,UserLogin 是操作名称可省略,后面括号内是参数声明,Login 是字段对象相当于接口方法,后面括号内是参数赋值,大括号内是需要返回的对象结构和字段
在 GraphiQL 中编写查询字符串及调试(下图)

查询字符串

mutation UserLogin(
$app_key: String!,
$account: String!,
$password: String!) {
Login(app_key: $app_key, account: $account, password: $password) {
user_id
token
user_info {
user_account
user_name
user_nickname
user_email
mobile_number
user_balance(product_id: Enum1)
}
}
}

GraphQL Query String

变量

{
"app_key": "pxhd491b991k8q5",
"account": "test001",
"password": ""
}

GraphQL Variables

用户提交

接收各种参数,通过变量赋值,执行成功返回一个字符串,在 GraphiQL 中编写查询字符串及调试(下图)

用户尚未登录?因为接口要求登录成功后,以后的请求都要在 Header 中带上 Token,Edit HTTP Headers 即可

查询字符串

mutation SubmitBetting($game_id: Int!,
$game_type_id: Int!,
$game_cycle_id: Int!,
$bet_info: String!,
$bet_mode: BetModeEnum,
$bet_multiple: Int!,
$bet_percent_type: BetPercentTypeEnum!,
$is_follow: Boolean,
$follow_commission_percent: Int,
$follow_secret_type: Int
) {
AddLotteryOrder(
game_id: $game_id,
game_type_id: $game_type_id,
game_cycle_id: $game_cycle_id,
bet_info: $bet_info,
bet_mode: $bet_mode,
bet_multiple: $bet_multiple,
bet_percent_type: $bet_percent_type,
is_follow: $is_follow,
follow_commission_percent: $follow_commission_percent,
follow_secret_type: $follow_secret_type)
}

GraphQL Query String

变量

{
"game_id":,
"game_type_id":,
"game_cycle_id": ,
"bet_info": "",
"bet_mode": "TwoYuan",
"bet_multiple": ,
"bet_percent_type": "NoPercentType",
"is_follow": false,
"follow_commission_percent": ,
"follow_secret_type":
}

GraphQL Variables

活动列表

接收一个条件对象 input,成功返回记录列表,根类型是 query 可省略,在 GraphiQL 中编写查询字符串及调试(下图)

查询字符串,这个接口只有整形和布尔型查询参数,我就没使用变量(如果是字符串参数最好使用变量,因为参数值中含有引号,会引起查询字符串语法错误,甚至注入风险)。

{
ActivityList(input: {is_show_menu: True, page: , rows_of_page: }) {
record {
id
title
content
web_title_img_url
app_title_img_url
web_menu_img_url
app_menu_img_url
}
}
}

GraphQL Query String

通过 HTTP 提供服务

传递三个参数分别是:

query:查询文档,必填,我们之前在 GraphiQL 中已调试好。
variables:变量,选填,键值对集合。
operationName:操作名称,选填,查询文档有多个操作时必填。

GET的话,放在 URL 参数中,格式:
?query=查询语句&operationName=操作名称&variables=变量集合

POST的话,首先在 Header 中声明 Content-Type: application/json,正文 JSON 片段:
{
  "query": "{viewer{name}}",             //查询字符串
  "operationName": "",                      //操作名称,选填,查询文档有多个操作时必填
  "variables": { "name": "value", ... }  //对象集合,选填
}

下面截图是在 Postman 中调试接口

看上去没问题,可以将HTTP请求封装,放进项目中

我只学了些皮毛,当然一般的项目也不会用太复杂的语法,以后有机会再学学服务端的配置。

边学边做,简单的 GraphQL 实例的更多相关文章

  1. 从零开始单排学设计模式「简单工厂设计模式」黑铁 III

    阅读本文大概需要 2 分钟. 本篇是设计模式系列的第二篇,虽然之前也写过相应的文章,但是因为种种原因后来断掉了,而且发现之前写的内容也很渣,不够系统.所以现在打算重写,加上距离现在也有一段时间了,也算 ...

  2. 最简单的struts实例介绍

    struts2环境配置   struts2框架,大多数框架都在使用.由于工作需要,开始做Java项目.先学个struts2. 一.下载struts2 有好多版本,我下载的是struts-2.2.1.1 ...

  3. 1101: 零起点学算法08——简单的输入和计算(a+b)

    1101: 零起点学算法08--简单的输入和计算(a+b) Time Limit: 1 Sec  Memory Limit: 128 MB   64bit IO Format: %lldSubmitt ...

  4. 使用ssm(spring+springMVC+mybatis)创建一个简单的查询实例(二)(代码篇)

    这篇是上一篇的延续: 用ssm(spring+springMVC+mybatis)创建一个简单的查询实例(一) 源代码在github上可以下载,地址:https://github.com/guoxia ...

  5. 使用ssm(spring+springMVC+mybatis)创建一个简单的查询实例(一)

    梳理下使用spring+springMVC+mybatis 整合后的一个简单实例:输入用户的 ID,之后显示用户的信息(此次由于篇幅问题,会分几次进行说明,此次是工程的创建,逆向生成文件以及这个简单查 ...

  6. Qt5.9一个简单的多线程实例(类QThread)(第一种方法)

    Qt开启多线程,主要用到类QThread.有两种方法,第一种用一个类继承QThread,然后重新改写虚函数run().当要开启新线程时,只需要实例该类,然后调用函数start(),就可以开启一条多线程 ...

  7. Java用户输入数值,做简单的猜数字游戏,导入基础的工具包util

    Java用户输入数值,做简单的猜数字游戏,导入基础的工具包util,导入包的方法为,import java.util.*: 完整的实例代码: /* 导入基础工具包 */ import java.uti ...

  8. 简单是Jedis实例(相对连接池而言)

    在引入相关jar包后,只要new一个Jedis对象,就能做redis相关操作了.以下是一个简单的jedis实例: package com.pptv.redis; import java.util.Ar ...

  9. grpc使用记录(三)简单异步服务实例

    目录 grpc使用记录(三)简单异步服务实例 1.编写proto文件,定义服务 2.编译proto文件,生成代码 3.编写服务端代码 async_service.cpp async_service2. ...

随机推荐

  1. docker安装nginx和php

    参考文章:https://www.cnblogs.com/boundless-sky/p/7182410.html 1.下载镜像docker pull nginxdocker pull php:7.2 ...

  2. Dual Attention Network for Scene Segmentation

    Dual Attention Network for Scene Segmentation 原始文档 https://www.yuque.com/lart/papers/onk4sn 在本文中,我们通 ...

  3. P2024 食物链

    题面:P2024 食物链 emmm其实不太难想 开三倍的数组 1~n:是当前动物的同类 n~2*n:是当前动物吃的动物 2*n~3*n:是吃当前动物的动物 emmmm #include<iost ...

  4. ----regular expression in js----

    正则表达式:Regular Expression,在代码中常简写为regex.regexp或RE)使用单个字符串来描述.匹配一系列符合某个句法规则的字符串搜索模式. 搜索模式可用于文本搜索和文本替换. ...

  5. 【JAVA】学习笔记(2)

    Java完整的类的定义 [pubilc][abstact|final] class className [extends superclassName] [implements InterfaceNa ...

  6. qq通讯录

  7. P2634 [国家集训队]聪聪可可

    淀粉质 第二道点分治的题 关于点分治的一点理解: 所谓点分治,其实就是把要求的问题(一般与路径有关)划分成两种情况 1.路径经过rt(根节点) 2.路径在根节点的子树内 我们只需要处理情况1,因为情况 ...

  8. Xcode安装CocoaPods

    1.虽然Mac自带Ruby但是安装cocoapods需要gem,gem是一个管理Ruby库和程序的标准包,它通过RubyGem源来查找.安装.升级和卸载软件包.因为gem默认的服务器被墙,因此在安装之 ...

  9. 初识大数据(三. Hadoop与MPP数据仓库)

    MPP代表大规模并行处理,这是网格计算中所有单独节点参与协调计算的方法. 是将任务并行的分散到多个服务器和节点上,在每个节点上计算完成后,将各自部分的结果汇总在一起得到最终的结果. MPP DBMS是 ...

  10. UWP关于图片缓存的那些破事儿

    看似简单的功能,实施起来却是有着一堆大坑. 按着基本功能来写吧 1.选择图片并显示到Image控件中 2.图片序列化为byte数组以及反序列化 3.本地存储与读取 1.选择图片: 逻辑就是使用File ...