简历加分项:初学graphql
分类：javascript
1.graphql出现的原因和基本介绍
想必大多数人对传统的数据库查询语句都很熟悉，在条件复杂时，语句非常麻烦; 在前端开发时也会经常要和后端对接数据，有时候后端给你的数据并没有仔细的筛选，冗余的数据大大降低效率。graphql本质上是一种查询语句的设计，可以让你自定查询的模式，帮助你简单地得到精确的数据。掌握graphql在面试那些主打数据搜索的互联网大厂时会让面试官更加留意。更多细节请见链接。本文仅为初学展示。
2.具体实现
1.环境 VS Code+npm 7.0.8+node v15.2.0.项目目录里运行 npm init -y 初始化。接着 npm i express express-graphql graphql。本例是结合express来实现如要更换则需将安装语句里的express全部替换
2.目录下建立hello.js,先引入必须的三个方法。这些是基本的API，需要记下。
const express = require('express');//引入express
const { buildSchema } = require('graphql'); //引入graphql里的建立查询模型函数，如同react中的createStore等
const graphqlHTTP = require('express-graphql').graphqlHTTP;//graphqlHTTP是grapql的http服务，
//用于处理graphql的查询请求
3.建立简单查询模型
//schema是查询模式，本意是数据库的组织和结构，buildSchema接受一个字符串模板，
//里面定义了查询模型和查询实体,
const schema = buildSchema(`
type User {//名字为User的查询模式，
//其中有两个属性，并且定义了属性的类型约束，
name: String
age: Int
}
type Query {//Query 指定了这里面的实体都是用于查询。
hero: String//hero 为简单类型，如同name一样，可以在Query里直接定义
user: User //user 为复杂类型所以要在外部定义
}
//如同 typescript.这些语法是固定的
（一）简单例子
4.实现模型：
const root = {
hero:() => {
return "I am icon man ***";
},
user: () => {
return {
name: 'leo',
age: 18
}//这是两个假数据，为了模拟效果
}
const app = express();//使用express编译
app.use('/graphql', graphqlHTTP({// 'graphql'指定页面路径
schema: schema,//查询模型为我们定义的
rootValue: root,//数据来源为自定义的root
graphiql: true//是否启动graphiql查询界面。相当于一个工具，设置启动以帮助查询
}));
//用express 启动静态服务器。在8000端口上启动
app.use(express.static('public'))
app.listen(8000);
5.尝试：运行nodemon hello.js.以热更新启动页面监听。来到网址：http://localhost:8000/graphql
- 1运行如图:左边为查询界面。右边为输出界面 .输入查询语句后，点击上方运行图标
- 2 接下来查询user:注意，按格式输入查询语句。应为user是较为复杂的类型。输入的查询要遵守定义的scema查询模板
- 3 graphql支持灵活查询，不需写复杂的select语句，比如只查询name属性
（二）复杂例子
const schema = buildSchema(`
type Account {
name: String
age: Int
sex: String
department: String
salary(city: String): Int //salary 为带参的属性，参数city类型为String
}
type Query {
account(username: String):Account //带参数的查询类型，参数username为String
}
`)
const root = {
account({username}) {//参数传入
const name = username
const sex = 'man'
const age = 18;
const department = '百度凤巢前端研发部';
const salary = ({city}) => {//根据参数进行条件查询
if (city == '北京' || city == '上海' || city == '广州' || city == '深圳') {
return 30000;
}
return 3000;
}
return {
name,sex,age,department,salary
}
},
}
const app = express();//使用express编译
app.use('/graphql', graphqlHTTP({
schema: schema,//查询模型为我们前面定义的
rootValue: root,//数据来源为自定义的root
graphiql: true//是否启动graphiql查询界面。相当于一个工具，设置启动以帮助查询
}));
//用express 启动静态服务器。在8000端口上启动
app.use(express.static('public'))
app.listen(8000);
查询实践：传入用户名，城市为北京
城市为南昌，且只查salary
3 总结
- 本例使用假数据，只是简单展示了graphql的模板和架构。可以初步了解到自定查询模板的好处。暂不涉及数据库连接
- 安装时依赖时，需要根据使用的Node.js服务器框架 安装相应框架上的graphql
- 查询模板定义的语法比较固定。数据类型定义非常关键，利于减少bug
- 在启动服务时需指定路径，模型，数据源，辅助工具最好打开
- 适宜配合typescript+node从前端向全栈迈近