最近在和好友聊天的過程中，突然感覺自己真的是個弟弟奧
聊天過程中提到了一個尷尬的瞬間
WechatIMG216.png
哎，進入正題吧
首先介紹下什么是Graphql明郭？
根據(jù)官網(wǎng)的解釋就是一種用于 API 的查詢語言
ask exactly what you want.
那我們?yōu)槭裁葱枰褂肎raphql 呢扩灯？
1、兼容多平臺導致字段冗余
2敞峭、一個頁面需要多次調(diào)用 API 聚合數(shù)據(jù)
3、需求經(jīng)常改動導致接口很難為單一接口精簡邏輯
下面我們通過一個簡單的demo來稍微了解下Graphql吧~
1、新建一個graphql文件夾瞬浓，然后在該目錄下打開終端，執(zhí)行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
如果我想每次查詢都想帶上一個參數(shù)該怎么辦位迂，如果我想查詢結(jié)果有多條數(shù)據(jù)又怎么處理访雪？
我們新增一個sehemaSuper.js文件
代碼如下
const {
GraphQLSchema,
GraphQLObjectType,
GraphQLString,
GraphQLInt,
GraphQLBoolean
} = require('graphql');
//稍微復雜一點的 查詢?nèi)?shù)據(jù)帶參數(shù)的寫法 多條數(shù)據(jù)
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: {
// 這里定義參數(shù)，包括參數(shù)類型和默認值
type: GraphQLString,
defaultValue: 'Brian'
}
},
resolve(parentValue, args, request) {
// 這里演示如何獲取參數(shù)掂林，以及處理
return 'hello world ' + args.name + '!';
}
},
person: {
name: 'personQuery',
description: 'query a person',
type: new GraphQLObjectType({
// 這里定義查詢結(jié)果包含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
});
然后在左側(cè)輸入 :
hello(name:"zhaoxiang"),
WechatIMG214.png
然后在試試多參數(shù)的:
{
hello(name:"charming"),
person(name:"charming"){
name,
sex,
age
}
}
WechatIMG215.png
如果只傳sex和age字段的話：
WX20191112-171930.png
針對最近出現(xiàn)的項目上的問題泻帮；想將Graphql引入
哎 目前今天就掌握了這些 精置，后續(xù)如果在項目中應用的話，我在記錄吧 ??
踩坑總結(jié)：
1锣杂、后端接口method為get,前端的query請求提示請求方法錯誤脂倦？
這是因為前端發(fā)送的graphql請求無論是query還是mutation,都是post請求。
2元莫、graphql請求瀏覽器的network顯示type為fetch
這也就是graphql與rest的不同之處赖阻，rest請求type為xhr,即XMLHttpRequest,但是graphql卻是fetch
