Node使用Graphql

86 阅读 0 评论 57 点赞

我是靠谱客的博主精明超短裙，这篇文章主要介绍Node使用Graphql，现在分享给大家，希望可以做个参考。

Node使用Graphql

我们在实际的开发过程中同城会出现这种情况，单个后台对应多个前端，而且前端需要的数据格式并不一样，这就需要后端进行判断或者使用中台进行数据处理

中台的搭建有两种方法

使用axios.all方法获取数据进行处理。

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
exports.get = ({url, params={}}) => {
return axios({
url,
params
})
.then((result) => {
return result.data
})
}
exports.all = (promiseArr) => {
return axios.all(promiseArr)
.then(axios.spread((...resultList) => {
return resultList
}))
}

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
router.get('/all', async (req, res, next) => {
let java = await get({
url: 'http://localhost:9000/api/list'
})
let node = get({
url: 'http://localhost:4040/users'
})
let php = get({
url: 'https://ik9hkddr.qcloud.la/index.php/trade/get_list'
})
let nodeAndphp = await all([node, php])
res.json({
java,
nodeAndphp
})
})

此方法会返回一个新的数据类型格式，但只是对数据进行简单的拼接，笼统的返回，并不能进行太多的处理，所以引出第二种方法。

Graphql

我们这里主要分为两个方面，对于node比较流行的框架来说,其实网上对于express的搭建方法有很多，但是对于koa的就比较少了

express
koa2

express

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
npm install express express-graphql graphql
const express = require('express')
const graphqlHTTP = require('express-graphql')
const app = express()
// 配置路由
app.use('/graphql', graphqlHTTP(req => {
return {
schema: yourSchema,
graphiql: true // 是否开启可视化工具
//当然这里的参数肯定不止这两个
可以通过访问官网查询
}
}))
// 服务使用3000端口
app.listen(3000);

express-graphql传送门

Koa2

这里有两种方式去实现：

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
const Koa = require('koa')
const graphqlHTTP = require('koa-graphql');
const Router = require('koa-router');
const app = new Koa()
const router = new Router();
const schema = require('./schema')
router.all('/graphql', graphqlHTTP({
schema: schema,
graphiql: {
editorTheme: 'blackboard'
}
}));
app.use(router.routes()).use(router.allowedMethods());
app.listen(4000)

复制代码

1
2
3
4
5
6
7
8
9
10
11
const Koa = require('koa');
const mount = require('koa-mount');
const graphqlHTTP = require('koa-graphql');
const schema = require('./schema')
const app = new Koa();
app.use(mount('/graphql', graphqlHTTP({
schema:schema,
graphiql: true
})));
app.listen(4000);

Schema

每一个GraphQL服务都会定义一套类型，来描述服务可能返回的所有数据。当执行一个查询时，服务会根据定义的Schema验证并执行查询。

复制代码

1
2
3
4
5
6
7
//标量类型
GraphQLInt
GraphQLString
GraphQLBoolean
GraphQLID //其实这个我没懂他和int有什么区别。。
//我简单的理解为这些类似于js的基本类型

除此之外，schema还有定义(Definitions) 常用的定义如下

GraphQLObjectType

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
var AddressType = new GraphQLObjectType({
name: 'Address',
fields: {
street: { type: GraphQLString },
number: { type: GraphQLInt },
formatted: {
type: GraphQLString,
resolve(obj) {
return obj.number + ' ' + obj.street
}
}
}
});
var PersonType = new GraphQLObjectType({
name: 'Person',
fields: () => ({
name: { type: GraphQLString },
bestFriend: { type: PersonType },
})
});

GraphQLInterfaceType

当一个字段可能返回多种不同类型时，可使用接口类型 GraphQLInterfaceType，来描述所有可能类型必须有的共同字段，也可指定 resolveType 函数来决定该字段实际被解析时为何种类型。

复制代码

