目前graphql用的已经很多了,这里给大家介绍如何在vue中集成graphql的插件vue-apollo,网上有好多,都是比较老的版本了,还要配置webpack,比较麻烦。
源码我放在了coding上,可以直接下载 访问代码仓库地址, 后端springboot整合graphql的案例的博客,请参考我的另一篇文章点击访问
安装如下依赖
npm install -–save vue-apollo graphql apollo-boost
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 },
})
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')
后台的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
}
}
`
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)
})
}
}