欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2023-11-23 21:08:40
1.什么是graphql graphql 是一个用于 api 的查询语言,是一个使用基于类型系统来执行查询的服务端运行时 下图展示graphql所处的位置...

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

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