在vue项目中集成graphql(vue-ApolloClient)


Posted in Javascript onSeptember 08, 2018

1.什么是graphql

GraphQL 是一个用于 API 的查询语言,是一个使用基于类型系统来执行查询的服务端运行时

下图展示graphql所处的位置

在vue项目中集成graphql(vue-ApolloClient)

2.优点

1.GraphQL API 有强类型 schema

GraphQL schema是强类型的,可使用SDL(GraphQL Schema Definition Language)来定义。比如,可以使用构建工具验证API请求,编译时检查API调用可能发生的错误

2.按需获取

在不添加后端接口的前提下减少不必要的字段,做到前端自主订阅字段

3.使用 vue集成graphql

1.安装vue脚手架 npm install -g vue-cli

2.安装vue-apollo客户端 vue-apollo graphql apollo-client apollo-link apollo-link-http apollo-cache-inmemory graphql-tag

3.webpack.base.conf.js 安装加载器加载graphql后缀文件

{
test: /\.(graphql|gql)$/,
exclude: /node_modules/,
loader: 'graphql-tag/loader'
},

4.main.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({
// You should use an absolute URL here
//config.js 代理设置
// '/graphql': {
// target: "http://eshipe.net:3000/graphql",
// changeOrigin: true,
// pathRewrite: {
// '^/graphql': '/graphql'
// }
// },
uri: '/graphql',//访问地址,在这里使用代理
})

// Create the apollo client
const apolloClient = new ApolloClient({
link: httpLink,
cache: new InMemoryCache(),
connectToDevTools: true,
})

// Install the vue plugin
Vue.use(VueApollo)
const apolloProvider = new VueApollo({
defaultClient: apolloClient,
})

new Vue({
router,
store,
provide: apolloProvider.provide(),//注册全局组件
}).$mount('#app')

5.添加search.graphql文件

//定义查询
query q_user($id: Int){
User(id: $id){
id
address
name
}
}

6.具体的vue组件中

1.import gql from "graphql-tag";

2.import {q_user} from'search.graphql'

3. 具体方法中使用

this.$apollo.query({
query: q_user,
variables: {
id: 1,
},
}).then(res => {
console.log(res)
}).catch(err => {
console.log(err)
})

4.可能遇到的问题

1.npm版本问题

解决思路:npm版本回退 npm install -g npm@4.6.1

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

Javascript 相关文章推荐
[原创]保存的js无法执行的解决办法
Feb 25 Javascript
JavaScript XML操作 封装类
Jul 01 Javascript
Prototype源码浅析 String部分(四)之补充
Jan 16 Javascript
jquery ui对话框实例代码
May 10 Javascript
公共js在页面底部加载的注意事项介绍
Jul 18 Javascript
Js base64 加密解密介绍
Oct 11 Javascript
js实现将选中值累加到文本框的方法
Aug 12 Javascript
深入理解JavaScript中的call、apply、bind方法的区别
May 30 Javascript
JS简单实现点击复制链接的方法
Aug 03 Javascript
jquery 通过ajax请求获取后台数据显示在表格上的方法
Aug 08 jQuery
使用Typescript和ES模块发布Node模块的方法
May 25 Javascript
微信小程序实现加入购物车滑动轨迹
Nov 18 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
react 父子组件之间通讯props
Sep 08 #Javascript
You might like
使用zend studio for eclipse不能激活代码提示功能的解决办法
2009/10/11 PHP
判断PHP数组是否为空的代码
2011/09/08 PHP
linux下编译安装memcached服务
2014/08/03 PHP
又一个PHP实现的冒泡排序算法分享
2014/08/21 PHP
PHP Filter过滤器全面解析
2016/08/09 PHP
PHP实现对文件锁进行加锁、解锁操作的方法
2017/07/04 PHP
让JavaScript 轻松支持函数重载 (Part 1 - 设计)
2009/08/04 Javascript
js chrome浏览器判断代码
2010/03/28 Javascript
jQuery中append()方法用法实例
2014/12/25 Javascript
JQuery实现展开关闭层的方法
2015/02/17 Javascript
深入理解JavaScript系列(48):对象创建模式(下篇)
2015/03/04 Javascript
使用ngView配合AngularJS应用实现动画效果的方法
2015/06/19 Javascript
JS Array创建及concat()split()slice()的使用方法
2016/06/03 Javascript
AngularJS封装$http.post()实例详解
2017/05/06 Javascript
angularjs实现过滤并替换关键字小功能
2017/09/19 Javascript
iview给radio按钮组件加点击事件的实例
2017/09/30 Javascript
Javascript中parseInt的正确使用方式
2018/10/17 Javascript
Centos7 安装Node.js10以上版本的方法步骤
2019/10/15 Javascript
[02:17]快乐加倍!DOTA2食人魔魔法师至宝+迎霜节活动上线
2019/12/22 DOTA
Django进阶之CSRF的解决
2018/08/01 Python
python实现三次样条插值
2018/12/17 Python
python opencv实现gif图片分解的示例代码
2019/12/13 Python
利用python3 的pygame模块实现塔防游戏
2019/12/30 Python
基于python实现获取网页图片过程解析
2020/05/11 Python
tensorflow pb to tflite 精度下降详解
2020/05/25 Python
方太官方网上商城:销售方太抽油烟机、燃气灶、消毒柜等
2017/01/17 全球购物
美国彩妆品牌:Coastal Scents
2017/04/01 全球购物
将世界上最美丽的摄影作品转化为艺术作品:Photos.com
2017/11/28 全球购物
优秀应届毕业生自荐信
2013/11/16 职场文书
小学信息技术教学反思
2014/02/10 职场文书
我的理想演讲稿
2014/04/30 职场文书
2014入党积极分子批评与自我批评思想报告
2014/10/06 职场文书
高中生毕业评语
2014/12/30 职场文书
给医院的感谢信
2015/01/21 职场文书
琅琊山导游词
2015/02/05 职场文书
2015年度优秀员工获奖感言
2015/07/31 职场文书