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

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'
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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。