vue2.x 中使用vue-apollo集成graphql

目前graphql用的已经很多了，这里给大家介绍如何在vue中集成graphql的插件vue-apollo，网上有好多，都是比较老的版本了，还要配置webpack，比较麻烦。

源码我放在了coding上，可以直接下载 访问代码仓库地址， 后端springboot整合graphql的案例的博客，请参考我的另一篇文章点击访问

安装如下依赖

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

1.在src下新建apollo.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: 'http://localhost:8085/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 },
})

2.修改main.js

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


new Vue({
  router,
  store,
  provide: apolloProvider.provide(),
  render: h => h(App)
}).$mount('#app')

3.新建schema的js文件

后台的schema文件格式如下

type Query {
    bookById(id: ID): Book
}

type Book {
    id: ID
    name: String
    pageCount: Int
    author: Author
}

type Author {
    id: ID
    firstName: String
    lastName: String
}

我们根据后台的格式新建book.js

import { gql } from "apollo-boost"

export const GET_BOOK = gql`
    query ($id:ID){
        bookById(id: $id) {
           name
        }
    }
`

4.查询应用

    import { GET_BOOK } from "@/graphql/book.js";

    export default {
        name: 'HelloWorld',
        data(){
            return {
                bookName: ''
            }
        },
        mounted(){
            this.$apollo.query({
                query: GET_BOOK,
                variables: {
                    id: 'book-2'
                },
                fetchPolicy: 'network-only',
            }).then(({data}) => {
                this.bookName = data.bookById.name
                console.log(data.bookById.name)
            }).catch(({err}) => {
                console.log(err)
            })
        }
    }