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

头像
码农笔录
2019-04-17阅读 465

目前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)
})
}
}


1135473766: 请教一下,schema.js 这个文件是前端写的吗?主要就是加入graphql后,前后端交互这块不太明白,以往就是后端给前端一个接口路径,请求参数,返回参数,现在后端需要做什么调整吗? 回复