vue中对接Graphql接口的实现示例

更新时间：2021年05月28日 08:32:40 作者：水痕001

本文主要介绍了vue中对接Graphql接口的实现示例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

说明: 本文是本人正在搞nestjs+graphql+serverless训练营中对Graphql讲解的基础知识点，可能有点前后没对接上,文中提到的Graphql授权也是下小节介绍的

一、对原来的Express返回Graphql项目修改

本章节使用的代码是express返回Graphql的代码，在使用前要先对代码进行基本的配置，比如处理跨域问题(Graphql本质也是发送一个http请求，既然是这样在vue项目中自然存在跨域的问题，需要先处理)

1、安装跨域的包,并且配置中间件

npm install cors

const cors = require('cors');
// 处理跨域请求
app.use(cors());

2、配置获取请求体的中间件

// 处理请求
app.use(express.json());//express.json=bodyParser.json
app.use(express.urlencoded({ extended: true }));

二、在vue中集成Graphql

1、参考文档地址

2、安装依赖包

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

3、在 src/main.js中引入 apollo-boost模块并实例化 ApolloClient

import ApolloClient from 'apollo-boost'
...
const apolloClient = new ApolloClient({ 
  // 你需要在这里使用绝对路径,这里就不区分环境开发了 
  uri: 'http://localhost:8000/graphql',
});
...

4、在 src/main.js 配置 vue-apollo 插件

import VueApollo from 'vue-apollo' 
Vue.use(VueApollo);

5、创建Apollo provider提供者，并且挂载到应用中

import Vue from 'vue'
import App from './App.vue'
import ApolloClient from 'apollo-boost'
import VueApollo from 'vue-apollo' 
Vue.use(VueApollo);

Vue.config.productionTip = false

const apolloClient = new ApolloClient({ 
  // 你需要在这里使用绝对路径 
  uri: 'http://localhost:8000/graphql',
});
const apolloProvider = new VueApollo({
  defaultClient: apolloClient,
})

new Vue({
  render: h => h(App),
  // 挂载到应用
  apolloProvider,
}).$mount('#app')

三、查询数据

1、使用apollo页面进来就查询数据

根据官方的介绍，只用将apolloProvider挂载到了vue中，在vue的钩子函数中就会多一个属性apollo

<template>
  <div class="about">
    {{accountList}}
  </div>
</template>

import gql from 'graphql-tag';
export default {
  name: 'About',
  apollo: {
    accountList: gql`query {
      accountList {
        id
        username
        password
      }
    }`
  },
}

2、apollo中使用函数来调用

import gql from 'graphql-tag';
export default {
  apollo: {
    accountList () {
      return {
        query: gql`query {
          accountList{ 
            id
            username
            password
            created_at
          }
        }`,
      }
    },
  }
}

3、点击按钮获取数据

import gql from 'graphql-tag';
// 定义查询的schema
const accountListGql = gql`{
  accountList {
    id
    username
    password
  }
}`;

export default {
  data() {
    return {
      tableList: [],
    }
  },
  methods: {
    getTableData() {
      this.$apollo.addSmartQuery('accountList', {
        query: accountListGql,
        result(response) {
          console.log(response);
          const {accountList} = response.data;
          this.tableList = accountList;
        },
        error(error) {
          console.log('请求失败', error);
        }
      })
    }
  }
}

上面的方式也可以换成下面的写法,如果请求的业务不复杂可以这样写，如果复杂就根据上面的方式单独抽取一个schema

...
getTableData() {
  this.$apollo.addSmartQuery('accountList', {
    query: gql`{
      accountList{
        id
        username
        password
      }
    }`,
    result(response) {
      console.log(response);
      const {accountList} = response.data;
      this.tableList = accountList;
    },
    error(error) {
      console.log('请求失败', error);
    }
  })
}
...

4、传递参数的方式请求数据

handleClick (rowData) {
  this.$apollo.addSmartQuery('account', {
    query: gql`
      query($id: ID!) {
        account(id: $id) {
          id
          username
          password
        }
      }
    `,
    variables: {
      id: rowData.id,
    },
    result (response) {
      console.log('查询单条数据', response.data);
    }
  })
}

四、对查询数据方法改进

1、以上的方法可以查询数据，但是不能重复点击按钮，否则就会出现错误

2、改进版查询数据,直接使用query方法来查询

getTableData () {
  this.$apollo.query({
    query: gql`{
      accountList{
        id
        username
        password
      }
    }`,
  }).then(response => {
    console.log(response);
    const { accountList } = response.data;
    this.tableList =accountList;
  })
}

五、使用mutation添加数据

具体实现代码见下面

onSubmit () {
  this.$refs.form.validate(async (valid) => {
    if (valid) {
      console.log(this.form);
      const result = await this.$apollo.mutate({
        mutation: gql`
          mutation addAccount($username: String!, $password: String!) {
            addAccount(username:$username,password: $password)
          }
        `,
        variables: {
          username: this.form.username,
          password: this.form.password,
        }
      });
      console.log('更新结果', result);
    } else {
      // this.$message.error('请添加数据')
      return false;
    }
  })
}

