书接上回
在想接下来是先学习查询还是服务端开发时,我陷入了沉思。不想这个沉思持续了近5个月,本以为无法结束时,却在金秋十月迎来了转机。
我发现更好的方式是两者结合在一起:先写个服务端graphql接口,再写个该接口的查询。
ok,开始吧。
环境准备
服务端
服务端使用js来写,使用的web框架是express,用到了express-graphql和graphql。
为了便于调试,我们使用nodemon来运行。
服务端的参考代码:https://github.com/warshipJian/express-graphql。
可以将该代码clone到本地来调试验证。
客户端
客户端我们使用一个图形界面的:Altair GraphQL Client。
https://altair.sirmuel.design/
graphql的操作和基本类型
graphql操作
graphql的操作分两种: Query 和 Mutation。 Query是查询,Mutation是变更,类似于HTTP请求中的GET和POST。
我们要获取数据时,使用Query操作,需写graphql中相关的Query语句。如果想对数据做修改,则需要写对应的Mutation语句。
graphql基本类型
graphql的基本类型有String
、Int
、Float
、Boolean
、ID
。
graphql也支持列表,列表用方括号表示,使用方括号将基础类型括起来,比如[String]
graphql用!
标记某个类型不能为空,比如使用Int!
定义参数时表示该参数为整形,且必传。
来个示例
我们来写个掷骰子的接口,这个接口支持两个参数:一个是掷骰子的次数,一个是骰子的面数。
之后我们使用graphql的客户端验证这个接口。
服务端
打开参考代码,我们来看下。
server.js是整个框架的入口文件,里面加载了graphql所需的schema和对应方法
var schema = require('./schema/schema');
var root = require('./schema/root');
在./schema/schema
中有个掷骰子的定义:
rollDice(numDice: Int!, numSides: Int): [Int]
这里表示有个rollDice
方法,需传2个参数:骰子次数numDice
和骰子面数numSides
,这两个参数都是整形,
且numDice
参数为必传参数。
在./schema/root
中就有掷骰子的具体实现了:
rollDice: ({numDice, numSides}) => {
var output = [];
for (var i = 0; i < numDice; i++) {
output.push(1 + Math.floor(Math.random() * (numSides || 6)));
}
return output;
}
在终端执行如下命令:
npm run dev
如果一切正常,会看到如下提示:
> express-graphql@1.0.0 dev /Users/day/github/express-graphql
> nodemon server.js
[nodemon] 2.0.13
[nodemon] to restart at any time, enter `rs`
[nodemon] watching path(s): *.*
[nodemon] watching extensions: js,mjs,json
[nodemon] starting `node server.js`
Running a GraphQL API server at http://localhost:4000/graphql
客户端
打开Altair GraphQL Client客户端,在地址栏输入:http://localhost:4000/graphql。
在Query中输入我们的查询语句。比如我想掷2次骰子,这个骰子是6面的:
query{
rollDice(numDice: 2, numSides: 6)
}
点击Send Request,请求成功后我们就能看到结果了:
在实际使用中我们的参数会是一个变量,而不是固定的值,语句如下:
query RollDice($dice: Int!, $sides: Int) {
rollDice(numDice: $dice, numSides: $sides)
}
这里我们使用了两个变量:$dice
和 $sides
。点击界面左下角的VARIABLES,填入对应的变量和值:
{
"dice": 2,
"sides": 6
}
点击Send Request查看结果。
小结
我们在服务端写好相关的graphql schema后,客户端可以按自己的需求编写对应的query语句来获取结果。
图形化的客户端会自动拉取接口支持的参数,并展示出来。这个有时候挺方便的,我们不需要另外再去写一份接口参数文档。
比如Altair GraphQL Client, 点击Send Request旁边的Docs
就能看到支持方法和参数。