graphql的学习
graphQl学习
介绍
●GraphQL是Facebook开发的一 -种数据查询语言，并于2015年
公开发布。它是REST API的替代品
●GraphQL既是- -种用于API的查询语言也是一-个满足你数据查
询的运行时。GraphQL 对你的API中的数据提供了一套易于理
解的完整描述，使得客户端能够准确地获得它需要的数据，而且
没有任何冗余，也让API更容易地随着时间推移而演进。
●官网: https://graphql.org/
●中文网: http://graphql.cn/
●特点:
1.请求需要的数据，不多不少
例如: account中有name, lage, sex, department等。 可以只取得需要的字段。
2.获取多个资源，只用-个请求
3.描述所有可能类型的系统。便于维护，根据需求平滑演进，添
加或者隐藏字段。
对比于resful
●restful: Representational State Transfer表属性状态转移。本
质上就是用定义uri,通过api接口来取得资源。通用系统架构,
不受语言限制。
例子:饿了么接口
- resful一个接口只能返回一个资源，graphql一次可以返回多个资源。
- resful用不同的url来区分资源，graphql用类型区分
graphql的类型
基本类型：String，Boolean，Float,Int ,ID,可以在schema中直接使用。
数组[类型]：[int]代表整型数组。
参数类型传递
和js传递参数一样，小括号内定义形参，但是注意:参数需要定
义类型。
●!(叹号)代表参数不能为空。
type Query {
//返回的数组
rollDice( numDice: Int!， numSides: Int): [Int ]
}
自定义参数类型
●GraphQL允许用户自定义 参数类型,通常用来描述要获取的资
源的属性。
type Account {
name: String .
age: Int
sex: String
department: String
salary(city: String): Int
}
type Query {
account(name: String): Account
}
案例
服务端接口
var express = require('express');
var {
buildSchema
} = require('graphql')
const graphqlHTTP = require('express-graphql')
var app = express();
// 定义模型 查询 type不能丢
const schema = buildSchema(`
type Query {
getclassmate(classNo:Int!):[String]
account(username: String): Account
}
type Account {
name: String
age: Int
sex: String
department: String
salary(city: String): Int
}
`)
// 定义查询对应的处理器
const root = {
getclassmate: ({
classNo
}) => {
const obj = {
31: ["lisa", "dave", "phil"],
61: ["张三", "李四", "王麻子"],
51: ["但是", "ds", "eds"]
}
return obj[classNo]
},
account: ({
username
}) => {
// 先定义返回值中的内容
const name = username;
const sex = "man";
const age = 12
const department = "mis";
// 由于有参数传递进来，所以使用解构赋值 且判断不同的值对应返回的内容
const salary = ({
city
}) => {
if (city === "北京" || city === "上海" || city === "深圳") {
return 10000;
} else {
return 4000;
}
}
// 最后整体返回
return{
name,
sex,
age,
department,
salary
}
}
}
/* GET users listing. */
app.use('/graphql', graphqlHTTP({
schema: schema,
rootValue: root,
graphiql: true
}));
app.listen(3002, () => {
console.log("开启3002成功")
});
// 向外公开文件夹供用户访问静态资源index
app.use(express.static('public'))
访问端口信息
在客户端访问graphql接口
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button onclick="getdata()">获取数据</button>
<script>
function getdata() {
// 定义字符串 account(username: String): 改造
const query = `
query Account($username: String){
account(username:$username){
name,
sex,
salary(city: "北京")
}
}
`
// 定义变量，该变量自动绑定$username
var variables = { username: "张安三" }
fetch('/graphql', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'Accept': 'application/json'
},
// 转换为字符串
body: JSON.stringify({
query:query,
variables: variables
})
}).then(res => res.json).then(data => {
console.log(data)
})
}
</script>
</body>
</html>
network中可以看到
注意：
1.定义的int型如果在定义处理器中加“13”会默认转换为int，但是如果有其他字符，或报错，请求后会有提示，且对应字段为null
2.定义模型的type 不能丢且后面必须是大写字母开头的单词
客户端访问的参数字段一定要对应一致，
请求数据貌似使用apollo的方式，还没研究，下来看看