六、优化Graphql请求

1、打开浏览器控制台点击请求Graphql接口的时候你会发现有下面三个参数

2、如果同一个数据或者说variables的值没变动的时候，是不会向后端发起请求的

3、opertionName是什么呢，我相信很多人会有疑问，看到下面两个图，我相信大家就不会疑惑了

这个操作名称就是在你使用query或者mutation的时候的名字，这个命名可以随意命名，一般建议和后端的API操作名保持一致。
这个操作名有什么用呢?我们观察Graphql发送的请求都是同一个url地址，我们在传统的Restful API的时候，我们做登录鉴权或者获取url的时候会就需要获取当前请求的地址，对于Graphql来说，这个操作名也类似这个功能，区分是哪个API来请求的。

七、优化代码

在传统的Restful api请求的时候，我们更倾向于在项目中创建一个services的文件夹来将api请求都放到一起，便于管理，很少将请求都写到vue页面中去的。在graphql中也可以如此操作，只是方式不一样。

1、在项目中创建一个graphql的文件夹，里面存放的类似Restful api的接口请求

2、在src/graphql/accountList.graphql创建关于查询的接口

query AccountList {
  accountList {
    id
    username
    password
  }
}

3、在vue中引入

import AccountList from './../graphql/accountList.graphql';
...
methods: {
  async initTableData () {
    this.tableList = [];
    this.loading = true;
    const { data, loading } = await this.$apollo.query({
      query: AccountList,
    });
    console.log(data, '请求返回数据');
    this.loading = loading;
    this.tableList = data.accountList;
  },
}
...

4、不出意外的话会直接报错，因为vue不能直接识别graphql文件，我们需要使用webpack配置对应加载graphql的loader

5、在项目根目录下创建一个vue.config.js配置loader

module.exports = {
  configureWebpack: (config) => {
    config.module.rules.push({
      test: /\.(graphql|gql)$/,
      exclude: /node_modules/,
      loader: 'graphql-tag/loader'
    })
  },
};

6、处理数据不刷新

上面每次新增数据、删除数据、修改数据，虽然我们调用了initTableData,但是Graphql,并没有到后端，这是因为缓存的问题,需要在查询的时候添加红框圈住的字段就可以做到没次调用的时候，重新更新数据

fetchPolicy: "no-cache",

7、本章节整体的效果图

8、本小节的代码代码下载地址

到此这篇关于vue中对接Graphql接口的实现示例的文章就介绍到这了,更多相关vue对接Graphql接口内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

vue获取组件中元素宽度常用的方法
在Web开发中,获取DOM元素的宽度、高度以及滚动位移是常见的需求,这篇文章主要给大家介绍了关于vue获取组件中元素宽度常用的方法,需要的朋友可以参考下
2024-08-08
vue实现静态页面点赞和取消点赞功能
这篇文章主要为大家详细介绍了vue实现静态页面点赞和取消点赞的功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-02-02
一个vue组件库发布到npm的完整实现过程
工作的时候总是使用别人的npm包,然而我有时心底会好奇自己如何发布一个npm包呢,什么时候自己的包能够被很多人喜欢并使用呢,下面这篇文章主要给大家介绍了关于一个vue组件库发布到npm的相关资料,需要的朋友可以参考下
2022-03-03
详解基于iview-ui的导航栏路径（面包屑）配置
这篇文章主要介绍了详解基于iview-ui的导航栏路径（面包屑）配置,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2019-02-02
vue里面的el-select绑定默认值方式
这篇文章主要介绍了vue里面的el-select绑定默认值方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-09-09
VUE对Storage的过期时间设置,及增删改查方式
这篇文章主要介绍了VUE对Storage的过期时间设置,及增删改查方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2024-02-02
js 实现拖拽排序详情
这篇文章主要介绍了js 实现拖拽排序，拖拽排序对于小伙伴们来说应该不陌生，平时工作的时候，可能会选择使用类似Sortable.js这样的开源库来实现需求。但在完成需求后，大家有没有没想过拖拽排序是如何实现的呢？感兴趣得话一起来看看下面文章得小心内容吧
2021-11-11
一文搞懂vue编译器(DSL)原理
本文主要介绍了一文搞懂vue编译器(DSL)原理，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2023-05-05
浅析Vue.js 中的条件渲染指令
这篇文章主要介绍了Vue.js 中的条件渲染指令，Vue.js 中的条件渲染指令可以根据表达式的值，来决定在 DOM 中是渲染还是销毁元素或组件。本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
2018-11-11
在Vue中实现Excel导出功能(数据导出)
本文分享了如何在前端导出Excel文件,强调了前端导出的即时性、便捷性、灵活性和定制化优势,以及减轻后端服务器负担的特点,详细介绍了ExcelJS和FileSaver.js两个工具库的使用方法和主要功能,最后通过Vue实现了Excel的导出功能
2024-10-10