graphql入门使用-构建查询

# 书接上回

在想接下来是先学习查询还是服务端开发时，我陷入了沉思。不想这个沉思持续了近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就能看到支持方法和参数。