GraphQL 既是一种用于 API 的查询语言也是一个满足你数据查询的运行时。 GraphQL 对你的 API 中的数据提供了一套易于理解的完整描述，使得客户端能够准确地获得它需要的数据，而且没有任何冗余，也让 API 更容易地随着时间推移而演进，还能用于构建强大的开发者工具。
官方链接：https://graphql.cn/
其实不同服务端语言的graphql接入示例都有，这里只是单独拿出来稍加改动，减少阅读文档的时间
一、简单粗暴的方式
目录结构：
├─ graphql_node
└─ test.js
安装graphql包
graphql_node> npm install graphql -S
test.js代码
var { graphql, buildSchema } = require('graphql');
// schema
var schema = buildSchema(`
type Query {
name: String,
age: Int,
score: Float,
status: Boolean
}
`);
// entity
var entity = {
name: 'tom',
age: 24,
score: 78.9,
status: true
};
// '{ name,age }' 参数占位符
graphql(schema, '{ name, age, score, status }', entity).then((response) => {
console.log(response);
});
运行
graphql_node> node test.js
{ data: [Object: null prototype] { name: 'tom', age: 24, score: 78.9, status: true } }
二、配合express
Express GraphQL：https://graphql.cn/graphql-js/running-an-express-graphql-server/
目录结构：
├─ graphql_node
└─ server.js
安装相关依赖
graphql_node> npm install express express-graphql graphql -S
server.js
var express = require('express');
var graphqlHTTP = require('express-graphql');
var { buildSchema } = require('graphql');
// 使用 GraphQL Schema Language 创建一个 schema
var schema = buildSchema(`
type Query {
name: String,
age: Int,
score: Float,
status: Boolean
}
`);
// entity
var entity = {
name: 'tom',
age: 24,
score: 78.9,
status: true
};
var app = express();
app.use('/graphql', graphqlHTTP({
schema: schema,
rootValue: entity,
graphiql: true
}));
app.listen(4000);
console.log('Running a GraphQL API server at localhost:4000/graphql');
运行
graphql_node> node server.js
浏览器访问：http://localhost:4000/graphql 输入参数，点击执行
image.png
三、客户端请求
graphql-clients：https://graphql.cn/graphql-js/graphql-clients/
以下代码都是在示例二的基础上处理进行的
1、使用Insomnia客户端工具模拟
Insomnia下载：https://insomnia.rest/
header头为
Content-Type: 'application/json'
结果
image.png
2、命令行curl
curl下载：https://curl.haxx.se/download.html 选择适合自己系统版本的
注意：-d的参数一定要按照下面的来，不能写成'{"query":"name"}'，否则会报错（POST主体发送了无效的JSON）
graphql_node> curl -X POST -H "Content-Type: application/json" -d "{\"query\":\"{name}\"}" http://localhost:4000/graphql
{"data":{"name":"tom"}}
3、使用window.fetch方法
window.fetch介绍：https://developer.mozilla.org/zh-CN/docs/Web/API/Fetch_API
打开 http://localhost:4000/graphql ，开启开发者控制台，粘贴：
fetch('/graphql', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'Accept': 'application/json',
},
body: JSON.stringify({query: "{ name}"})
})
.then(r => r.json())
.then(data => console.log('data returned:', data));
image.png
4、$.ajax方式请求
目录结构
├─ graphql_node
├─ public
└─ └─ test.html
└─ server.js
为了不跨域，这里加了一个配置，使之允许访问某目录下的文件，server.js修改如下：
var express = require('express');
var graphqlHTTP = require('express-graphql');
var { buildSchema } = require('graphql');
// 使用 GraphQL Schema Language 创建一个 schema
var schema = buildSchema(`
type Query {
name: String,
age: Int,
score: Float,
status: Boolean
}
`);
// entity
var entity = {
name: 'tom',
age: 24,
score: 78.9,
status: true
};
var app = express();
app.use('/static', express.static('public')); // 允许访问public目录
app.use('/graphql', graphqlHTTP({
schema: schema,
rootValue: entity,
graphiql: true
}));
app.listen(4000);
console.log('Running a GraphQL API server at localhost:4000/graphql');
public/test.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test</title>
<script src="https://zhangqh22.gitee.io/libs/jquery.min.js"></script>
</head>
<body>
<button type="button" class="js-button">点击</button>
<script>
$('.js-button').click(function() {
$.ajax({
url: '/graphql',
data: {
query: `{name}`
},
success: function(res) {
console.log(res)
}
});
});
</script>
</body>
</html>
访问：http://localhost:4000/static/test.html 点击获取数据
image.png
写到最后，欢迎关注作者：http://fenxianglu.cn/
网友评论