GraphQL学习第十篇 －Vue中使用Vue-apollo实现下拉加载更多
GraphQL学习第十篇 －Vue中使用Vue-apollo实现下拉加载更多
越陌度阡
发布于 2020-11-26 12:28:34
发布于 2020-11-26 12:28:34
在Vue中集中Vue-apollo以后(如何集成请查看本专栏第六篇），就可以使用它进行分页加载了，主要有以下两种方法：
第一种：用 $apollo.addSmartQuery 每次请求一页数据，与之前请求的数据进行拼接。
<template>
<div class="article">
<!-- infinite-scroll-disabled代表是否禁用 -->
<!-- infinite-scroll-distance 距离底部多少加载 -->
<div
v-infinite-scroll="loadMore"
infinite-scroll-disabled="busy"
infinite-scroll-distance="10"
>
<ul>
<li v-for="(item,key) of articleListData" :key="key">{{item.title}}</li>
</ul>
</div>
</div>
</template>
<script>
// 引入模块
import gql from "graphql-tag";
// 定义查询数据语句
var articleListGql = gql`
query articleList($page: Int!, $pageSize: Int!) {
articleList(page: $page, pageSize: $pageSize) {
title
}
}
`;
export default {
name: "app",
data() {
return {
articleList: [],
articleListData: [],
page: 1,
pageSize: 10,
busy: false
};
},
methods: {
loadMore() {
// $apollo.addSmartQuery 固定的方法名
this.$apollo.addSmartQuery("articleList", {
// 查询语句
query: articleListGql,
// 查询的参数
variables: {
page: this.page,
pageSize: this.pageSize
},
result(response) {
// 拼接数组
this.articleListData = this.articleListData.concat(
response.data.articleList
);
this.page++;
// 关闭下拉加载
if (response.data.articleList < 8) {
this.busy = true;
}
},
error(err) {
console.log(err);
}
});
}
}
};
</script>
<style scoped></style>第二种：用 $apollo 中的 fetchMore 加载更多，处理方式会更优雅一点，这也是vue-apollo提供的默认方法。
<template>
<div class="article">
<!-- infinite-scroll-disabled 代表是否禁用 -->
<!-- infinite-scroll-distance 距离底部多少加载 -->
<div
v-infinite-scroll="loadMore"
infinite-scroll-disabled="busy"
infinite-scroll-distance="10"
>
<ul>
<li v-for="(item,key) of articleList" :key="key">
{{item.title}}
</li>
</ul>
</div>
</div>
</template>
<script>
// 引入模块
import gql from "graphql-tag";
// 定义查询数据语句
var articleListGql = gql`
query articleList($page: Int!, $pageSize: Int!) {
articleList(page: $page, pageSize: $pageSize) {
title
}
}
`;
export default {
name: "app",
data() {
return {
busy: false,
articleList: [],
page: 1,
pageSize: 10
};
},
// apollo 默认的选项名称
apollo: {
articleList() {
return {
// 查询语句
query: articleListGql,
// 查询的参数
variables: {
page: this.page,
pageSize: this.pageSize
}
};
}
},
methods: {
loadMore() {
this.page++;
// $apollo.queries 固定的方法名
this.$apollo.queries.articleList.fetchMore({
// 查询的参数
variables: {
page: this.page,
pageSize: this.pageSize
},
// updateQuery 默认的方法名
// previousResult 为旧数据，fetchMoreResult为新数据
updateQuery: (previousResult, { fetchMoreResult }) => {
return {
// 将新数据与旧数据进行拼接
articleList: [
...previousResult.articleList,
...fetchMoreResult.articleList
]
};
}
});
}
}
};
</script>
<style scoped>
</style>本文参与?腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2020-03-12 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读