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


Posted in Javascript onSeptember 08, 2018

1、首先我们需要安装一下vue-apollo 具体执行命令如下:

npm install ?save vue-apollo graphql apollo-client apollo-link apollo-link-http apollo-cache-inmemory graphql-tag

2、在我们的项目的根目录下创建一个vueApollo.js文件具体配置如下:

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({
 uri: './v1/assess/api',
 /* 其中./v1是我在vue的config中配置时解决跨域时起的代理一个名字,后面的是后端
 暴露接口方法的地址 */
 credentials: 'same-origin',
 /* 这个属性的意思是在同源的情况下携带cookie,因为vue-apollo本身发送的是一个fetch请求,所以在发送请求时不会自动携带cookie,所以我们需要加上此属性 */
});
const apolloClient = new ApolloClient({
 link: httpLink,
 cache: new InMemoryCache(),
 connectToDevTools: true,
});
export default new VueApollo({
 defaultClient: apolloClient,
 clients: { default: apolloClient },
});

3,接着我们将配置好的js文件引入到man.js中,具体如下:

import Vue from 'vue';
import ElementUI from 'element-ui';
import VueApollo from 'vue-apollo';
import apolloProvider from './apollo';

// Install the vue plugin

// Vue.component('full-calendar', fullCalendar);
Vue.config.productionTip = false;
Vue.use(ElementUI);
Vue.use(VueApollo);

/* eslint-disable no-new */
new Vue({
 el: '#app',
 provide: apolloProvider.provide(),
 //这句代码是我们要和vuex一样,将apolloProvider添加为根组件
 router,
 store,
 template: '<App/>',
 components: { App },
});

准备好这些,我们就可以开始使用了,另外如果有谷歌账号,可以在谷歌的应用商店去下载“Apollo Client Developer Tools”插件,来模拟vue-apollo调用接口,当然你也可以直接看后端的代码,然后看接口的定义

4,然后在项目的根目录下创建一个graphql文件夹,这个文件里面去封装每一个模块所对应的方法,为了代码的简洁,可以每一个模块建立一个js文件,实现接口方法的统一管理,比如说我创建了一个交atemplate.graphql文件,注意这个文件夹下所有的文件后缀名都是.graphql。

首先我们说一下query方式的调用:具体代码如下:

query getAssessTemplateListings($query: String, $state: Int, $page: Int, $pageSize: Int) {
 assessTemplateListings(query: $query, state: $state, page: $page, pageSize: $pageSize) {
 assessTemplates {
  id
  groupId
  name
  description
  state
  createdAt
  updatedAt
 }
 page
 pageSize
 total
 }
}

5,然后将该方法引入到所需要调用的vue文件中引入方式如下:

import { getAssessTemplateListings, stopAssessTemplate } from '@/services/graphql/assessTemplate.graphql';

然后在vue的methods中定义一个方法,最后调用

lodAtemplate() {
  this.$apollo.query({
    query: getAssessTemplateListings,
    variables: {
    state: 1,
    page: this.currentPage,
    pageSize: this.pageSize,
    },
    fetchPolicy: 'network-only',
    /* 如果一个获取数据的列表,在参数没有变化的时候,那我们希望用后台数据的缓存,则需要在请求下方加上 fetchPolicy: 'network-only'来做缓存 */
   }).then(({ data }) => {
    const assessTempalteListings = data.assessTemplateListings;
    consloe.log(assessTempalteListings);
   });
}

 根据我们的需求因为是获取列表的,所以在created方法里面去调用这个方法即

created () {
 this.lodAtemplate();
 }

然后再看一下mutation的用法,封装如下:

mutation stopAssessTemplate($input: StopAssessTemplateInput!) {
 stopAssessTemplate(input: $input) {
 clientMutationId
 }
}

在vue中的使用

stop () {
 this.$apollo.mutate({
  mutation: stopAssessTemplate,
  variables: {
  input: {
   clientMutationId: uuidv1(),
   id: obj.id,
  },
  },
  }).then(() => {
  }).catch((error) => {
  this.$message.error(Util.Comm.graphqlError(error.message));
  });
}

用法我们就说完了,接下来总结一下

1、因为前端采用vue-apollo客户端发送fetch方式的graphql的请求,而fetch请求也有的缺点:fetch只对网络请求报错,对400,500都当做成功的请求,需要封装去处理,所以说对于vue-axios的try,catch是获取不到错误的,Apollo请求超时的问题无法解决,httpLink没有提供timeout的接口,导致无法中断或重连当前请求

2、通过Apollo查询返回的数据是freeze状态,无法修改,可以通过对象浅拷贝或者序列化的方式解冻。这个坑我自己趟过。
因为我要做一个对于某一个模板增加适用模板区域的功能,那么要求是先调用模板详情接口,如果有区域就显示出来,对已有的区域可以做增删改的功能,获取到数据后存在vuex中,当我添加完成后更改vuex的数据报错,意思是不允许更改,解决办法就是在初始化vuex的数据时先深拷贝一份数据存入到vuex中,而不是直接存入,另外建议可以使用lodash.js,因为这个js库集成了很多方法,不用写那么多繁琐的代码

