GraphQL在koa2服务器端的使用案例
一、创建项目[*] 1、安装一些包
npm install koa --save
npm install isodate --save
npm install koa --save
npm install koa-bodyparser --save
npm install koa-router --save
// 处理跨域的作用
npm install koa2-cors --save
npm install mongoose --save
// 下面这两个是ES6语法的
npm install babel-cli --save-dev
npm install babel-preset-es2015 --save-dev
[*] 2、配置环境
"scripts": {
"test": "nodemon --exec babel-node --presets=es2015 app.js"
},
二、在koa中使用mongoose
[*]1、创建models层
[*]2、定义视图(对数据操作查看源代码)
三、在koa中使用graphQl
[*] 1、安装包
npm install graphql graphql-server-koa --save
[*] 2、单独创建一个graphql的文件夹
[*] 3、一般一张表对应里面一个文件夹(包括model、query、mutation)
四、使用graphql构建一个job的模型
[*] 1、model中的代码
import {
GraphQLObjectType,
GraphQLInputObjectType,
GraphQLString,
GraphQLID
} from 'graphql'
export const jobType = new GraphQLObjectType({
name: 'job',
fields: {
_id: {
type: GraphQLID
},
job_name: {
type: GraphQLString
}
}
})
[*] 2、创建一个query关于job的查询语句文件
import {
GraphQLID,
GraphQLNonNull,
GraphQLList
} from 'graphql';
import {
jobType
} from "./model";
// 引入数据模型
import jobModel from './../../models/job';
const Jobs = {
type: new GraphQLList(jobType), // 返回是一个数组
args: {},
async resolve(root, params, options) {
const result = jobModel.find().exec();
return result;
}
}
[*] 3、项目中统一输出
import {
GraphQLObjectType,
GraphQLSchema
} from 'graphql';
// 引入job的查询与操作
import JobQueries from './job/query';
import JobMutations from './job/mutation';
export default new GraphQLSchema({
query: new GraphQLObjectType({
name: 'Queries',
fields: Object.assign(
JobQueries
)
}),
mutation: new GraphQLObjectType({
name: 'Mutations',
fields: Object.assign(
JobMutations
)
})
})
[*] 4、同理如果要使用mutation也是一样的
[*] 5、配置路由
import Router from 'koa-router';
import {graphiqlKoa, graphqlKoa} from 'graphql-server-koa';
import schema from "../graphql/schema";
const router = new Router();
router.get('/graphql', async (ctx, next) => {
const result = await graphqlKoa({
schema: schema
})(ctx, next);
console.log(result);
ctx.body = result;
})
router.post('/graphql', async (ctx, next) => {
await graphqlKoa({
schema: schema
})(ctx, next);
})
// 这个仅仅是在方便在浏览器上查看的,项目上线后可以删除
router.get('/graphiql', async (ctx, next) => {
await graphiqlKoa({
endpointURL: '/graphql'
})(ctx, next);
})
module.exports = router.routes();
[*] 6、总结
[*]在graphql只有query和mutation
[*]如果是查询语句就用query
[*]如果是对数据的增删改就用mutation
五、在React前端(客户端)调用后端使用graphql的数据
[*] 1、安装依赖包
npm install react-apollo --save
npm install apollo-client --save
npm install apollo-link-http --save
npm install apollo-cache-inmemory --save
npm install graphql-tag --save
[*] 2、react的入口文件配置
const client = new ApolloClient({
link: new HttpLink('http://localhost:4000/graphql/'),
cache: new InMemoryCache()
});
// 创建一个上面提到的客户端
ReactDOM.render(
<ApolloProvider client={client}>
<App />
</ApolloProvider>, document.getElementById('root'));
registerServiceWorker();
[*] 3、需要请求数据的地方
import React, { Component } from 'react';
import { graphql } from 'react-apollo';
import gql from 'graphql-tag';
class Test01 extends Component{
render(){
return(
<div>
<h1>你好</h1>
<h2>{this.props.data.myField1}</h2>
</div>
)
}
}
export default graphql(gql`
query{
Jobs{
_id,
job_name
}
}
`)(Test01)
六、在vue中使用
[*] 1、安装包
npm install vue-graphql --save
[*] 2、创建一个graphql.js文件
import Vue from 'vue';
import VueGraphQL from 'vue-graphql';
Vue.use(VueGraphQL);
const graphqlApi = 'http://localhost:4000/graphql/';
const client = new VueGraphQL.Client(graphqlApi);
export default client;
[*] 3、在main.js引入
import Vue from 'vue'
import App from './App'
import router from './router'
import graphql from './graphql';
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
graphql,
template: '<App/>',
components: { App }
})
[*] 4、使用查询语句
...
mounted(){
this.getGraphQlData();
},
methods: {
getGraphQlData() {
this.$graphql.request(`
query{
Jobs{
_id,
job_name
}
}
`).then(result => {
console.log(result);
})
}
}
...
[*] 5、使用mutations语句
export default {
name: 'HelloWorld',
data () {
return {
job:'',
}
},
methods: {
postJob(){
console.log(this.job);
this.$graphql.request(`
mutation{
JobCreate(data:{job_name:"${this.job}"})
}
`).then(result => {
console.log(result);
})
}
}
}
七、源代码下载
页:
[1]