Graphql 简单样例

1.搭建简单的开发环境

　　1.1执行 node init

　　1.2执行 cnpm i --save-dev express exppress-graphql graphql lodash

2.创建server.js 、data.js 和 graphql/schema.js 文件

3.server.js代码

const express = require('express');
const expressGraphql = require('express-graphql');
const { graphql, buildSchema } = require("graphql");

const app = express();

const schema = require('./graphql/schema');

app.use('/graphql', expressGraphql({
    schema,
    graphiql: true    
}));

app.get('/', (req, res) => res.end('index'));

app.listen(8000, (err) => {
    if (err) { throw new Error(err); }
    console.log('8000 server started.');
});

4.data.js 代码

var userList = [{
        id: 1,
        name: 'hu.hu',
        firstName: 'hu',
        lastName: 'hu',
        roleId: 1,
        createDate: "2018-11-15 14:32:43",
        employee: [2]
    },
    {
        id: 2,
        name: 'ko.ko',
        firstName: 'ko',
        lastName: 'ko',
        roleId: 2,
        createDate: "2018-8-15 14:32:43",
        leader: 1
    },
    {
        id: 3,
        name: 'RE.fg',
        firstName: 'RE',
        lastName: 'fg',
        roleId: 1,
        createDate: "2018-7-15 14:32:43",
        employee: [3]
    },
    {
        id: 4,
        name: 'GF.ds',
        firstName: 'GF',
        lastName: 'ds',
        roleId: 2,
        leader: 3,
        createDate: "2018-7-12 14:32:43"
    },
    {
        id: 5,
        name: 'AS.wd',
        firstName: 'AS',
        lastName: 'wd',
        roleId: 1,
        createDate: "2018-3-15 14:32:43",
        employee: []
    }
];

module.exports = userList;

5. schema.js 代码

var userData = require("../data");
var _ = require('lodash');

var {
    GraphQLObjectType,
    GraphQLInt,
    GraphQLString,
    GraphQLEnumType,
    GraphQLList,
    GraphQLSchema,
    GraphQLNonNull,
    GraphQLScalarType,
    GraphQLInterfaceType,
    GraphQLUnionType,
    GraphQLInputObjectType,

} = require('graphql');

let GraphQLDate = new GraphQLScalarType({
    name: 'Date',
    serialize: (value) => {
        console.log('save：', value);
        return new Date(value); // value sent to the client
    },
    parseValue: (value) => {
        console.log('send', value);
        return new Date(value); // value from the client
    },
    parseLiteral: (ast) => {
        console.log("ast:", ast); // check type
        try {
            if (ast.kind == "StringValue") {
                return new Date(ast.value);
            }
            return null;
        } catch (err) {
            return null;
        }
    }
});


let Role = new GraphQLEnumType({
    name: 'Role',
    values: {
        "Admin": {
            value: 1
        },
        "Normal": {
            value: 2
        }
    }
});

let userModel = new GraphQLInterfaceType({
    name: 'UserModel',
    fields: {
        id: {
            type: GraphQLInt
        },
        name: {
            type: GraphQLString
        },
        firstName: {
            type: GraphQLString
        },
        lastName: {
            type: GraphQLString
        },
        roleId: {
            type: Role
        },
        createDate: {
            type: GraphQLDate
        }
    },
    resolveType: (value) => {
        if (value.employee) {
            return adminUser;
        }
        if (value.leader) {
            return normalUser;
        }
    }
});

let adminUser = new GraphQLObjectType({
    name: "AdminUser",
    interfaces: [userModel],
    fields: {
        id: {
            type: GraphQLInt
        },
        name: {
            type: GraphQLString
        },
        firstName: {
            type: GraphQLString
        },
        lastName: {
            type: GraphQLString
        },
        roleId: {
            type: Role
        },
        createDate: {
            type: GraphQLDate
        },
        employee: {
            type: new GraphQLList(GraphQLInt)
        }
    },
    isTypeOf: (obj) => {
        return obj.employee;
    }
});

let normalUser = new GraphQLObjectType({
    name: "NormalUser",
    interfaces: [userModel],
    fields: {
        id: {
            type: GraphQLInt
        },
        name: {
            type: GraphQLString
        },
        firstName: {
            type: GraphQLString
        },
        lastName: {
            type: GraphQLString
        },
        roleId: {
            type: Role
        },
        createDate: {
            type: GraphQLDate
        },
        leader: {
            type: GraphQLInt
        }
    },
    isTypeOf: (obj) => {
        return obj.leader;
    }

});

let userUnion = new GraphQLUnionType({
    name: "UserUnion",
    types: [adminUser, normalUser],
    resolveType: (value) => {
        if (value.employee) {
            return adminUser;
        }
        if (value.leader) {
            return normalUser;
        }
    }
});

let userQueryInput = new GraphQLInputObjectType({
    name: "UserQueryInput",
    fields: {
        id: {
            type: GraphQLInt
        },
        name: {
            type: GraphQLString
        }
    }
});

