在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 相关文章推荐
解决自定义$(id)的方法与jquery选择器$冲突的问题
Jun 14 Javascript
js实现文本框中输入文字页面中div层同步获取文本框内容的方法
Mar 03 Javascript
jQuery Ajax使用实例
Apr 16 Javascript
详解JavaScript中localStorage使用要点
Jan 13 Javascript
JS实现的在线调色板实例(附demo源码下载)
Mar 01 Javascript
jQuery解决$符号命名冲突
Jun 18 Javascript
老生常谈js动态添加事件--- 事件委托
Jul 19 Javascript
jQuery.ajax实现根据不同的Content-Type做出不同的响应
Nov 03 Javascript
jQuery实现单击按钮遮罩弹出对话框效果(2)
Feb 20 Javascript
详解vue-router基本使用
Apr 18 Javascript
全面解析Node.js 8 重要功能和修复
Jun 02 Javascript
vue init webpack myproject构建项目 ip不能访问的解决方法
Mar 20 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
Linux下将excel数据导入到mssql数据库中的方法
2010/02/08 PHP
php抽奖小程序的实现代码
2013/06/18 PHP
PHP多维数组遍历方法(2种实现方法)
2015/12/10 PHP
PHP中soap用法示例【SoapServer服务端与SoapClient客户端编写】
2018/12/25 PHP
js更优雅的兼容
2010/08/12 Javascript
Jquery同辈元素选中/未选中效果的实例代码
2013/08/01 Javascript
jQuery在iframe中无法弹出对话框的解决方法
2014/01/12 Javascript
做好七件事帮你提升jQuery的性能
2014/02/06 Javascript
JQuery中绑定事件(bind())和移除事件(unbind())
2015/02/27 Javascript
JS中的Replace方法使用经验分享
2015/05/20 Javascript
基于JavaScript实现高德地图和百度地图提取行政区边界经纬度坐标
2016/01/22 Javascript
vue如何获取自定义元素属性参数值的方法
2019/05/14 Javascript
Vue父组件如何获取子组件中的变量
2019/07/24 Javascript
Node.js在图片模板上生成二维码图片并附带底部文字说明实现详解
2019/08/07 Javascript
Python过滤列表用法实例分析
2016/04/29 Python
使用Python和xlwt向Excel文件中写入中文的实例
2018/04/21 Python
Python图像滤波处理操作示例【基于ImageFilter类】
2019/01/03 Python
Python正则表达式和re库知识点总结
2019/02/11 Python
Python中psutil的介绍与用法
2019/05/02 Python
Django REST Framework序列化外键获取外键的值方法
2019/07/26 Python
在win64上使用bypy进行百度网盘文件上传功能
2020/01/02 Python
基于Python实现粒子滤波效果
2020/12/01 Python
html5中canvas学习笔记2-判断浏览器是否支持canvas
2013/01/06 HTML / CSS
HTML5 video 上传预览图片视频如何设置、预览视频某秒的海报帧
2018/08/28 HTML / CSS
AmazeUI 缩略图的实现示例
2020/08/18 HTML / CSS
丝芙兰中国官方商城:SEPHORA中国
2018/01/10 全球购物
激光脱毛、蓝光和护肤:Tria Beauty
2019/03/28 全球购物
Vision Direct比利时:在线订购隐形眼镜
2019/08/27 全球购物
介绍一下except的用法和作用
2015/01/22 面试题
销售主管的自我评价分享
2014/01/03 职场文书
顶碗少年教学反思
2014/02/21 职场文书
股东协议书
2014/04/14 职场文书
党的群众路线教育实践活动制度建设计划方案
2014/10/31 职场文书
端午节寄语2015
2015/03/23 职场文书
2015年班主任德育工作总结
2015/05/21 职场文书
SpringBoot2零基础到精通之异常处理与web原生组件注入
2022/03/22 Java/Android