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` 直接建立.

loadingKey指定data中建立的字段, 用于示意状况, loadingKey应为初始值为0的整数. 处于加载状况时会实行loadingKey++操纵, 加载完毕会实行loadingKey—操纵.

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要求. 假如须要从新要求数据:this.$apollo.queries.<$name>.refetch()

如 this.$apollo.queries.hello.refetch() 要求指定字段.

要求提议后loadingKey也将从新盘算.