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);
        })
      }
    }
  }

七、源代码下载

---

欢迎加入群聊，我们一起探讨前端技术栈

群号:560285778