vue结合Graphql
安装依赖
yarn add vue-apollo graphql apollo-boost graphql-tag
创建实例
import ApolloClient from 'apollo-boost'
const apolloClient = new ApolloClient({
// 你需要在这里使用绝对路径
uri: 'http://localhost:4000/graphql'
})
export default apolloClient
安装插件到 Vue
import VueApollo from 'vue-apollo'
import apolloClient from './client'
Vue.use(VueApollo)
const apolloProvider = new VueApollo({
defaultClient: apolloClient,
})
new Vue({
router,
store,
apolloProvider, //注册
render: h => h(App)
}).$mount('#app')
使用
- 查询:
这里有两种,一种是带参数的,第二种属于不带参数的查询:
//不带参数的查询
//query的index文件
import gql from 'graphql-tag'
export let movies = gql`query{
movies{
id
title
genres
rating
}
}`
//App.vue文件
import { movies } from './graphql/query'
export default {
data(){
return{
movies:[]
}
},
apollo:{
movies
},
}
//这里注意两个地方:
① 组件在首次加载的时候首先会获取一次请求,所以我们不用做任何操作就会发现data中含有数据。
② 是apollo里面对应的字段必须在data的对象中有一个相同名字,为什么:因为当组件开始加载的时候就首先会触发一次请求获取数据,我们会发现获取到的数据{data:{movies:...}}这种结构,其中里面的movies对应data里面的movies,所以不会做任何操作就会赋值到data中。
带参数并且data中的字段和query中的字段是不相同的:
//query的index文件
import gql from 'graphql-tag'
export let hello = gql`query ($name:String){
hello(name:$name)
}`
//App.vue文件
import { hello } from './graphql/query/hello.js'
export default {
data(){
return{
title:"",//注意看这里和hello中的query的字段是不一样的,所以如果我们按照第一种不带参数的写法会发现会报错。
}
},
mounted(){
this.getName()
},
methods:{
getName(){
//addSmartQuery 手动添加一个智能查询
this.$apollo.addSmartQuery('hello',{
query:hello,
//variables 用来传递参数
variables:{
name:"xinxin"
},
result(res){
//我们在result中获取
this.title = res.data.hello
},
})
}
}
}
//这里注意的地方除了以上添加的内容之外还有
addSmartQuery 中的第一个参数一定要和query中的字段名对应,不然报Missing xxx attribute on result
//这样我们就完成了一个带参数的查询,并且是自己想什么时候查询就什么时候查询,并且是data中的字段和query中的字段是不同的操作
- 变更
变更操作主要是增删改的操作,相对应schema的mutation字段
import gql from 'graphql-tag'
export let addmovie =gql`mutation ($title:String!,$genres:String!,$rating:Float,$theater:Int){
insert(title:$title,genres:$genres,rating:$rating,theater:$theater){
title,
genres,
rating,
theater
}
}`
addMovie(){
this.$apollo.mutate({
// 查询语句
mutation: addmovie,
// 参数
variables: {
title:"英伦对决",
genres:"悬疑,热血,男神",
rating:8.8,
theater:2
},
}).then((res)=>{
console.log(res)
}).catch(error=>{
console.log(error)
})
}
//这里目前来说是没有什么要说的点。。还没有遇到高危操作