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

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

一、对原来的express返回graphql项目修改

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

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

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

二、在vue中集成graphql

1、

2、安装依赖包

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

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

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

三、查询数据

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

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

2、apollo中使用函数来调用

3、点击按钮获取数据

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

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

四、对查询数据方法改进

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

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

五、使用mutation添加数据

具体实现代码见下面

六、优化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创建关于查询的接口

3、在vue中引入

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

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

6、处理数据不刷新

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

7、本章节整体的效果图

8、本小节的代码

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