vue 如何使用graphql？ node.js如何使用graphql？ node框架 egg 如何使用graphql？

说明   本文中 vue+node 均基于的 apollo.js 使用   vue 是在apollo基础上 封装了一个 vue的组件  方便使用

 

vue 使用 graphql

1 下载依赖包

npm install --save vue-apollo graphql apollo-client apollo-link apollo-link-http apollo-cache-inmemory graphql-tag

2 以 vue 脚手架 项目结构为例  

一

在 src/views/mains 里进行配置

import VueApollo from 'vue-apollo'
Vue.use(VueApollo)

然后 引入自己一会 要写的 vueApollo的二次封装的配置文件
import apolloProvider from './vueApollo'

然后 最后 new Vue时 引入他
new Vue({
  el: '#app',
  provide: apolloProvider.provide(),
  router,
  store,
  i18n,
  render: h => h(App)
})

二

然后相对路径 创建 vueApollo.js


内部代码如下

import { ApolloClient } from 'apollo-client'
import { HttpLink } from 'apollo-link-http'
import { InMemoryCache } from 'apollo-cache-inmemory'
import VueApollo from 'vue-apollo'
const httpLink = new HttpLink({
  uri: '/v1/graphql',
  /* 其中./v1是我在vue的config中配置时解决跨域时起的代理一个名字，后面的是后端
 暴露接口方法的地址 */
  credentials: 'same-origin'
  /* 这个属性的意思是在同源的情况下携带cookie,因为vue-apollo本身发送的是一个fetch请求，所以在发送请求时不会自动携带cookie，所以我们需要加上此属性 */
})
const apolloClient = new ApolloClient({
  link: httpLink,
  cache: new InMemoryCache(),
  connectToDevTools: true
})
export default new VueApollo({
  defaultClient: apolloClient,
  clients: { default: apolloClient }
})

3 使用 vue-apollo 

先看结构图

下面是vue页面的全部代码

上面代码中 调用方法是 

this.$apollo.query 和  this.$apollo.mutate

而我们标准的 gql语言 在 相对的2个文件夹里  

展示一个看看   这里要引入   graphql-tag  然后用gql 报过我们的语句即可  剩下的就是配合后台的 gql了

下面是test1

import gql from 'graphql-tag' // 引入graphql
export default {
  testQuery: gql `query Query{  
    test
  }`,
  testLogin: gql `query login($username:String!,$pwd:String!){
    login(username:$username,pwd:$pwd){
       status
       errorCode
       msg
    }
  }`,
  testLogin_m: gql `query testLogin_m($loginModel: LoginModel!){
    login_m(loginModel:$loginModel){
       status
       errorCode
       msg
    }
  }`,
  getUserInfo: gql `query getUserInfo($userid: ID!){
    getUserInfo(userid:$userid){
       id
       name
       userAvatar
       vip
       showVip
       token
       fans {
        name
       }
    }
  }`,
  getUserShowVip: gql `query ($userid: ID!,$vip:Int){
    getUserShowVip(userid:$userid,vip:$vip){
       id
       name
       userAvatar
       vip
       showVip
       token
       fans {
        name
       }
    }
  }`,
  queryUsers: gql `query queryUsers($vip:Int!){
    queryUsers(vip:$vip){
       name
       fans {
         name
         vip
         token
       }
    }
  }`
}

把 test2 也奉上

import gql from 'graphql-tag'
export default {
  testCreateUser: gql`mutation createUser($name:String,$userAvatar:String,$vip:Int){
    createUser(name:$name,userAvatar:$userAvatar,vip:$vip){
      errorCode
      status
      msg
    }
  }`
}

================================分割线=========================================

下面说一下 node端 如何是用 apollo   我用的是egg框架  

1 下载依赖 

npm install -S  apollo-boost  node-fetch graphql-tag

直接在controller 的base里  引入

// import ApolloClient from 'apollo-boost';
const Apollo = require('apollo-boost')
const fetch = require('node-fetch')
// import { HttpLink } from 'apollo-link-http';
// import { InMemoryCache } from 'apollo-cache-inmemory';
const httpLink = new Apollo.HttpLink({
  uri: 'http://192.168.50.82:7002/graphql',
  fetch:fetch,
  /* 其中./v1是我在vue的config中配置时解决跨域时起的代理一个名字，后面的是后端
 暴露接口方法的地址 */
  credentials: 'same-origin',
  /* 这个属性的意思是在同源的情况下携带cookie,因为vue-apollo本身发送的是一个fetch请求，所以在发送请求时不会自动携带cookie，所以我们需要加上此属性 */
});
const apolloClient = new Apollo.ApolloClient({
  link: httpLink,
  cache: new Apollo.InMemoryCache(),
  connectToDevTools: true,
});

注释的部分 是楼主第一次尝试的时候写的  后来就引入 这2个就够了

然后定义2个 base方法 一个query  一个  mutation

 

async gqlQuery(config) {
    const res = await apolloClient.query(config)
    return res.data
  }

  async gqlMutation(config) {
   const res = await apolloClient.mutate(config)
   return res.data
  }

然后 引入 gql    

const gql = require('graphql-tag')

//获取首页数据
        // console.info('*************11111111***************')
        // const testQuery = gql `query Query{
        //   test
        // }`
        // const r1 = await this.gqlQuery({
        //     query:testQuery
        // })
        // console.info(r1)
        // console.info('*************22222222***************')

        // console.info('*************11111111***************')
        // const testLogin = gql `query login($username:String!,$pwd:String!){
        //     login(username:$username,pwd:$pwd){
        //        status
        //        errorCode
        //        msg
        //     }
        // }`
        // const variables = {
        //     username:'gq',
        //     pwd:'123'
        // }
        // const r1 = await this.gqlQuery({
        //     query:testLogin,
        //     variables
        // })
        // console.info(r1)
        // console.info('*************22222222***************')

        const testCreateUser = gql`mutation createUser($name:String,$userAvatar:String,$vip:Int){
            createUser(name:$name,userAvatar:$userAvatar,vip:$vip){
              errorCode
              status
              msg
            }
        }`
        const variables = {
            vip:1,
            name:'1',
            userAvatar:'1',
        }
        const r3 = await this.gqlMutation({
            mutation: testCreateUser,
            variables
        })

大功告成  完结