GraphQL下一代API标准

GrapthQL介绍

• GraphQL是Facebook开发的一种数据查询语言，于2015年发布。
• GraphQL是RESTful的升级版
• GraphQL是用api（ajax请求）进行数据库查询数据的玩意。

特点

• 请求自己想要的数据字段
• 多个资源，只用一次请求
• 便于维护api

使用express与GraphQL开发一个HelloWorld

let express = require('express');
let graphqlHTTP =  require('express-graphql');//构建graphql的中间件
let {buildSchema} = require('graphql');//核心库

let schema = buildSchema(`
    type UserType{
        name:String
        age:Int
    }
    type Query{
        hello:String
        name:String
        user:UserType
    }
`);//定义查询格式和类型

let rootValue = {
    hello:() => {
        return 'Hello World';//必须与hello的返回类型一样
    },
    name(){
        return 'lh'
    },
    user(){
        return {
            name:'lh',
            age:21
        }
    }
};


let app = express();
app.listen(8000);

app.use('/graphql', graphqlHTTP(
    {
        schema,
        rootValue,
        graphiql:true//是否显示开发界面，生产时建议不要为true
    }
));

参数类型与参数传递

类型

• String：字符串
• Int：整型
• Float：小数
• Boolean：布尔
• ID：id类型不重复字符串
• [类型]：数组类型

说明:类型可以自己定义

参数传递

...
let schema = buildSchema(`type Query {
    getUserName(id:String!):String
}`);
/*
    type Query为入口
    getUserName 通过id获取用户名
    并且id是字符型，并且不为空
*/
let rootValue = {
    getUserName({id}){
        let db = {
            1:'zhangs',
            2:'lis'
        };
        return db[id];
    }
}
...

浏览器中使用

fetch('/graphql', {
    method: "POST",
    headers: {
        'Content-Type': 'application/json',
        'Accept': 'application/json'
    },
    body: JSON.stringify({
        query: `
            query GetUserName($id:String!){  //声明变量
                getUserName(id:$id)  //使用变量
            }
        `,
        variables: {
            id:"1" //变量赋值
        }
    })
}).then(res => {
    console.log(res);
    
    return res.json()}).then(json=>{
    console.log(json);
    
});

输入数据

...
let schema = buildSchema(`
input UserInput{
    name:String
    age:String
}

type User{
    name:String
    age:String
}

type Mutation{
    createUser(input:UserInput):User
    updateUser(id:ID!,input:UserInput):User
}

type Query {
    getUsers:[Users]
}`);
/*
    type Query为入口
*/
let db = {};
let rootValue = {
    createUser({input}){
        db[input.name] = input;
        return db[input.name];
    },
    updateUser({id,input}){
        Object.assign(db[id],db[id],input);
        return db[id];
    },
    getUsers(){
        let arr = [];
        for(const key in db){
            arr.push(db[key]);
        }
        return arr;
    }
}
...