codybarr / gridsome-infinite-loading-demo Goto Github PK

<template>
  <Layout>
		<div class="posts">
			<transition-group name="fade">
				<Post
					v-for="{ node } of loadedPosts"
					:key="node.id"
					:post="node"
				/>
			</transition-group>
			<ClientOnly>
				<infinite-loading @infinite="infiniteHandler" spinner="spiral">
					<div slot="no-more">
						You've scrolled through all the posts ;)
					</div>
					<div slot="no-results">
						Sorry, no posts yet :(
					</div>
				</infinite-loading>
			</ClientOnly>
		</div>
  </Layout>
</template>

<page-query>
query Home ($page: Int) {
  allWordPressPost (page: $page, perPage: 10) @paginate {
    pageInfo {
      totalPages
      currentPage
    }
    edges {
      node {
        id
        title
        date
        path
        excerpt
      }
    }
  }
}
</page-query>

<script>
// import { Pager } from 'gridsome'
import Post from '~/components/Post.vue'

export default {
  components: {
    // Pager,
    Post
  },
  	data() {
		return {
			loadedPosts: [],
			currentPage: 1
		}
	},
  metaInfo: {
    title: 'Welcome to my blog :)'
  },
  created() {
		this.loadedPosts.push(...this.$page.allWordPressPost.edges)
  },
  	methods: {
		async infiniteHandler($state) {
			if (this.currentPage + 1 > this.$page.allWordPressPost.pageInfo.totalPages) {
				$state.complete()
			} else {
				const { data } = await this.$fetch(
          // `/blog/${this.currentPage + 1}`
          `/${this.currentPage + 1}`
				)
				if (data.allWordPressPost.edges.length) {
					this.currentPage = data.allWordPressPost.pageInfo.currentPage
					this.loadedPosts.push(...data.allWordPressPost.edges)
					$state.loaded()
				} else {
					$state.complete()
				}
			}
		}
	}
}
</script>

<style>
.fade-enter-active,
.fade-leave-active {
	transition: ease opacity 0.3s;
}
.fade-enter,
.fade-leave-to {
	opacity: 0;
}

</style>