在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 相关文章推荐
使Ext的Template可以解析二层的json数据的方法
Dec 22 Javascript
js 多浏览器分别判断代码
Apr 01 Javascript
JavaScript下通过的XMLHttpRequest发送请求的代码
Jun 28 Javascript
jQuery 淡出一个图像到另一个图像的实现代码
Jun 12 Javascript
使用JSLint提高JS代码质量方法分享
Dec 16 Javascript
js实现字符串的16进制编码不加密
Apr 25 Javascript
JavaScript如何动态创建table表格
Aug 02 Javascript
实例讲解JS中setTimeout()的用法
Jan 28 Javascript
js实现当鼠标移到表格上时显示这一格全部内容的代码
Jun 12 Javascript
微信小程序实现购物车代码实例详解
Aug 29 Javascript
JavaScript进阶(二)词法作用域与作用域链实例分析
May 09 Javascript
如何利用javascript接收json信息并进行处理
Aug 06 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
PHP输出控制功能在简繁体转换中的应用
2006/10/09 PHP
PHP中如何调用webservice的实例参考
2013/04/25 PHP
PHP排序算法类实例
2015/06/17 PHP
你真的了解JavaScript吗?
2007/02/24 Javascript
JavaScript 闭包深入理解(closure)
2009/05/27 Javascript
Javascript 汉字字节判断
2009/08/01 Javascript
jquery背景跟随鼠标滑动导航
2015/11/20 Javascript
AngularJS  ng-table插件设置排序
2016/09/21 Javascript
JSON 必知必会 观后记
2016/10/27 Javascript
Angular多选、全选、批量选择操作实例代码
2017/03/10 Javascript
node.js操作MongoDB的实例详解
2017/10/11 Javascript
浅析Angular19 自定义表单控件
2018/01/31 Javascript
原生JavaScript实现的简单放大镜效果示例
2018/02/07 Javascript
[01:02:25]2014 DOTA2华西杯精英邀请赛5 24 NewBee VS VG
2014/05/25 DOTA
[00:12]DAC2018 天才少年转战三号位,他的SOLO是否仍如昔日般强大?
2018/04/06 DOTA
详解Python中的strftime()方法的使用
2015/05/22 Python
Python读取Word(.docx)正文信息的方法
2018/03/15 Python
python3结合openpyxl库实现excel操作的实例代码
2018/09/11 Python
PyQt5实现简易计算器
2020/05/30 Python
python面试题Python2.x和Python3.x的区别
2019/05/28 Python
Python简易版停车管理系统
2019/08/12 Python
python如何利用Mitmproxy抓包
2020/10/10 Python
Html5监听手机摇一摇事件的实现
2019/11/07 HTML / CSS
美国高级音响品牌:Master&Dynamic
2018/07/05 全球购物
介绍一下如何利用路径遍历进行攻击及如何防范
2014/01/19 面试题
Linux文件操作命令都有哪些
2015/02/27 面试题
如何获得EntityManager
2014/02/09 面试题
大学生素质拓展活动方案
2014/02/11 职场文书
我们的节日清明节活动总结
2014/04/30 职场文书
办公室主任竞聘演讲稿
2014/05/15 职场文书
党员四风问题对照检查材料
2014/09/27 职场文书
师德师风个人整改措施
2014/10/27 职场文书
无婚姻登记记录证明
2015/06/18 职场文书
公司食堂管理制度
2015/08/05 职场文书
电力安全学习心得体会
2016/01/18 职场文书
Python源码解析之List
2021/05/21 Python