Graphql简述

最近在和好友聊天的过程中，突然感觉自己真的是个弟弟奥
聊天过程中提到了一个尴尬的瞬间

WechatIMG216.png

哎，进入正题吧
首先介绍下什么是Graphql？

根据官网的解释就是一种用于 API 的查询语言    
ask exactly what you want.

那我们为什么需要使用Graphql 呢？

1、兼容多平台导致字段冗余
2、一个页面需要多次调用 API 聚合数据
3、需求经常改动导致接口很难为单一接口精简逻辑

下面我们通过一个简单的demo来稍微了解下Graphql吧~

1、新建一个graphql文件夹，然后在该目录下打开终端，执行npm init --y初始化一个packjson文件。
2、安装依赖包：npm install --save -D express express-graphql graphql
3、新建sehema.js文件，填上下面的代码

代码如下：

WX20191112-142301.png

然后同级目录下新建server.js 代码如下：

WX20191112-142601.png

这部分代码是用express跑起来一个服务器，并通过express-graphql把graphql挂载到服务器上。
运行一下node server，并打开 http://localhost:8000/

WechatIMG212.png

如果我想每次查询都想带上一个参数该怎么办，如果我想查询结果有多条数据又怎么处理？
我们新增一个sehemaSuper.js文件
代码如下

const {
    GraphQLSchema,
    GraphQLObjectType,
    GraphQLString,
    GraphQLInt,
    GraphQLBoolean
} = require('graphql');
//稍微复杂一点的  查询取数据带参数的写法 多条数据
const queryObj = new GraphQLObjectType({
    name: 'myFirstQuery',
    description: 'a hello world demo',
    fields: {
        hello: {
            name: 'a hello world query',
            description: 'a hello world demo',
            type: GraphQLString,
            args: {
                name: {
                    // 这里定义参数，包括参数类型和默认值
                    type: GraphQLString,
                    defaultValue: 'Brian'
                }
            },
            resolve(parentValue, args, request) {
                // 这里演示如何获取参数，以及处理
                return 'hello world ' + args.name + '!';
            }
        },
        person: {
            name: 'personQuery',
            description: 'query a person',
            type: new GraphQLObjectType({
                // 这里定义查询结果包含name,age,sex三个字段，并且都是不同的类型。
                name: 'person',
                fields: {
                    name: {
                        type: GraphQLString
                    },
                    age: {
                        type: GraphQLInt
                    },
                    sex: {
                        type: GraphQLBoolean
                    }
                }
            }),
            args: {
                name: {
                    type: GraphQLString,
                    defaultValue: 'Charming'
                }
            },
            resolve(parentValue, args, request) {
                return {
                    name: args.name,
                    age: args.name.length,
                    sex: Math.random() > 0.5
                };
            }
        }
    }
});

module.exports = new GraphQLSchema({
    query: queryObj
});

然后在左侧输入 :

 hello(name:"zhaoxiang"),

WechatIMG214.png

然后在试试多参数的:

{
  hello(name:"charming"),
  person(name:"charming"){
    name,
    sex,
    age
  }
}

WechatIMG215.png

如果只传sex和age字段的话：

WX20191112-171930.png

哎 目前今天就掌握了这些 ，后续如果在项目中应用的话，我在记录吧