Vue-apollo — 在Vue-cli項(xiàng)目中使用Graphql
Vue-apollo — Integrates apollo in your Vue components with declarative queries.
當(dāng)然我們可以通過直接在url中攜帶參數(shù)直接請求署辉，這樣太過麻煩。vue-apollo為我們提供了一整套解決方案哥攘，可以解決大部分問題。
本篇文章將介紹如何在你的vue-cli項(xiàng)目中簡單使用vue-apollo和一些目前遇到的小坑逝淹。
安裝
npm install --save vue-apollo graphql apollo-client apollo-link apollo-link-http apollo-cache-inmemory graphql-tag
創(chuàng)建ApolloClient實(shí)例, 安裝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提供的代理, 這里同樣適用.
創(chuàng)建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目錄中創(chuàng)建新的js文件, 并在 quasar.conf.js 中加入它.
打開創(chuàng)建好的文件:
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中必須提前創(chuàng)建apollo中相應(yīng)字段且字段名必須相同.
通過gql創(chuàng)建graphql字符串, 特別注意:使用 query(){return gql`` } 用來創(chuàng)建需要計(jì)算得到的字符串, 如字符串中攜帶${this.hello}等. 純字符串可用query:gql``直接創(chuàng)建.
當(dāng)用于動態(tài)創(chuàng)建的gql字符串的變量發(fā)生改變時, apollo客戶端會自動重新發(fā)起query請求.
loadingKey指定data中創(chuàng)建的字段, 用于表示狀態(tài),loadingKey應(yīng)為初始值為0的整數(shù). 處于加載狀態(tài)時會執(zhí)行loadingKey++操作, 加載結(jié)束會執(zhí)行loadingKey—操作.
其余字段:
skip()
返回true時不進(jìn)行查詢. 同樣也可以在其他代碼段中單獨(dú)指定: this.$apollo.queries.<$name>.skip = true
manual
返回true時進(jìn)行手動結(jié)果處理,此時apollo可以不具有與data中相同的變量名. query請求得到的結(jié)果不會綁定到data中的變量中.
result()
與manual配合使用, 對結(jié)果進(jìn)行處理. 注意:并不是返回處理后的結(jié)果, 而是得到結(jié)果手動進(jìn)行某些需要的操作.
update()
對query請求得到的結(jié)果進(jìn)行處理并返回, 一般用于格式化請求的結(jié)果.
mutation
隨時使用, 不需要提前聲明或定義. 請求結(jié)果為一個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``} 這樣的操作, 所以計(jì)算屬性需要通過 variables傳入. 當(dāng)然這種方法也適用于query: 同樣, 在變量發(fā)生改變時,客戶端會自動發(fā)起query請求.
數(shù)據(jù)更新
一般的, 在組件創(chuàng)建時會發(fā)起一次query請求. 如果需要重新請求數(shù)據(jù):this.$apollo.queries.<$name>.refetch()
如 this.$apollo.queries.hello.refetch() 請求指定字段.
請求發(fā)起后loadingKey也將重新計(jì)算.
