在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 相关文章推荐
jquery(hide方法)隐藏指定元素实例
Nov 11 Javascript
JavaScript动态改变HTML页面元素例如添加或删除
Aug 10 Javascript
javascript关于继承解析
May 10 Javascript
js 定义对象数组(结合)多维数组方法
Jul 27 Javascript
JS传参及动态修改页面布局
Apr 13 Javascript
vue中的自定义分页插件组件的示例
Aug 18 Javascript
图片文字识别(OCR)插件Ocrad.js教程
Nov 26 Javascript
ES6 Iterator遍历器原理,应用场景及相关常用知识拓展详解
Feb 15 Javascript
Vue+Java 通过websocket实现服务器与客户端双向通信操作
Sep 22 Javascript
Openlayers实现图形绘制
Sep 28 Javascript
vuex刷新后数据丢失的解决方法
Oct 18 Javascript
JavaScript高级程序设计之基本引用类型
Nov 17 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
实用函数9
2007/11/08 PHP
用PHP读取RSS feed的代码
2008/08/01 PHP
PHP基础知识回顾
2012/08/16 PHP
php中文验证码实现示例分享
2014/01/12 PHP
thinkphp控制器调度使用示例
2014/02/24 PHP
PHP处理会话函数大总结
2015/08/05 PHP
最新最全PHP生成制作验证码代码详解(推荐)
2016/06/12 PHP
php + ajax 实现的写入数据库操作简单示例
2020/05/16 PHP
jquery+javascript编写国籍控件
2015/02/12 Javascript
JavaScript新增样式规则(推荐)
2016/07/19 Javascript
js仿京东轮播效果 选项卡套选项卡使用
2017/01/12 Javascript
Reactjs实现通用分页组件的实例代码
2017/01/19 Javascript
vue.js数据绑定的方法(单向、双向和一次性绑定)
2017/07/13 Javascript
cocos2dx+lua实现橡皮擦功能
2018/12/20 Javascript
Vue.js组件实现选项卡以及切换特效
2019/07/24 Javascript
微信小程序纯文本实现@功能
2020/04/08 Javascript
[05:46]2018完美盛典-《同梦共竞》
2018/12/17 DOTA
在Linux上安装Python的Flask框架和创建第一个app实例的教程
2015/03/30 Python
实例讲解Python的函数闭包使用中应注意的问题
2016/06/20 Python
PHP实现发送和接收JSON请求
2018/06/07 Python
python 顺时针打印矩阵的超简洁代码
2018/11/14 Python
python lambda表达式在sort函数中的使用详解
2019/08/28 Python
python使用HTMLTestRunner导出饼图分析报告的方法
2019/12/30 Python
Python垃圾回收机制三种实现方法
2020/04/27 Python
python如何编写类似nmap的扫描工具
2020/11/06 Python
Python wordcloud库安装方法总结
2020/12/31 Python
HTML5视频支持检测(检查浏览器是否支持视频播放)
2013/06/08 HTML / CSS
HTML5语音识别标签写法附图
2013/11/18 HTML / CSS
实习护理工作自我评价
2013/09/25 职场文书
普通院校学生的自荐信
2013/11/27 职场文书
英语课外活动总结
2014/08/27 职场文书
2014年国庆节演讲稿精选范文1500字
2014/09/25 职场文书
社区活动总结
2015/02/04 职场文书
预备党员群众意见
2015/06/01 职场文书
毕业典礼主持词
2015/06/29 职场文书
导游词之海南-南湾猴岛
2019/10/12 职场文书