详解在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 得到当前页面高度和宽度的两个函数
Feb 21 Javascript
jquery 表格分页等操作实现代码(pagedown,pageup)
Apr 11 Javascript
js判断设备是否为PC并调整图片大小
Feb 12 Javascript
JavaScript DOM事件(笔记)
Apr 08 Javascript
微信浏览器内置JavaScript对象WeixinJSBridge使用实例
May 25 Javascript
jQuery幻灯片带缩略图轮播效果代码分享
Aug 17 Javascript
JS中如何实现Laravel的route函数详解
Feb 12 Javascript
js+canvas实现动态吃豆人效果
Mar 22 Javascript
Vue.js tab实现选项卡切换
May 16 Javascript
JS中去掉array中重复元素的方法
May 26 Javascript
详解Vue快速零配置的打包工具——parcel
Jan 16 Javascript
使用Webpack 搭建 Vue3 开发环境过程详解
Jul 28 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
关于BIG5-HKSCS的解决方法
2007/03/20 PHP
初次接触php抽象工厂模式(Elgg)
2010/03/21 PHP
PHP中VC6、VC9、TS、NTS版本的区别与用法详解
2013/10/26 PHP
php修改指定文件后缀的方法
2014/09/11 PHP
php实现MySQL数据库备份与还原类实例
2014/12/09 PHP
php把时间戳转换成多少时间之前函数的实例
2016/11/16 PHP
PHP编译configure时常见错误的总结
2017/08/17 PHP
关于PHP虚拟主机概念及如何选择稳定的PHP虚拟主机
2018/11/20 PHP
php设计模式之组合模式实例详解【星际争霸游戏案例】
2020/03/27 PHP
jQuery each()小议
2010/03/18 Javascript
ExtJs使用IFrame的实现代码
2010/03/24 Javascript
仿新浪微博返回顶部的jquery实现代码
2012/10/01 Javascript
JS实现div内部的文字或图片自动循环滚动代码
2013/04/19 Javascript
jquery中toggle函数交替使用问题
2015/06/22 Javascript
浅谈js里面的InttoStr和StrtoInt
2016/06/14 Javascript
jQuery 获取select选中值及清除选中状态
2016/12/13 Javascript
微信小程序收货地址API兼容低版本解决方法
2019/05/18 Javascript
jQuery+css实现的点击图片放大缩小预览功能示例【图片预览 查看大图】
2020/05/29 jQuery
关于IDEA中的.VUE文件报错 Export declarations are not supported by current JavaScript version
2020/10/17 Javascript
Python 装饰器实现DRY(不重复代码)原则
2018/03/05 Python
pytorch实现用Resnet提取特征并保存为txt文件的方法
2019/08/20 Python
Windows下PyCharm2018.3.2 安装教程(图文详解)
2019/10/24 Python
python plotly画柱状图代码实例
2019/12/13 Python
浅谈多卡服务器下隐藏部分 GPU 和 TensorFlow 的显存使用设置
2020/06/30 Python
python中的测试框架
2020/11/13 Python
Python基于Faker假数据构造库
2020/11/30 Python
一个非常简单好用的Python图形界面库(PysimpleGUI)
2020/12/28 Python
阿里巴巴国际站:Alibaba.com
2016/07/21 全球购物
德国网上花店:Valentins
2018/08/15 全球购物
澳大利亚人信任的清洁平台,您的私人管家:Jarvis
2020/12/25 全球购物
初中生学习生活的自我评价
2013/11/20 职场文书
行政部主管岗位职责
2013/12/28 职场文书
技能比赛获奖感言
2014/02/14 职场文书
委托代理人授权委托书范本
2014/09/24 职场文书
听证通知书
2015/04/24 职场文书
导游词之丽江普济寺
2019/10/22 职场文书