在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 28 Javascript
《JavaScript函数式编程》读后感
Aug 07 Javascript
Jquery实现纵向横向菜单
Jan 24 Javascript
JS控制伪元素的方法汇总
Apr 06 Javascript
实用jquery操作表单元素的简单代码
Jul 04 Javascript
原生js实现jquery函数animate()动画效果的简单实例
Aug 21 Javascript
JavaScript判断浏览器对CSS3属性是否支持的多种方法
Nov 13 Javascript
原生js实现手风琴功能(支持横纵向调用)
Jan 13 Javascript
微信小程序获取手机网络状态的方法【附源码下载】
Dec 08 Javascript
vue2.0实现移动端的输入框实时检索更新列表功能
May 08 Javascript
element ui 表格动态列显示空白bug 修复方法
Sep 04 Javascript
微信小程序实现订单倒计时
Nov 01 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
星际争霸 Starcraft 编年史
2020/03/14 星际争霸
php AJAX实例根据邮编自动完成地址信息
2008/11/23 PHP
PHP数组传递是值传递而非引用传递概念纠正
2013/01/31 PHP
IIS6.0中配置php服务全过程解析
2013/08/07 PHP
ThinkPHP中关联查询实例
2014/12/02 PHP
PHP调用Linux命令权限不足问题解决方法
2015/02/07 PHP
PHP下SSL加密解密、验证、签名方法(很简单)
2020/06/28 PHP
拖拉表格的JS函数
2008/11/20 Javascript
JavaScript定时器详解及实例
2013/08/01 Javascript
JavaScript使用setInterval()函数实现简单轮询操作的方法
2015/02/02 Javascript
JavaScript字符集编码与解码详谈
2017/02/02 Javascript
vue2.0实战之基础入门(1)
2017/03/27 Javascript
微信小程序 功能函数小结(手机号验证*、密码验证*、获取验证码*)
2017/12/08 Javascript
angular6.x中ngTemplateOutlet指令的使用示例
2018/08/09 Javascript
优雅的在React项目中使用Redux的方法
2018/11/10 Javascript
vue中的v-if和v-show的区别详解
2019/09/01 Javascript
微信小程序服务器日期格式化问题
2020/01/07 Javascript
vue缓存之keep-alive的理解和应用详解
2020/11/02 Javascript
[01:00:14]DOTA2官方TI8总决赛纪录片 真视界True Sight
2019/01/16 DOTA
[43:53]OG vs EG 2019国际邀请赛淘汰赛 胜者组 BO3 第三场 8.22
2019/09/05 DOTA
Python 时间操作例子和时间格式化参数小结
2014/04/24 Python
python中import学习备忘笔记
2017/01/24 Python
对tf.reduce_sum tensorflow维度上的操作详解
2018/07/26 Python
python通过移动端访问查看电脑界面
2020/01/06 Python
Python利用逻辑回归分类实现模板
2020/02/15 Python
python GUI库图形界面开发之PyQt5 UI主线程与耗时线程分离详细方法实例
2020/02/26 Python
Python存储读取HDF5文件代码解析
2020/11/25 Python
浅析python字符串前加r、f、u、l 的区别
2021/01/24 Python
Java语言的优势
2015/01/10 面试题
架构师岗位职责
2013/11/18 职场文书
高效课堂标语
2014/06/26 职场文书
美丽的大脚观后感
2015/06/03 职场文书
2016高中社会实践心得体会范文
2016/01/14 职场文书
创业分两种人:那么哪些适合创业?,哪些适合不适合创业呢?
2019/08/23 职场文书
python使用openpyxl库读写Excel表格的方法(增删改查操作)
2021/05/02 Python
python3实现无权最短路径的方法
2021/05/12 Python