GraphQL是比REST更高效、强大和灵活的新一代API标准。Facebook开发了GraphQL并且将其开源，目前其由一大群来自全球各地的公司和个人维护。
注意到GraphQL是API标准，不要看到QL结尾就以为其是一种数据库技术。
比REST更灵活的一种选择
REST是目前比较流行的一种暴露服务端数据的常见方式，其简化了客户端尤其是移动端和服务器交互的流程。但是随着业务变得复杂，有些情况变得棘手：
简单来说就是前端要什么，自己去拿，无需再问后端写。相对于RESTAPI的开发方式来说，就是不用前端在叫后端写接口，后端只需要写一个维度的数据，前端按照一定的字段请求然后拿到数据即可。
自从入了node.js这个坑以后，我对PHP就已经无爱了。为什么这样呢？
第一php多数框架是处理web端的，yii和laravel可以处理其他php处理不到的事情，可是在项目运行后做个队列等，都会相当复杂。
第二，npm 的 库是比 php composer 多了不知道多少倍，很多业务可以说，一个npm你解决不了的？我直播XX。
第三，JavaScript 如今是有 typescript ，开发协助上大大提升规范性和阅读性。
第四，站在企业的角度来说，我请一个node.js工程师，等于请了一个全栈工程师，节省成本，
第五，node.js 有强大的 异步处理 async/await 而 php 没有[别和我说swoole] 那种回调就已经写到蛋疼。
回归正题，本人使用typescript ，如果你们beale的话看着改。
简单的搭建这个系统架构的的时候，我们需要依赖以下的包。
package.json
"dependencies": {
"@types/body-parser": "^1.17.0",
"@types/express": "^4.16.1",
"@types/node": "^11.11.3",
"apollo-errors": "^1.9.0",
"apollo-server-express": "^2.4.8",
"body-parser": "^1.18.3",
"express": "^4.16.4",
"graphql": "^14.1.1",
"graphql-import": "^0.7.1",
"graphql-tools": "^4.0.4"
},
"devDependencies": {
"ts-node": "^8.0.3",
"ts-node-dev": "^1.0.0-pre.32",
"typescript": "^3.3.3333"
}
我的tsconfig.json 配置如下
tsconfig.json
{
"compilerOptions": {
"rootDir": ".",
"outDir": "build",
"strictNullChecks": false,
"moduleResolution": "node",
"esModuleInterop": false,
"experimentalDecorators": false,
"noUnusedParameters": false,
"noUnusedLocals": false,
"noImplicitAny": false,
"target": "es6",
"lib": [
"dom",
"es7"
]
},
"exclude": [
"node_modules",
"lib",
"es"
]
}
下面看看程序文件路径
image.png
本文用的相关技术核心:express graphql apollo-server-express graphql-import graphql-tools
我们创建express 并搭配 graphql 的程序入口
import * as express from 'express';
import * as path from 'path';
import * as bodyParser from 'body-parser';
import graphql from './graphql';
const app = express();
app.use(bodyParser.json({ limit: "20mb" }));
app.use(bodyParser.urlencoded({ limit: "20mb", extended: true }));
app.use(express.static(path.join(__dirname, '../public')));
graphql(app);
app.listen(4000, () => {
console.log('server started on port 4000');
});
application/graphql/index.ts
import { ApolloServer, gql } from 'apollo-server-express';
import { formatError } from 'apollo-errors';
import { makeExecutableSchema } from 'graphql-tools';
import * as path from 'path';
//如果你不想写字符串 想用graphql文件的话就要这个。
import { importSchema } from 'graphql-import';
//graphql resolvers 的全部实现入口文件
import resolvers from './models/resolvers';
//graphql Schema root文件
const typeDefs = importSchema(path.join(__dirname, 'models/schema.graphql'));
const schema = makeExecutableSchema({
typeDefs: typeDefs,
resolvers: resolvers
});
export default (app: any): void => {
const server = new ApolloServer({
schema,
formatError
});
server.applyMiddleware({
app,
path: '/graphql'
})
}
schema.graphql
# import Query.*, Mutation.* from "./test/test.graphql"
# import Query.* from "./name/name.graphql"
resolvers.ts
import test from './test';
import name from './name';
export default {
Query: {
...test.Query,
...name.Query
},
Mutation: {
...test.Mutation
}
}
image.png
对对就是一句没有mvc 这个说法，就只有Model。数据的交换都交给前端去处理MVC，换句话来说就是以后后端就能更注重的发展数据挖掘这一块的内容，和性能优化，微服务等。UX的业务操作是前端发展，后端能更注重自身的程序的业务逻辑
graphql-import 的内容比较简单，请github 查询以下 graphql-import 马上可以看到内容
唯一要注意的是参数问题
type Query {
hello(name: String!): String
}
对应的 resolvers是这样的
export default {
// 查询
Query: {
hello: (_, { name }) => {
console.log(name);
return name;
}
}
}
image.png
网友评论