最近在和好友聊天的过程中，突然感觉自己真的是个弟弟奥
聊天过程中提到了一个尴尬的瞬间
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
针对最近出现的项目上的问题；想将Graphql引入
哎 目前今天就掌握了这些 ，后续如果在项目中应用的话，我在记录吧 😆
踩坑总结：
1、后端接口method为get,前端的query请求提示请求方法错误？
这是因为前端发送的graphql请求无论是query还是mutation,都是post请求。
2、graphql请求浏览器的network显示type为fetch
这也就是graphql与rest的不同之处，rest请求type为xhr,即XMLHttpRequest,但是graphql却是fetch