const AnimalType = new GraphQLInterfaceType({
name: 'Animal',
description: 'Animal接口',
fields: {
species: {
type: GraphQLString,
description: '动物物种',
}
},
})
const dogType = new GraphQLObjectType({
name: 'dog',
interfaces: [AnimalType],
description: 'dog数据',
fields: {
species: {
type: GraphQLString,
description: '动物物种'
},
name: {
type: GraphQLString,
description: '名称'
}
},
isTypeOf: (obj) => {
return obj.name
}
})
const fishType = new GraphQLObjectType({
name: 'fish',
interfaces: [AnimalType],
description: 'fish数据',
fields: {
species: {
type: GraphQLString,
description: '动物物种'
},
color: {
type: GraphQLString,
description: '颜色'
}
},
isTypeOf: (obj) => {
return obj.color
}
})
schema = new GraphQLSchema({
types: [AnimalType, dogType, fishType],
query:new GraphQLObjectType({
name:"schema",
fields:{
fetchInterfaceData:{
type: new GraphQLList(AnimalType),
description: 'interface类型数据例子',
resolve: (root, params, context) => {
return [
{
"species": "哈士奇",
"name": "旺财"
},
{
"species": "热带鱼",
"color": "红色"
}
]
},
}
}
}),
})
//查询：
query fetchInterfaceData {
fetchInterfaceData {
species
...on dog{
name
}
...on fish{
color
}
}
}
//输出
{
"data": {
"fetchInterfaceData": [
{
"species": "哈士奇",
"name": "旺财"
},
{
"species": "热带鱼",
"color": "红色"
}
]
}
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
const AnimalType = new GraphQLInterfaceType({
name: 'Animal',
description: 'Animal接口',
fields: {
species: {
type: GraphQLString,
description: '动物物种',
}
},
})
const dogType = new GraphQLObjectType({
name: 'dog',
interfaces: [AnimalType],
description: 'dog数据',
fields: {
species: {
type: GraphQLString,
description: '动物物种'
},
name: {
type: GraphQLString,
description: '名称'
}
},
isTypeOf: (obj) => {
return obj.name
}
})
const fishType = new GraphQLObjectType({
name: 'fish',
interfaces: [AnimalType],
description: 'fish数据',
fields: {
species: {
type: GraphQLString,
description: '动物物种'
},
color: {
type: GraphQLString,
description: '颜色'
}
},
isTypeOf: (obj) => {
return obj.color
}
})
schema = new GraphQLSchema({
types: [AnimalType, dogType, fishType],
query:new GraphQLObjectType({
name:"schema",
fields:{
fetchInterfaceData:{
type: new GraphQLList(AnimalType),
description: 'interface类型数据例子',
resolve: (root, params, context) => {
return [
{
"species": "哈士奇",
"name": "旺财"
},
{
"species": "热带鱼",
"color": "红色"
}
]
},
}
}
}),
})
//查询：
query fetchInterfaceData {
fetchInterfaceData {
species
...on dog{
name
}
...on fish{
color
}
}
}
//输出
{
"data": {
"fetchInterfaceData": [
{
"species": "哈士奇",
"name": "旺财"
},
{
"species": "热带鱼",
"color": "红色"
}
]
}
}

GraphQLUnionType

当一个字段可以返回多种不同类型时，可使用联合类型 GraphQLUnionType 描述所有可能类型，也可指定 resolveType 函数来决定该字段实际被解析时为何种类型。

复制代码

const {
GraphQLString,
GraphQLList,
GraphQLUnionType,
GraphQLObjectType
} = require('graphql')
const weixinType = new GraphQLObjectType({
name: 'weixinItem',
description: 'weixin数据',
fields: {
source: {
type: GraphQLString,
description: '来源'
},
title: {
type: GraphQLString,
description: '标题'
}
}
})
const weiboType = new GraphQLObjectType({
name: 'weiboItem',
description: 'weibo数据',
fields: {
source: {
type: GraphQLString,
description: '来源'
},
author: {
type: GraphQLString,
description: '作者'
}
}
})
const articleUnion = new GraphQLUnionType({
name: 'articleUnion',
description: '文章联合类型',
types: [weixinType, weiboType],
resolveType: (value) => {
switch (value.source) {
case 'weixin':
return weixinType
case 'weibo':
return weiboType
}
}
})
schema = new GraphQLSchema({
query:new GraphQLObjectType({
name:"schema",
fields:{
fetchUnionData:{
type: new GraphQLList(articleUnion),
description: 'union类型数据例子',
resolve: (root, params, context) => {
return [
{
"source": "weixin",
"title": "标题 1",
},
{
"source": "weibo",
"author": "作者 1"
}
]
}
}
}
}),
})
// 调用例子
query fetchUnionData {
fetchUnionData {
...on weiboItem {
source
author
}
...on weixinItem {
source
title
}
}
}
//结果
{
"data": {
"fetchUnionData": [
{
"source": "weixin",
"title": "标题 1"
},
{
"source": "weibo",
"author": "作者 1"
}
]
}
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
const {
GraphQLString,
GraphQLList,
GraphQLUnionType,
GraphQLObjectType
} = require('graphql')
const weixinType = new GraphQLObjectType({
name: 'weixinItem',
description: 'weixin数据',
fields: {
source: {
type: GraphQLString,
description: '来源'
},
title: {
type: GraphQLString,
description: '标题'
}
}
})
const weiboType = new GraphQLObjectType({
name: 'weiboItem',
description: 'weibo数据',
fields: {
source: {
type: GraphQLString,
description: '来源'
},
author: {
type: GraphQLString,
description: '作者'
}
}
})
const articleUnion = new GraphQLUnionType({
name: 'articleUnion',
description: '文章联合类型',
types: [weixinType, weiboType],
resolveType: (value) => {
switch (value.source) {
case 'weixin':
return weixinType
case 'weibo':
return weiboType
}
}
})
schema = new GraphQLSchema({
query:new GraphQLObjectType({
name:"schema",
fields:{
fetchUnionData:{
type: new GraphQLList(articleUnion),
description: 'union类型数据例子',
resolve: (root, params, context) => {
return [
{
"source": "weixin",
"title": "标题 1",
},
{
"source": "weibo",
"author": "作者 1"
}
]
}
}
}
}),
})
// 调用例子
query fetchUnionData {
fetchUnionData {
...on weiboItem {
source
author
}
...on weixinItem {
source
title
}
}
}
//结果
{
"data": {
"fetchUnionData": [
{
"source": "weixin",
"title": "标题 1"
},
{
"source": "weibo",
"author": "作者 1"
}
]
}
}

GraphQLEnumType

枚举类型定义一些有效值的合集

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
const {
GraphQLString,
GraphQLEnumType
} = require('graphql')
const sourceEnumType = new GraphQLEnumType({
name: 'sourceEnum',
description: '文章来源枚举类型',
values: {
weixin: {
value: 'weixin',
description: '微信'
},
weibo: {
value: 'weibo',
description: '微博'
}
}
})
schema = new GraphQLSchema({
query:new GraphQLObjectType({
name:"schema",
fields:{
fetchEnumData:{
type: GraphQLString,
description: 'enum类型数据例子',
args: {
source: {
type: sourceEnumType,
description: '文章来源类型',
defaultValue: 'weixin'
}
},
resolve: (root, params, context) => {
let { source } = params
return source
}
}
}
}),
})
// 调用例子
query fetchEnumData {
fetchEnumData(
source: weixin
)
}
//输出
{
"data": {
"fetchUnionData": [
{
"source": "weixin",
"title": "标题 1"
},
{
"source": "weibo",
"author": "作者 1"
}
]
}
}

GraphQLInputObjectType

GraphQL 中的输入对象类型，表示一系列结构化的输入参数。作用于args

复制代码

const {
GraphQLInt,
GraphQLString,
GraphQLBoolean,
GraphQLNonNull,
GraphQLInputObjectType,
} = require('graphql')
const fileObject = new GraphQLInputObjectType({
name: 'fileObject',
description: "文件数据",
fields: () => ({
type: {
type: new GraphQLNonNull(GraphQLString),
description: '文件类型'
},
name: {
type: new GraphQLNonNull(GraphQLString),
description: '文件的原始文件名称'
},
size: {
type: new GraphQLNonNull(GraphQLInt),
description: '文件大小(bytes)'
},
path: {
type: new GraphQLNonNull(GraphQLString),
description: '文件上传后的路径'
},
}),
});
let schema = new GraphQLSchema({
query: new GraphQLObjectType({
name:'object',
fields: {
fetchInputObjectData:{
type: GraphQLBoolean,
description: 'inputObject类型数据例子',
args: {
file: {
type: fileObject,
description: 'object类型参数'
}
},
resolve: (root, params, context) => {
return true
}
}
}
})
})
//输入
query fetchInputObjectData {
fetchInputObjectData(
file: {
type: "hello.jpg",
name: "hello",
size: 1024,
path: "/img/hello.jpg"
}
)
}
//输出
{
"data": {
"fetchInputObjectData": true
}
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
const {
GraphQLInt,
GraphQLString,
GraphQLBoolean,
GraphQLNonNull,
GraphQLInputObjectType,
} = require('graphql')
const fileObject = new GraphQLInputObjectType({
name: 'fileObject',
description: "文件数据",
fields: () => ({
type: {
type: new GraphQLNonNull(GraphQLString),
description: '文件类型'
},
name: {
type: new GraphQLNonNull(GraphQLString),
description: '文件的原始文件名称'
},
size: {
type: new GraphQLNonNull(GraphQLInt),
description: '文件大小(bytes)'
},
path: {
type: new GraphQLNonNull(GraphQLString),
description: '文件上传后的路径'
},
}),
});
let schema = new GraphQLSchema({
query: new GraphQLObjectType({
name:'object',
fields: {
fetchInputObjectData:{
type: GraphQLBoolean,
description: 'inputObject类型数据例子',
args: {
file: {
type: fileObject,
description: 'object类型参数'
}
},
resolve: (root, params, context) => {
return true
}
}
}
})
})
//输入
query fetchInputObjectData {
fetchInputObjectData(
file: {
type: "hello.jpg",
name: "hello",
size: 1024,
path: "/img/hello.jpg"
}
)
}
//输出
{
"data": {
"fetchInputObjectData": true
}
}

GraphQLList

数组类型趴

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
let Movie = new GraphQLObjectType({
name:'Movie',
description:'电影信息',
fields:{
id:{
type:GraphQLInt
},
title:{
type:GraphQLString
},
genres:{
type:GraphQLString
},
rating:{
type:GraphQLFloat
},
}
})
let schema = new GraphQLSchema({
query: new GraphQLObjectType({
name:'object',
fields: {
movies:{
type:new GraphQLList(Movie),
resolve(parentValue, args, request){
return [
{
"id": 1,
"title": "欧洲攻略",
"genres": "喜剧，动作，爱情",
"rating": 3.8,
"theater": 1
},
{
"id": 2,
"title": "精灵旅社3：疯狂假期",
"genres": "喜剧，动画，奇幻",
"rating": 7.2,
"theater": 2
},
]
}
},
},
}),
//查询
query Movie {
movies{
id
title
genres
rating
}
}
//数据
{
"data": {
"movies": [
{
"id": 1,
"title": "欧洲攻略",
"genres": "喜剧，动作，爱情",
"rating": 3.8
},
{
"id": 2,
"title": "精灵旅社3：疯狂假期",
"genres": "喜剧，动画，奇幻",
"rating": 7.2
},
]
}
}

GraphQLNonNull

字段不能为空

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
let schema = new GraphQLSchema({
types: [AnimalType, dogType, fishType],
query: new GraphQLObjectType({
name:'object',
fields: {
hello: {
type: new GraphQLNonNull(GraphQLString),
args: {
name: {
// 这里定义参数，包括参数类型和默认值
type: GraphQLString,
defaultValue: 'Brian'
}
},
resolve(parentValue, args, request) { // 这里演示如何获取参数，以及处理
return 'hello world ' + args.name + '!';
}
},
},
}),
})
//查询
query hello{
hello
}
//数据
{
"data": {
"hello": "hello world Brian!"
}
}