GraphQL学习第十篇 －Vue中使用Vue-apollo实现下拉加载更多

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