详解在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 相关文章推荐
jquery构造器的实现代码小结
May 16 Javascript
javascript:文字不间断向左移动的实例代码
Aug 08 Javascript
jquery实现图片按比例缩放示例
Jul 01 Javascript
详解js中构造流程图的核心技术JsPlumb
Dec 08 Javascript
js如何改变文章的字体大小
Jan 08 Javascript
使用Node.js实现简易MVC框架的方法
Aug 07 Javascript
详解利用 Express 托管静态文件的方法
Sep 18 Javascript
layui添加动态菜单与选项卡 AJAX请求的例子
Sep 25 Javascript
Vue快速实现通用表单验证功能
Dec 05 Javascript
微信小程序地图绘制线段并且测量(实例代码)
Jan 02 Javascript
javascript实现简易计算器功能
Sep 23 Javascript
vue动态合并单元格并添加小计合计功能示例
Nov 26 Vue.js
在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中截取字符串支持utf-8
2007/01/18 PHP
PHP 数组排序方法总结 推荐收藏
2010/06/30 PHP
PHP判断数据库中的记录是否存在的方法
2014/11/14 PHP
thinkPHP连接sqlite3数据库的实现方法(附Thinkphp代码生成器下载)
2016/05/27 PHP
php设计模式之适配器模式原理、用法及注意事项详解
2019/09/24 PHP
JS中字符问题(二进制/十进制/十六进制及ASCII码之间的转换)
2008/11/03 Javascript
document.getElementById介绍
2011/09/13 Javascript
javascript跑马灯悬停放大效果实现代码
2012/12/12 Javascript
JavaScript代码编写中各种各样的坑和填坑方法
2014/06/06 Javascript
一步一步封装自己的HtmlHelper组件BootstrapHelper(二)
2016/09/14 Javascript
jQuery仿IOS弹出框插件
2017/02/18 Javascript
jQuery 中msgTips 顶部弹窗效果实现代码
2017/08/14 jQuery
element-ui带输入建议的input框踩坑(输入建议空白以及会闪出上一次的输入建议问题)
2019/01/15 Javascript
微信小程序云开发如何使用云函数生成二维码
2019/05/18 Javascript
Vue项目使用localStorage+Vuex保存用户登录信息
2019/05/27 Javascript
vue项目中js-cookie的使用存储token操作
2020/11/13 Javascript
python中Genarator函数用法分析
2015/04/08 Python
python实现简单socket通信的方法
2016/04/19 Python
python并发2之使用asyncio处理并发
2017/12/21 Python
python正则表达式匹配[]中间为任意字符的实例
2018/12/25 Python
PyQt5 对图片进行缩放的实例
2019/06/18 Python
CSS3实现歌词进度文字颜色填充变化动态效果的思路详解
2020/06/02 HTML / CSS
推荐WEB开发者最佳HTML5和CSS3代码生成器
2015/11/24 HTML / CSS
什么是.net的Remoting技术
2016/07/08 面试题
Linux内核产生并发的原因
2012/07/13 面试题
党员2014两会学习心得体会
2014/03/17 职场文书
师范生自荐信模板
2014/05/28 职场文书
中药学自荐信
2014/06/15 职场文书
公证委托书
2014/08/01 职场文书
医学检验专业自荐信
2014/09/18 职场文书
故意伤害人身损害赔偿协议书
2014/11/19 职场文书
导游词怎么写
2015/02/04 职场文书
公务员政审个人总结
2015/02/12 职场文书
2017寒假社会实践心得体会范文
2016/01/14 职场文书
大学生各类奖学金申请书
2019/06/24 职场文书
导游词之镇江-金山寺
2019/10/14 职场文书