let userQuery = new GraphQLObjectType({
    name: 'UserQuery',
    fields: {
        userList: {
            type: new GraphQLList(userModel),
            args: {
                userQuery: {
                    type: userQueryInput
                }
            },
            resolve: (source, args, context, info) => {
                let result = (_.filter(userData, (x) => {
                    return args.userQuery && args.userQuery.name ? x.name === args.userQuery.name : true
                }));
                return result;
            }
        },
        user: {
            type: userUnion,
            args: {
                id: {
                    type: new GraphQLNonNull(GraphQLInt)
                }
            },
            resolve: (source, args, context, info) => {
                let result = _.first(_.filter(userData, (x) => { return x.id === args.id }));
                return result;
            }
        }
    }
});

let addUserInput = new GraphQLInputObjectType({
    name: "AddUserInput",
    fields: {
        name: {
            type: new GraphQLNonNull(GraphQLString)
        },
        firstName: {
            type: GraphQLString
        },
        lastName: {
            type: GraphQLString
        },
        roleId: {
            type: new GraphQLNonNull(GraphQLInt)
        }
    }
});

let updateUserInput = new GraphQLInputObjectType({
    name: "UpdateUserInput",
    fields: {
        id: {
            type: new GraphQLNonNull(GraphQLInt)
        },
        name: {
            type: new GraphQLNonNull(GraphQLString)
        },
        createDate: {
            type: GraphQLDate
        }
    }
});

let userMutation = new GraphQLObjectType({
    name: "UserMutation",
    fields: {
        addUser: {
            type: userUnion,
            args: {
                addModel: { type: addUserInput }
            },
            resolve: (source, args, context) => {
                var names = _.split(args.addModel.name, '.');
                let newUser = {
                    id: userData.length + 1,
                    name: args.addModel.name,
                    roleId: args.addModel.roleId,
                    firstName: args.addModel.firstName ? args.addModel.firstName : _.first(names),
                    lastName: args.addModel.lastName ? args.addModel.lastName : _.last(names),
                    createDate: new Date(),
                }
                if (args.addModel.roleId == 1) {
                    newUser.employee = [];
                } else {
                    newUser.leader = 1;
                }
                userData.push(newUser);
                return newUser;
            }
        },
        removeUser: {
            type: GraphQLInt,
            args: {
                id: {
                    type: new GraphQLNonNull(GraphQLInt)
                }
            },
            resolve: (source, args, context) => {
                userData = _.filter(userData, (x) => { return x.id != args.id });
                return 1;
            }
        },
        updateUserName: {
            type: userUnion,
            args: {
                updateModel: { type: updateUserInput }
            },
            resolve: (source, args, context) => {
                let updateUser = _.first(_.filter(userData, (x) => { return x.id == args.updateModel.id }));
                updateUser.name = args.updateModel.name;
                var names = _.split(args.updateModel.name, '.');
                updateUser.firstName = _.first(names);
                updateUser.lastName = _.last(names);
                updateUser.createDate = args.updateModel.createDate ? args.updateModel.createDate : updateUser.createDate;
                return updateUser;
            }
        }
    }
});

module.exports =
    new GraphQLSchema({
        query: userQuery,
        mutation: userMutation
    });

6. 执行 node server.js ，启动 8000服务

7.在浏览器中访问localhost:8000/graphql，可以看到如下界面

9.搭建完成

参数解析：

graphql 官网给定了两种方式来实现graphql

1.方式 一

var schema = buildSchema(`
  type Query {
    quoteOfTheDay: String
    random: Float!
    rollThreeDice: [Int]
  }
`);

var root = {
  quoteOfTheDay: () => {
    return Math.random() < 0.5 ? 'Take it easy' : 'Salvation lies within';
  },
  random: () => {
    return Math.random();
  },
  rollThreeDice: () => {
    return [1, 2, 3].map(_ => 1 + Math.floor(Math.random() * 6));
  },
};

var app = express();
app.use('/graphql', graphqlHTTP({
  schema: schema,
  rootValue: root,
  graphiql: true,
}));

方式一 是通过buildSchema 来声明 schema，rootValue指定解析函数来实现的。在大多情况下不切合实际开发，因为buildSchema是字符串，不方便发现问题和阅读。

方式二 就是schema.js 代码体现的，通过类型实现和内部指定解析函数的方式。个人认为这个更加合理。

各种类型的参数就不一一解释了，通过跳转到包的定义或者访问官网(http://graphql.cn/graphql-js/basic-types/)查看单词的语义化就可以知道其意思了。

经验：

1.GraphQLInterfaceType 和 GraphQLUnionType 实现时，必须提供 resolveType，负责在查询字段时会报错

2.浏览器中的查询默认是Query，用到mutation时需要指定

3.GraphQLInterfaceType 和 GraphQLUnionType 的数据结构时，在不清楚具体的返回模型类型时，建议编写每个模型的内联

4. query 和 mutation的职责要明确，不要混淆，因为query 里面也可以增删改

5.指令的动态变量名必须是 '$'开头