Vue客户端集成GraphQl
Vue 中集成 GraphQl
- 找到 Vue 中集成 GraphQl 的文档
- 安装相应的模块
Apollo Boost 是一种零配置开始使用 Apollo Client 的方式。它包含一些实用的默认值，推荐InMemoryCache 和 HttpLink，它非常适合用于快速启动开发。将它与 vue-apollo 和 graphql 一起安装：
npm install vue-apollo graphql apollo-boost --save
- 在 src/main.js 中引入 apollo-boost 模块 并实例化 ApolloClient
import ApolloClient from 'apollo-boost'
const apolloClient = new ApolloClient({
// 你需要在这里使用绝对路径
uri: 'http://localhost:3000/graphql'
})
- 在 src/main.js 配置 vue-apollo 插件
import VueApollo from 'vue-apollo'
Vue.use(VueApollo);
- 创建 Apollo provider
Provider 保存了可以在接下来被所有子组件使用的 Apollo 客户端实例
const apolloProvider = new VueApollo({
defaultClient: apolloClient,
})
- 使用 apolloProvider 选项将它添加到你的应用程序
new Vue({
el: '#app', // 像 vue-router 或 vuex 一样注入 apolloProvider
apolloProvider, render: h => h(App),
})
Vue 中使用 GraphQl 查询 Server Api
- 简单查询
组件加载的时候就会去服务器请求数据，请求的数据会放在 navList 这个属性上面，在模板中可以直接使用当前属性
import gql from 'graphql-tag';
export default {
data() {
return {
msg: '我是一个 home 组件'
}
}, apollo: {
// 简单的查询，将更新 'hello' 这个 vue 属性
navList: gql`query {
navList{
title
}
}` },
}
另一种写法：
import gql from 'graphql-tag';
export default {
data() {
return {
msg: '我是一个 home 组件'
}
}, apollo: {
// 注意方法名称 和 查询的名称对应
navList() {
return {
query: gql`query {
navList{
title
}
}` }
}
}
}
}
- 高级查询
模板
<button @click="getData()">获取数据</button>
<div v-if="navList.length>0">
<ul>
<li v-for="item of navList">
{{item.title}}
</li>
</ul>
</div>
业务逻辑
import gql from 'graphql-tag';
var navListGql = gql`{
navList {
title
url
}
}`;
export default {
data() {
return {
navList: []
}
}, methods: {
getData() {
this.$apollo.addSmartQuery('navList', {
query: navListGql, result({ data, loading, networkStatus }) {
console.log({ data, loading, networkStatus })
},// 错误处理
error(error) {
console.error('We\'ve got an error!', error)
}
});
}
}
}
- Vue GraphQl 传参查询
<template>
<!-- 所有的内容要被根节点包含起来 -->
<div id="home">
<div v-if="articleList.length>0">
<ul>
<li v-for="item of articleList">
{{item.title}}
</li>
</ul>
</div>
</div>
</template>
import gql from 'graphql-tag';
export default {
data() {
return {
articleList: []
}
}, apollo: {
articleList() {
return {
query: gql`query($page:Int!){
articleList(page:$page){
title
}
}`, variables: {
page: 1
}
}
}
}
}
- 高级查询 传参
import gql from 'graphql-tag';
var articleListGql = gql`query($page:Int!){
articleList(page:$page){
title
}
}`;
export default {
data() {
return {
articleList: []
}
}, methods: {
getData() {
this.$apollo.addSmartQuery('articleList', {
query: articleListGql, variables: {
page: 2
}, result({ data, loading, networkStatus }) {
console.log({ data, loading, networkStatus })
},// 错误处理
error(error) {
console.error('We\'ve got an error!', error)
}
});
}
}
}
- 更新数据
变更是在你的 apollo 服务端更改你的数据状态的查询。使用this.$apollo.mutate() 来发送一个 GraphQL 变更。
methods: {
addData(){
// alert('addData');
this.$apollo.mutate({
// 查询语句
mutation: gql`mutation ($title: String!,$description: String!) {
addNav(title:$title,description:$description){
title
}
}`, // 参数
variables: {
title: '测试导航 22', description: 'vue 测试导航 22'
}, refetchQueries: [{ //更新完成执行的操作
query: navListQuery
// variables: { repoFullName: 'apollographql/apollo-client' }, }]
}).then((data) => {
// 结果
console.log(data)
}).catch((error) => {
// 错误
console.error(error);
})
}
}
- vue-infinite-scroll 结合 Vue Apollo fetchMore 实现分
页
- 下载安装 vue-infinite-scroll
npm i vue-infinite-scroll --save
- 配置上拉分页插件
var infiniteScroll = require('vue-infinite-scroll');
Vue.use(infiniteScroll);
- 模板中使用上拉分页
<div v-infinite-scroll="loadMore" infinite-scroll-disabled="busy" infinite-scroll-distance="10">
<ul class="list">
<li v-for="item of articleList">
<router-link :to="'/articlecontent?id='+item._id">{{item.title}}--{{item.author}}</router-link>
</li>
</ul>
</div>
- 实现上拉分页业务逻辑
apollo: {
// 简单的查询，将更新 'hello' 这个 vue 属性
articleList(){
return {
// gql 查询
query: gql`query getArticleList($page: Int!){
articleList(page:$page) { _id, title
}
}`, // 静态参数
variables: {
page: this.page
},
}
}
}, methods: {
loadMore(){
console.log(this.page);
this.page++;
this.$apollo.queries.articleList.fetchMore({
// 新的变量
variables: {
page: this.page
},// 用新数据转换之前的结果
updateQuery: (previousResult, { fetchMoreResult }) => {
// console.log(previousResult..articleList);
// console.log(fetchMoreResult.articleList);
if (fetchMoreResult.articleList.length < 5) {
this.busy = true;
}
// const newResult = fetchMoreResult;
// // // this.showMoreEnabled = hasMore
return {
articleList: [...previousResult.articleList, ...fetchMoreResult.articleList]
}
}
})
}
}