3、再说一下query和mutaionl两种方式解释,按照官方的意思是

  • query:仅获取数据(fetch)的只读请求
  • mutaion:获取数据后还有写操作的请求

我个人认为,vue-apollo中的query方式就类似于Ajax中的get请求,而mutaion就类似于post请求

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript OFFICE控件测试代码
Dec 08 Javascript
使用jQuery的attr方法来修改onclick值
Jul 07 Javascript
JS基于myFocus库实现各种功能的tab选项卡切换效果
Sep 19 Javascript
Bootstrap项目实战之子栏目资讯内容
Apr 25 Javascript
Bootstrap每天必学之警告框插件
Apr 26 Javascript
JS基于构造函数实现的菜单滑动显隐效果【测试可用】
Jun 21 Javascript
AngularJS入门教程之数据绑定用法示例
Nov 01 Javascript
js放到head中失效的原因与解决方法
Mar 07 Javascript
vue使用iframe嵌入网页的示例代码
Jun 09 Javascript
基于Vue2x实现响应式自适应轮播组件插件VueSliderShow功能
May 16 Javascript
vue中filters 传入两个参数 / 使用两个filters的实现方法
Jul 15 Javascript
vue 接口请求地址前缀本地开发和线上开发设置方式
Aug 13 Javascript
在vue项目中集成graphql(vue-ApolloClient)
Sep 08 #Javascript
React Native开发封装Toast与加载Loading组件示例
Sep 08 #Javascript
原生JS实现前端本地文件上传
Sep 08 #Javascript
JS实现可视化文件上传
Sep 08 #Javascript
js实现文件上传功能 后台使用MultipartFile
Sep 08 #Javascript
vue-router的HTML5 History 模式设置
Sep 08 #Javascript
vue移动端下拉刷新和上拉加载的实现代码
Sep 08 #Javascript
You might like
php模板函数 正则实现代码
2012/10/15 PHP
php中通过DirectoryIterator删除整个目录的方法
2015/03/13 PHP
php实现中文字符截取防乱码方法汇总
2015/04/29 PHP
深入理解PHP之源码目录结构与功能说明
2016/06/01 PHP
js之WEB开发调试利器:Firebug 下载
2007/01/13 Javascript
目前流行的JavaScript库的介绍及对比
2013/09/29 Javascript
JavaScript检测弹出窗口是否已经关闭的方法
2015/03/24 Javascript
JS动态改变浏览器标题的方法
2016/04/06 Javascript
Vue.js展示AJAX数据简单示例讲解
2017/03/29 Javascript
element-ui表格列金额显示两位小数的方法
2018/08/24 Javascript
微信小程序自定义扫码功能界面的实现代码
2020/07/02 Javascript
如何使用JS console.log()技巧提高工作效率
2020/10/14 Javascript
vue data有值,但是页面{{}} 取不到值的解决
2020/11/09 Javascript
nodejs+express最简易的连接数据库的方法
2020/12/23 NodeJs
[43:41]VP vs RNG 2019国际邀请赛淘汰赛 败者组 BO3 第二场 8.21.mp4
2020/07/19 DOTA
Python使用面向对象方式创建线程实现12306售票系统
2015/12/24 Python
Python的Twisted框架中使用Deferred对象来管理回调函数
2016/05/25 Python
Python实现爬取百度贴吧帖子所有楼层图片的爬虫示例
2018/04/26 Python
python实现扫描日志关键字的示例
2018/04/28 Python
Tensorflow 查看变量的值方法
2018/06/14 Python
Python通过调用有道翻译api实现翻译功能示例
2018/07/19 Python
详解如何为eclipse安装合适版本的python插件pydev
2018/11/04 Python
Django使用 Bootstrap 样式修改书籍列表过程解析
2019/08/09 Python
Django通过dwebsocket实现websocket的例子
2019/11/15 Python
Python面向对象之多态原理与用法案例分析
2019/12/30 Python
如何在pycharm中安装第三方包
2020/10/27 Python
您的网上新华书店:文轩网
2016/08/24 全球购物
Jacadi Paris英国官网:法国童装品牌
2019/08/09 全球购物
澳大利亚头发和美容产品购物网站:OZ Hair & Beauty
2020/03/27 全球购物
自动化专业本科毕业生求职信
2013/10/20 职场文书
法律进社区实施方案
2014/03/21 职场文书
应届生求职信范文
2014/06/30 职场文书
导游词之泉州崇武古城
2019/12/20 职场文书
Django实现在线无水印抖音视频下载(附源码及地址)
2021/05/06 Python
关于springboot 配置date字段返回时间戳的问题
2021/07/25 Java/Android
MySQL面试题讲解之如何设置Hash索引
2021/11/01 MySQL