GraphQL在koa2服务器端的使用案例

贝礼骞
2023-12-01

一、创建项目

  • 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、一般一张表对应里面一个文件夹(包括modelquerymutation)

四、使用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只有querymutation
    • 如果是查询语句就用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);
          })
        }
      }
    }
    

七、源代码下载

 类似资料: