详解在vue-cli中使用graphql即vue-apollo的用法

下面我将详细讲解vue-cli中使用graphql及vue-apollo的用法。具体步骤如下：

环境准备

在使用vue-cli和vue-apollo之前，需要先安装Node.js和npm。这里推荐使用最新版本的Node.js和npm。

安装vue-cli

Vue-cli是Vue.js官方提供的工具，用于快速搭建Vue.js项目。通过vue-cli可以帮助我们快速创建Vue.js项目的基础架构。

打开终端，运行以下命令来安装vue-cli：

npm install -g vue-cli

安装完成后，可以通过以下命令来检查是否安装成功：

vue -V

如果能够输出版本号，则说明安装成功。

创建新项目

使用vue-cli来创建一个新的Vue.js项目：

vue create my-project

在创建项目的过程中，会让你选择一些选项，包括需要安装哪些插件，选择eslint的配置等。
安装成功后，可以进入项目根目录，使用以下命令来启动项目：

npm run serve

安装vue-apollo

在终端中，进入项目根目录，并运行以下命令：

npm install vue-apollo apollo-boost graphql --save

等待安装完成后，在项目中，新建一个src/apollo.js文件，并添加以下内容：

import Vue from 'vue'
import VueApollo from 'vue-apollo'
import ApolloClient from 'apollo-boost'

Vue.use(VueApollo)

const apolloClient = new ApolloClient({
  // 替换自己的graphql接口地址
  uri: 'http://localhost:3000/graphql',
  request: async operation => {
    operation.setContext({
      headers: {
        // 替换自己的Token
        authorization: `Bearer <TOKEN>`
      }
    })
  }
})

const apolloProvider = new VueApollo({
  defaultClient: apolloClient
})

export default apolloProvider

其中，uri需要替换成你的graphql接口地址。authorization需要替换成你的Token。

使用apolloProvider提供的数据

通过上述步骤完成后，就可以在Vue.js项目中使用Apollo Client来请求GraphQL数据。

在Vue.js组件中使用Apollo Client：

<template>
  <div>
    <div v-for="(user, index) in users" :key="index">
      {{ user.id }} - {{ user.name }}
    </div>
  </div>
</template>

<script>
import gql from 'graphql-tag'
import { mapGetters } from 'vuex'

export default {
  name: 'MyComponent',

  data() {
    return {
      users: []
    }
  },

  apollo: {
    users: gql`
      query {
        users {
          id
          name
        }
      }
    `
  }
}
</script>

在Vuex store中使用Apollo Client：

import gql from 'graphql-tag'

const state = {
  users: []
}

const actions = {
  async getUsers({ commit }) {
    const response = await this._vm.$apollo.query({
      query: gql`
        query {
          users {
            id
            name
          }
        }
      `
    })
    commit('SET_USERS', response.data.users)
  }
}

const mutations = {
  SET_USERS(state, users) {
    state.users = users
  }
}

export default {
  namespaced: true,
  state,
  actions,
  mutations
}

示例说明

示例一

在Vue.js组件中使用Apollo Client请求数据。

在Vue.js项目中创建一个src/components/MyComponent.vue文件，并添加以下内容：

<template>
  <div>
    <div v-for="(user, index) in users" :key="index">
      {{ user.id }} - {{ user.name }}
    </div>
  </div>
</template>

<script>
import gql from 'graphql-tag'

export default {
  name: 'MyComponent',

  data() {
    return {
      users: []
    }
  },

  apollo: {
    users: gql`
      query {
        users {
          id
          name
        }
      }
    `
  }
}
</script>

在src/main.js中，添加以下内容：

import Vue from 'vue'
import App from './App.vue'
import apolloProvider from './apollo'

Vue.config.productionTip = false

new Vue({
  apolloProvider,
  render: h => h(App)
}).$mount('#app')

启动项目，在浏览器中，可以看到已经成功获取到GraphQL返回的数据了。

示例二

在Vuex store中使用Apollo Client。

在Vue.js项目中创建一个src/store/user.js文件，并添加以下内容：

import gql from 'graphql-tag'

const state = {
  users: []
}

const actions = {
  async getUsers({ commit }) {
    const response = await this._vm.$apollo.query({
      query: gql`
        query {
          users {
            id
            name
          }
        }
      `
    })
    commit('SET_USERS', response.data.users)
  }
}

const mutations = {
  SET_USERS(state, users) {
    state.users = users
  }
}

export default {
  namespaced: true,
  state,
  actions,
  mutations
}

在src/store/index.js中，导入user.js并添加到Vuex store中：

import Vue from 'vue'
import Vuex from 'vuex'
import user from './user'

Vue.use(Vuex)

export default new Vuex.Store({
  modules: {
    user
  }
})

在Vue.js组件中，使用Vuex来获取数据：

<template>
  <div>
    <div v-for="(user, index) in users" :key="index">
      {{ user.id }} - {{ user.name }}
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'

export default {
  name: 'MyComponent',

  computed: {
    ...mapGetters('user', ['users'])
  },

  created() {
    this.$store.dispatch('user/getUsers')
  }
}
</script>