Vue-apollo — 在Vue-cli項(xiàng)目中使用Graphql

TIGERB 發(fā)布于2019-08-22 15:36 / 2593人閱讀

摘要：在項(xiàng)目中使用當(dāng)然我們可以通過(guò)直接在中攜帶參數(shù)直接請(qǐng)求，這樣太過(guò)麻煩。為我們提供了一整套解決方案，可以解決大部分問(wèn)題。本篇文章將介紹如何在你的項(xiàng)目中簡(jiǎn)單使用和一些目前遇到的小坑。

Vue-apollo — 在Vue-cli項(xiàng)目中使用Graphql

Vue-apollo  — Integrates apollo in your Vue components with declarative queries.

當(dāng)然我們可以通過(guò)直接在url中攜帶參數(shù)直接請(qǐng)求，這樣太過(guò)麻煩。vue-apollo為我們提供了一整套解決方案，可以解決大部分問(wèn)題。

本篇文章將介紹如何在你的vue-cli項(xiàng)目中簡(jiǎn)單使用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并且不打算使用, 這段可以跳過(guò).

在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字符串.

data中必須提前創(chuàng)建apollo中相應(yīng)字段且字段名必須相同.

通過(guò)gql創(chuàng)建graphql字符串, 特別注意:使用 query(){return gql` } 用來(lái)創(chuàng)建需要計(jì)算得到的字符串, 如字符串中攜帶${this.hello}等. 純字符串可用query:gql` 直接創(chuàng)建.

loadingKey指定data中創(chuàng)建的字段, 用于表示狀態(tài), loadingKey應(yīng)為初始值為0的整數(shù). 處于加載狀態(tài)時(shí)會(huì)執(zhí)行loadingKey++操作, 加載結(jié)束會(huì)執(zhí)行loadingKey—操作.

mutation

隨時(shí)使用, 不需要提前聲明或定義. 請(qǐng)求結(jié)果為一個(gè)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ì)算屬性需要通過(guò) variables`傳入. 當(dāng)然這種方法也適用于query.

數(shù)據(jù)更新

一般的, 在組件創(chuàng)建時(shí)會(huì)發(fā)起一次query請(qǐng)求. 如果需要重新請(qǐng)求數(shù)據(jù):this.$apollo.queries.<$name>.refetch()

如 this.$apollo.queries.hello.refetch() 請(qǐng)求指定字段.

請(qǐng)求發(fā)起后loadingKey也將重新計(jì)算.