無限加載 vue用infinite-loading插件和阿波羅請求

 

1.npm install vue-infinite-loading --save

2.npm install --save vue-apollo graphql apollo-client apollo-link apollo-link-http apollo-cache-inmemory graphql-tag  

（https://akryum.github.io/vue-apollo/guide/installation.html）複製到main.js 記得把地址換一下。

3.npm i --save lodash

<template>
  <div>
    <p v-for="(item,index) in companyList" :key="index">
    Line:
    <span v-text="item.id"></span>
    </p>
    <infinite-loading @infinite="onInfinite" ref="infiniteLoading">
    　　<span slot="no-more">沒有更多數據了</span>
　　</infinite-loading>

  </div>
</template>


<script>
import _ from "lodash"
import InfiniteLoading from 'vue-infinite-loading'
import gql from 'graphql-tag'
export default {
  data() {
    return {
      list:[],
      storeLimit:20,
      page: 0,
      skipQuery: true,
      hasMore: true,
      companyList: []
    };
  },
  apollo: {
    companies:{
      query: gql`query companies($skip:Int,$take:Int){
        companies(skip:$skip,take:$take ){
          pageInfo{
            skip
            take 
            totalPage
            currPage
          }
          items{
            id
          }
        }
      }`,
      variables: {
        skip: 0,
        take: this.storeLimit,
      },
      skip() {
        return this.skipQuery
      },
      result({ data}) {
        this.companyList = [].concat(_.get(data, 'companies.items', []))
      },
    }
  },
  computed:{
    companiesList(){
      return _.get(this.companies,'items')
    }

  },
  methods: {
    onInfinite($state) {
      //onInfinite這個函數當圈圈出現的時候就會自動執行
      //this.page==0 是爲了this.skipQuery = false 初始化一下咱們的阿波羅
      if(this.page === 0) {
        this.skipQuery = false
        this.page = 1
        $state.loaded()
      } else {
        this.loadMore($state)
      }
    },
    loadMore($state) {
      if(this.page<5){
      this.$apollo.queries.companies.fetchMore({
        variables: {
          skip: this.page * this.storeLimit,
          take: this.storeLimit
        },
        updateQuery: (previousResult, { fetchMoreResult }) => {
          const pageInfo = _.get(fetchMoreResult, 'companies.pageInfo')
          const items = _.get(fetchMoreResult, 'companies.items', [])
          const hasMore = items.length && pageInfo.currPage < pageInfo.totalPage
          this.companyList = this.companyList.concat(items)

          if(hasMore) {
            this.page += 1
            $state.loaded()
          } else {
            $state.complete()
          }

        }
      })
      }else{
         $state.complete()
      }
    }
  },
  components: {
    InfiniteLoading
  }
}
</script>