文档章节

在vue项目中集成graphql(vue-ApolloClient)

p
 peakedness丶
发布于 2018/11/09 16:03
字数 501
阅读 111
收藏 0

1.什么是graphql

GraphQL 是一个用于 API 的查询语言,是一个使用基于类型系统来执行查询的服务端运行时

下图展示graphql所处的位置

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'`
//前端全栈开发交流圈:866109386
`import { HttpLink } from` `'apollo-link-http'`
 //帮助1-3经验年前端开发人员,提升技术,思维
`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](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

© 著作权归作者所有

p
粉丝 58
博文 142
码字总数 204859
作品 0
长沙
私信 提问
react+apollo+prisma简单demo搭建---1、Frontend开始

react+apollo+prisma入门demo搭建—1、Frontend入门 根据HOW TO GRAPHQL官网的例子,做了些对最新版的改动,适合最新框架的学习。 本系列文章注重前端方面的开发,对于node方面的放在下一个系...

zust_hh
01/08
0
0
GraphQL-前端开发的利剑与桥梁

基本概念 GraphQL GraphQL 是一种用于 API 的查询语言,由Facebook开发和开源,是使用基于类型系统来执行查询的服务端运行时(类型系统由你的数据定义)。GraphQL并没有和任何特定数据库或者...

八斩工程师
2018/12/27
0
0
Vue + GraphQL初试

基本用法 GraphQL概述 GraphQL基本语法特性 GraphQL类型系统 GraphQL类型系统内置基础类型 GraphQL类型系统内置修饰符 GraphQL工作原理 GraphQL执行过程 Vue工程接入GraphQL 基本用法(如何去...

清风0o0
2018/06/17
0
0
窥探 Vue CLI3 UI 内置插件 - 关闭网络端口

Vue CLI3的图形化界面增加一个好玩的工具,快速的关闭一个网络端口,挺贴心! 傻瓜式的工具可以先用,但最终要掌握原理哦。 关闭端口一般方法 在Mac上关闭端口 使用windows dos关闭端口 Vue ...

CharlesYu01
01/23
0
0
2018 年,React 将独占前端框架鳌头?

相比 Angular 和 Vue, React 是 2017 年的主要 JS 框架,尤其是 React Native 以前所未有的速度提升自己。 Stateofjs 2017前端框架调查结果 相比较 2016 年的调查结果 所以 ,1 年过去了,V...

周其
2017/12/26
7.9K
26

没有更多内容

加载失败,请刷新页面

加载更多

Error和Exception

1.Error类和Exception类都是继承Throwable类 2.Error(错误)是系统中的错误,程序员是不能改变的和处理的,是在程序编译时出现的错误,只能通过修改程序才能修正。一般是指与虚拟机相关的问...

大瑞清_liurq
7分钟前
0
0
8086汇编基础 start 程序入口标签的示例

    IDE : Masm for Windows 集成实验环境 2015     OS : Windows 10 x64 typesetting : Markdown    blog : my.oschina.net/zhichengjiu    gitee : gitee.com/zhichengjiu   ......

志成就
13分钟前
1
0
uni app 零基础小白到项目实战2

<template> <scroll-view v-for="(card, index) in list" :key="index"> <view v-for =(item, itemIndex) in card"> {{item.value}}</view> </scroll-view></template> GraceUi va......

达达前端小酒馆
14分钟前
1
0
http keep-alive 解释

本文转载于:专业的前端网站➜http keep-alive 解释 1、概念 keep-alive示例: keep-alive模式(又称持久连接、连接重用)时,keep-alive功能使客户端到服务器端的连接持续有效,当出现对服务...

前端老手
19分钟前
2
0
groovy爬虫实例——历史上的今天

最近做了一个历史上今天的爬虫程序,跟历史天气数据源一致,数据量比较小,几十秒就爬完了。中间遇到一些问题,一起分享出来供大家参考。本项目源码和相关数据已经上传到了github,有兴趣的朋...

八音弦
28分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部