在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 相关文章推荐
JavaScript中变量提升 Hoisting
Jul 03 Javascript
Javascript操作cookie的函数代码
Oct 03 Javascript
javascript中拼接HTML字符串的最快、最好的方法
Jun 07 Javascript
深入分析JQuery和JavaScript的异同
Oct 23 Javascript
JavaScript中的原型链prototype介绍
Dec 30 Javascript
js console.log打印对像与数组用法详解
Jan 21 Javascript
超全面的vue.js使用总结
Feb 12 Javascript
jQuery动态产生select option下拉列表
Mar 15 Javascript
vue2.0学习之axios的封装与vuex介绍
May 28 Javascript
VUE-Table上绑定Input通过render实现双向绑定数据的示例
Aug 27 Javascript
javascript数组includes、reduce的基本使用
Jul 02 Javascript
js中Map和Set的用法及区别实例详解
Feb 15 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
咖啡因含量是由谁决定的?低因咖啡怎么来?低因咖啡适合什么人喝
2021/03/06 新手入门
PHP提交表单失败后如何保留已经填写的信息
2014/06/20 PHP
PHP实现绘制3D扇形统计图及图片缩放实例
2014/10/01 PHP
php实现在服务器端调整图片大小的方法
2015/06/16 PHP
Laravel学习教程之View模块详解
2017/09/18 PHP
php慢查询日志和错误日志使用详解
2021/02/27 PHP
javascript alert乱码的解决方法
2013/11/05 Javascript
jQuery判断checkbox(复选框)是否被选中以及全选、反选实现代码
2014/02/21 Javascript
javascript实现页面内关键词高亮显示代码
2014/04/03 Javascript
文本框倒叙输入让输入框的焦点始终在最开始的位置
2014/09/01 Javascript
JavaScript事件代理和委托详解
2016/04/08 Javascript
JS 实现Base64编码与解码实例详解
2016/11/07 Javascript
微信小程序 特效菜单抽屉效果实例代码
2017/01/11 Javascript
基于JavaScript实现无缝滚动效果
2017/07/21 Javascript
JS点击图片弹出文件选择框并覆盖原图功能的实现代码
2017/08/25 Javascript
iview table高度动态设置方法
2018/03/14 Javascript
多种类型jQuery网页验证码插件代码实例
2021/01/09 jQuery
从零学Python之入门(五)缩进和选择
2014/05/27 Python
python运行时间的几种方法
2016/06/17 Python
python中单例常用的几种实现方法总结
2018/10/13 Python
Django ImageFiled上传照片并显示的方法
2019/07/28 Python
python输出决策树图形的例子
2019/08/09 Python
零基础学Python之前需要学c语言吗
2020/07/21 Python
如何利用python生成MD5并去重
2020/12/07 Python
Python Pygame实现俄罗斯方块
2021/02/19 Python
CSS3 icon font完全指南(CSS3 font 会取代icon图标)
2013/01/06 HTML / CSS
html5手机端页面可以向右滑动导致样式受影响的问题
2018/06/20 HTML / CSS
Hush Puppies澳大利亚官网:舒适的男女休闲和正装鞋
2019/08/24 全球购物
应届毕业生求职信
2013/11/30 职场文书
教师自荐信范文
2013/12/09 职场文书
培训讲师邀请函
2014/01/10 职场文书
2015感人爱情寄语
2015/02/26 职场文书
家长必看:义务教育,不得以面试 评测等名义选拔学生
2019/07/09 职场文书
nginx配置proxy_pass中url末尾带/与不带/的区别详解
2021/03/31 Servers
如何理解PHP核心特性命名空间
2021/05/28 PHP
Axios取消重复请求的方法实例详解
2021/06/15 Javascript