项目中有功能要调用 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. boost中bind的使用

    :first-child { margin-top: 0px; } .markdown-preview:not([data-use-github-style]) h1, .markdown-previ ...

  2. yarn查询/cluster/nodes均返回localhost

    背景: 1.已禁用ipv6. 2.所有节点的/etc/hosts正确配置,任务在ResourceManager提交. 3.yarn-site.xml中指定了 yarn.resourcemanager. ...

  3. 【Mybatis】MyBatis之表的关联查询(五)

    本章介绍Mybatis之表的关联查询 一对一关联 查询员工信息以及员工的部门信息 1.准备表employee员工表,department部门表 CREATE TABLE `employee` ( `i ...

  4. 使用git提交项目到码云

    1.下载git客户端工具(.exe) 点击安装 2.找到你存放项目的根目录(例如:e:/gittest) 3.在该根目录下,右键,选择“Git Bash Here” 4.出现命令行,输入初始化命令: ...

  5. 修改dll的错误打开方式

    一不小心把dll类型的文件的打开方式改成了notepad,查了好多资料因为dll没有打开程序所以怎么也改不回来,只好从注册表中查,经检验修改注册表的以下项目可以改回 计算机\HKEY_CURRENT_ ...

  6. 关于U3D的.SDK对接

    1,SDK对接原理:https://www.cnblogs.com/msxh/p/7220741.html 2,Unity ADS对接:https://blog.csdn.net/chenluwolf ...

  7. oracle 中如何查看某个表所涉及的存储过程

    SELECT DISTINCT * FROM user_source WHERE TYPE = 'PROCEDURE' AND upper(text) LIKE '%PS_KL_ABS_002_DAT ...

  8. beego笔记

    beego学习笔记一:创建第一个beego Web项目 Go语言beego框架快速搭建体验五分钟讲解01 beego框架图文简介五分钟讲解02 beego框架图文简介五分钟讲解03-go语言简单方式操 ...

  9. 关于Idea里设置Terminal为Git/bin/bash.exe中文乱码的问题的终极解决方案

    1.这里如果设置为Git/git-bash.exe确实不会乱码,但是每次点Idea里的Terminal都会弹出一个单独的terminal窗口而非在idea子窗口里出现: 2.因此需要设置为Git/bi ...

  10. Jquery动态添加/删除表格行和列

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...