Vue-apollo — 在Vue-cli项目中使用Graphql
Vue-apollo — Integrates apollo in your Vue components with declarative queries.
当然我们可以通过直接在url中携带参数直接请求，这样太过麻烦。vue-apollo为我们提供了一整套解决方案，可以解决大部分问题。
本篇文章将介绍如何在你的vue-cli项目中简单使用vue-apollo和一些目前遇到的小坑。
安装
npm install --save vue-apollo graphql apollo-client apollo-link apollo-link-http apollo-cache-inmemory graphql-tag
创建ApolloClient实例, 安装VueApollo插件
import Vue from 'vue'
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({
// You should use an absolute URL here
uri: 'http://localhost:3020/graphql',
})
// Create the apollo client
const apolloClient = new ApolloClient({
link: httpLink,
cache: new InMemoryCache(),
connectToDevTools: true,
})
// Install the vue plugin
Vue.use(VueApollo)
如果你开启了vue-cli提供的代理, 这里同样适用.
创建PROVIDER
就像vue-router与vuex一样, 需要将apolloProvider添加为根组件.
const apolloProvider = new VueApollo({
defaultClient: apolloClient,
})
new Vue({
el: '#app',
provide: apolloProvider.provide(),
render: h => h(App),
})
quasar-cli 中安装
如果你不了解Quasar Framework并且不打算使用, 这段可以跳过.
在plugins目录中创建新的js文件, 并在 quasar.conf.js 中加入它.
打开创建好的文件:
import {ApolloClient} from 'apollo-client'
import {HttpLink} from 'apollo-link-http'
import {InMemoryCache} from 'apollo-cache-inmemory'
import VueApollo from 'vue-apollo'
// Create the apollo provider
const apolloProvider = new VueApollo({
defaultClient: new ApolloClient({
link: new HttpLink({
// You should use an absolute URL here
uri: 'http://localhost:3020/graphql',
}),
cache: new InMemoryCache(),
connectToDevTools: true
})
})
// leave the export, even if you don't use it
export default ({ app, Vue }) => {
// something to do
Vue.use(VueApollo)
app.provide = apolloProvider.provide()
}
使用
query
需要提前在组件中定义graphql字符串.
<script>
import gql from "graphql-tag";
export default {
data() {
return {hello:'',loading:0};
},
apollo: {
hello: {
query() {
return gql`{hello}`
},
loadingKey: "loading"
}
}
};
</script>
data中必须提前创建apollo中相应字段且字段名必须相同.
通过gql创建graphql字符串, 特别注意:使用 query(){return gql`` } 用来创建需要计算得到的字符串, 如字符串中携带${this.hello}等. 纯字符串可用query:gql``直接创建.
当用于动态创建的gql字符串的变量发生改变时, apollo客户端会自动重新发起query请求.
loadingKey指定data中创建的字段, 用于表示状态,loadingKey应为初始值为0的整数. 处于加载状态时会执行loadingKey++操作, 加载结束会执行loadingKey—操作.
其余字段:
skip()
返回true时不进行查询. 同样也可以在其他代码段中单独指定: this.$apollo.queries.<$name>.skip = true
manual
返回true时进行手动结果处理,此时apollo可以不具有与data中相同的变量名. query请求得到的结果不会绑定到data中的变量中.
result()
与manual配合使用, 对结果进行处理. 注意:并不是返回处理后的结果, 而是得到结果手动进行某些需要的操作.
update()
对query请求得到的结果进行处理并返回, 一般用于格式化请求的结果.
mutation
随时使用, 不需要提前声明或定义. 请求结果为一个promise.
this.$apollo.mutate({
// Query
mutation: gql`mutation ($label: String!) {
addTag(label: $label) {
id
label
}
}`,
// Parameters
variables: {
label: this.newTag,
}
}).then(data=>{
console.log(data)
}).catch(error=>{
console.log(error)
})
并没有mutation(){return gql``} 这样的操作, 所以计算属性需要通过 variables传入. 当然这种方法也适用于query: 同样, 在变量发生改变时,客户端会自动发起query请求.
数据更新
一般的, 在组件创建时会发起一次query请求. 如果需要重新请求数据:this.$apollo.queries.<$name>.refetch()
如 this.$apollo.queries.hello.refetch() 请求指定字段.
请求发起后loadingKey也将重新计算.
