vue使用Graphql 接口Apollo 请求完整流程_apollo-boost

为什么使用graphql 接口

相较于流行的RESTful接口，graphql接口对于前端工程师使用查询是相当灵活的，后端工程师可以不用考虑前端的需求，可以将所有的基于对应的实体数据都定义出来，前端可以根据自己的需求增删组合查询字段，已实现多样化的需求。
这里查询graphql接口的方法，我使用的是第三方的库Apollo。Apollo的详细使用说明可查看Apollo官方文档。

下载依赖

npm i apollo-boost graphql graphql-tag graphql-tools
1

全局导入apollo服务

// 导入apollo-boost模块实例化AolloClient
import ApolloClient from 'apollo-boost';
import VueApollo from 'vue-apollo'

// 全局使用
Vue.use(VueApollo);

// 请求graphql使用的apollo API
const apolloClient = new ApolloClient({
  // 服务端Url
  uri: '/animal/graphql',  // 
});

// 需要使用多个url时需要增加client(其他url)
const otherApolloClient = new ApolloClient({
  uri: '/dog/graphql'
});

//创建apollo实例对象
const apolloProvider = new VueApollo({
  //当不需要使用多个url时可以省略clients
  clients: {
    default: apolloClient,
    other: otherApolloClient, //
  },
  defaultClient: apolloClient, //默认查询
})

new Vue({
  router,
  store,
  render: h => h(App),
  // 将apollo挂载到应用
  apolloProvider,
}).$mount('#app')
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

页面中调用接口

创建目录

首先我们需要创建相应的文件目录
vue的api文件夹是专门用于存放后端接口查询语句的，这里我们也遵循这一规范。

配置文件识别

需要注意的是vue本身是无法识别.graphql文件的，我们需要在vue.config.js中进行相应的配置。
vue.config.js是vue在打包编译时会自动加载的文件，如果项目中没有我们可以直接在根目录下创建一个vue.config.js文件。

// 配置识别.graphgl文件
module.exports = { 
    configureWebpack: {
      module: {
        rules: [ // or "loaders" for webpack 1.x
          { test: /\.graphql|gql?$/, 
          exclude: /node_modules/,
          loader: 'graphql-tag/loader' }
        ]
      },
    }
}
1
2
3
4
5
6
7
8
9
10
11
12

查询语句的编写

在刚才创建的animal.graphql中

   query queryAnimalList{
    findAllTypeAnimal {
        # 详细信息
        detail{
            id #id
            name 
            sex
        }
        # 类型
        type {
            id #id
            typeName 
        }
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

由于vscode本身无法识别graphql的语法，所以整个查询语句都是单色的，看起来不是很舒服，这里我们可以去下载插件。

现在看起来就舒服多了。

调用接口

import { queryAnimalList } from '@/api/graphql/queryAniml.graphql'

export default {
  methods:{
    getAnimalList(){
      this.$apollo.query({
        query: queryAnimalList,
      }).then(res => {
        console.log(res);
      })
    }
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13

这样我们就完成了一个最简单的接口调用，但这样的查询并不一定完成我们的全部需求。
最需要注意的一点，使用Apollo调用graphql是有缓存的，当整个页面未关闭的情况下，只要检测到了接口已经调用过并且成功取到值的情况，反复调用是不会生效的，包括在路由切换的情况下。

所以我们需要再其中加上属性fetchPolicy: 'no-cache'，这样就可以防止无法在页面刷新时重新调用的情况了。

getAnimalList(){
      this.$apollo.query({
        fetchPolicy: 'no-cache',
        query: queryAnimalList,
      }).then(res => {
        console.log(res);
      })
    }
1
2
3
4
5
6
7
8

url不同时

需要添加client,值为在main.js中设置过的client名

getAnimalList(){
      this.$apollo.query({
        fetchPolicy: 'no-cache',
        client: 'other' 
        query: queryAnimalList,
      }).then(res => {
        console.log(res);
      })
    }
1
2
3
4
5
6
7
8
9

传递参数

但只是普通查询也不能满足需求，有的时候需要传递参数
queryDog.graphql

// String代表传递参数的数据类型，后面带感叹号表示此条参数必填
query queryDog($master: String!,$typeName: String){
    findADog(master: $master,typeName: $typeName) {
        # 详细信息
        detail{
            id #id
            name 
            sex
            nickname
            master
            birthday
        }
        # 类型
        type {
            id #id
            typeName 
            varieties
        }
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

调用带参查询

getDog(master,type){
      this.$apollo.query({
        fetchPolicy: 'no-cache',
        query: queryDog,
        varibles: {
          master, //如果页面传递进来的参数值与参数变量名相同可以省略
          typeName: type
        }
      }).then(res => {
        console.log(res);
      })
    },
1
2
3
4
5
6
7
8
9
10
11
12