vue+graphql實踐

graphql提供了5種标量：

Int：32位有符号整型，超出精度範圍後，引擎會抛出異常

Float：有符号雙精度浮點數，超出精度範圍後，引擎會抛出異常

String：字元串，用于表示 ​

​UTF-8​

​ 字元序列

Boolean：布爾值，

ID：資源唯一辨別符

首先是後端

const koa=require('koa')
const app=new koa();
const cors=require('koa2-cors')
app.use(cors())
var graphqlHTTP=require('koa-graphql')
const mount=require('koa-mount')
const Router=require('koa-router')
const router=new Router()

const {GraphQLObjectType,
    GraphQLString,
    GraphQLInt,
    GraphQLList,
    GraphQLSchema,
    GraphQLID
    }=require('graphql');


var navSchema=new GraphQLObjectType({
    name:'nav',
    fields:{
        id:{type:GraphQLID},
        url:{type:GraphQLString},
        age:{type:GraphQLInt}
    }
})
var root=new GraphQLObjectType({
    name:'root',
    fields:{
        navList:{type:new GraphQLList(navSchema),
               async resolve(parent,args){
                   console.log(parent)
                   console.log(args)
                   return[{id:'xx',url:'xx',age:10},{id:'xx',url:'xx',age:10}]
               }
                }
    }
})

var schema=new GraphQLSchema({query:root})
app.use(mount('/graphql',graphqlHTTP({schema:schema,graphiql:true})))

app.use(router.routes())
app.use(router.allowedMethods())
app.listen(4000,()=>{
    console.log('監聽端口号')
})      

然後是前端

import Vue from 'vue'
import VueApollo from 'vue-apollo'
import ApolloClient from 'apollo-boost'
import App from './App.vue'
import VueRouter from 'vue-router'
import router from './router'
const apolloClient=new ApolloClient({uri:'http://localhost:4000/graphql'})

const apolloProvider=new VueApollo({defaultClient:apolloClient})
Vue.use(VueApollo)
Vue.use(VueRouter)
Vue.config.productionTip = false
console.log(apolloProvider)
new Vue({
    apolloProvider,
    router,
    render: h => h(App),
}).$mount('#app')      

查詢

import gql from 'graphql-tag'
 export default {

  apollo:{navList: gql`{navList{url}}`
   
  },
  mounted(){
    console.log(this.navList)
  },
 }      

還可以在方法上定義，還可以傳遞參數

var articleSchema=new GraphQLObjectType({
                                            name:'article',
                                        fields:{name:{type:GraphQLString},
                             text:{type:GraphQLString}
                             }
                                            })
var navSchema=new GraphQLObjectType({
    name:'nav',
    fields:{
        id:{type:GraphQLID},
        url:{type:GraphQLString},
        age:{type:GraphQLInt}
    }
})
var root=new GraphQLObjectType({name:'root',
                               fields:{
                                 navList:{type:new GraphQLList(navSchema),
                                         args:{_id:{type:new GraphQLNonNull(GraphQLString)}},
                                         async resolve(parent,args){
                                                console.log(args)//參數
                                            return [{id:'1',url:'xx',arg:10}]
                                         } 
                                         }
                                 article:{type:articleSchema,
                                         async resolve(){return {name:'hello',text:'123456'}}
                                         }}
                               })
var schema=new GraphQLSchema({query:root})
app.use(mount('/graphql',graphqlHttp({schema:schema,graphiql:true})))
app.use(router.routes())
app.use(router.allowedMethods())
app.listen(4000,()=>{
    console.log('監聽端口号')
})      

前端查詢

this.$apollo.query({query:gql`query{article{name,text}}`}).then(data=>{console.log(data)})
     
this.$apollo.query({query:gql`query($_id:String!){navList(_id:$_id){url}}`,variables:{_id:'xx'}})
  .then(data=>{console.log(data)})