Vue中使用vue-apollo模块操作GraphQl服务器api接口

 GraphQL是一种新的API 的查询语言，它提供了一种更高效、强大和灵活API 查询。它是由Facebook开发和开源，目前由来自世界各地的大公司和个人维护。GraphQL 对你的 API 中的数据提供了一套易于理解的完整描述，使得客户端能够准确地获得它需要的数据，而且没有任何冗余。它弥补了RESTful API（字段冗余，扩展性差、无法聚合api、无法定义数据类型、网络请求次数多）等不足。

注意：GraphQL是api的查询语言，而不是数据库。从这个意义上说，它是数据库无关的，而且可以在使用API的任何环境中有效使用，我们可以理解为GraphQL是基于API之上的一层封装，目的是为了更好，更灵活的适用于业务的需求变化。 


GraphQL视频教程: https://www.itying.com/goods-1061.html


下面我们看看 Vue中获取GraphQl Server API

一、Vue中集成vue-apollo 操作GraphQl Api接口


1、找到Vue中集成GraphQl的文档


https://github.com/Akryum/vue-apollo

https://vue-apollo.netlify.com/

2、安装相应的模块

Apollo Boost 是一种零配置开始使用 Apollo Client 的方式。它包含一些实用的默认值，例如我们推荐的 InMemoryCache 和 HttpLink，它非常适合用于快速启动开发。
将它与 vue-apollo 和 graphql 一起安装：

 

npm install vue-apollo graphql apollo-boost --save

3、在src/main.js中引入apollo-boost模块 并实例化ApolloClient

import ApolloClient from 'apollo-boost'

const apolloClient = new ApolloClient({
  // 你需要在这里使用绝对路径
  uri: 'http://localhost:3000/graphql'
})

4、在src/main.js配置vue-apollo插件

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

5、创建  Apollo provider

Provider 保存了可以在接下来被所有子组件使用的 Apollo 客户端实例。

const apolloProvider = new VueApollo({
  defaultClient: apolloClient,
})

6、使用 apolloProvider 选项将它添加到你的应用程序：

new Vue({
  el: '#app',
  // 像 vue-router 或 vuex 一样注入 apolloProvider
  apolloProvider,
  render: h => h(App),
})

二、Vue中使用GraphQl查询 Server Api



1、vue简单查询GraphQl数据

组件加载的时候就会去服务器请求数据，请求的数据会放在navList这个属性上面，
在模板中可以直接使用当前属性
import gql from 'graphql-tag';


    export default{
        data(){
            return {               
               msg:'我是一个home组件'
            }
        },
        apollo: {
            // 简单的查询，将更新 'hello' 这个 vue 属性
            navList: gql`query {
                navList{
                    title
                }
            }`
        },
    }

另一种写法：

import gql from 'graphql-tag';
    export default{
        data(){
            return {               
               msg:'我是一个home组件'
            }
        },
        apollo: {
            // 注意方法名称 和 查询的名称对应
            navList(){
                return{
                    query:gql`query {
                        navList{
                            title
                        }
                    }`
                }
            }
        }
}    
}

2、vue高级查询执行事件获取GraphQl服务器数据

    
 import gql from 'graphql-tag';
   var navListGql=gql`{
            navList {
                title
                url
            }
    }`;

    export default{
        data(){
            return {               
               navList:[]             
            }
        }, 
        methods: {
            getData(){
               this.$apollo.addSmartQuery('navList', {
                    query:navListGql,
                    result ({ data, loading, networkStatus }) {
                         console.log({ data, loading, networkStatus })
                    },
                     // 错误处理
                    error (error) {
                         console.error('We\'ve got an error!', error)
                    }
               });
            }
        }
    }


3、Vue获取 GraphQl数据并进行传参查询


import gql from 'graphql-tag';


    export default{
        data(){
            return {               
               articleList:[]
            }
        },
        apollo: {
           
            articleList(){
                return{


                    query:gql`query($page:Int!){
                        articleList(page:$page){
                            title
                        }
                    }`,
                    variables: {
                        page: 1
                    }
                }
            }
        }
    }

4、vue通过js高级查询GrapQl服务器数据并 传参
 import gql from 'graphql-tag';
   var articleListGql=gql`query($page:Int!){
                        articleList(page:$page){
                            title
                        }
    }`;


    export default{
        data(){
            return {               
               articleList:[]             
            }
        }, 
        methods: {
            getData(){
               this.$apollo.addSmartQuery('articleList', {
                    query:articleListGql,
                    variables: {
                        page: 2
                    },
                    result ({ data, loading, networkStatus }) {
                         console.log({ data, loading, networkStatus })
                    },
                     // 错误处理
                    error (error) {
                         console.error('We\'ve got an error!', error)
                    }
               });
            }
        }
    }

5、Vue通过api更新GraphQl数据

变更是在你的 apollo 服务端更改你的数据状态的查询。使用 this.$apollo.mutate() 来发送一个 GraphQL 变更。 


  methods:{
    addData(){


// alert('addData');


this.$apollo.mutate({
// 查询语句
mutation: gql`mutation ($title: String!,$description: String!) { 
addNav(title:$title,description:$description){
     title
}                            
}`,
// 参数
variables: {
    title: '测试导航22',
    description: 'vue测试导航22'
}, 
refetchQueries: [{    //更新完成执行的操作  
    query: navListQuery
    // variables: { repoFullName: 'apollographql/apollo-client' },
}]
      
    }).then((data) => {
// 结果
console.log(data)                         


    }).catch((error) => {
// 错误
  console.error(error);
    })
    }
}