Wp Graphql Vue Pagination

Pagination.vue

1. Regular post query with pagination fields
2. include the Pagination Component
3. The actual pagination.

----------------


1. const postsQuery = gql`
query GetAllPosts ($first: Int, $last: Int, $endCursor: String, $startCursor: String) {
      posts(first:$first last:$last after:$endCursor before:$startCursor) {
        edges {
          node {
            title
            date
            id
            slug
            excerpt
            featuredImage {
              node{
              	sourceUrl 
                srcSet
                altText
                id
              }
            }
          }
          cursor
        }
      pageInfo {
        hasNextPage
        startCursor
        endCursor
        }
      }
    }
  `
2. <Pagination :posts="posts" :postsQuery="postsQuery" @updatePosts="updatePosts" :limit="10"/>


/*Pagintion Component*/


3. <template>
  <div class="pagination">
    <a v-if="hasPreviousPage" @click="paginate(-1)" class="prev">← Previous Page</a>
    <a v-if="hasNextPage" @click="paginate(+1)" class="next">Next Page →</a>
  </div>
</template>

<script>
export default {
  name: 'Pagination',
  data () {
    return {
      firstStartCursor: this.posts.data.posts.pageInfo.startCursor,
      hasNextPage: this.posts.data.posts.pageInfo.hasNextPage,
      hasPreviousPage: false,
      first: null,
      last: null,
      startCursor: null,
      endCursor: null
    }
  },
  props: {
    posts: {
      type: Object
    },
    postsQuery: {
      type: Object
    },
    limit: {
      type: Number
    },
    where: {
      type: Object
    }
  },
  methods: {
    async paginate(i){
      if (i < 0) {
        this.first = null
        this.last = this.limit
        this.startCursor = this.posts.data.posts.pageInfo.startCursor
        this.endCursor = null
      } else if (i > 0) {
        this.first = this.limit
        this.last = null
        this.startCursor = null
        this.endCursor = this.posts.data.posts.pageInfo.endCursor
      }

      await this.$apolloProvider.defaultClient
        .query({
          query: this.postsQuery,
          variables: {
            first: this.first,
            last: this.last,
            endCursor: this.endCursor,
            startCursor: this.startCursor,
            where: this.where
          }
        }).then((posts) => {
          this.$emit('updatePosts', posts)
          if (i < 0) {
            this.hasNextPage = true
            this.hasPreviousPage = (this.firstStartCursor == posts.data.posts.pageInfo.startCursor ? false : true)
          } else {
            this.hasPreviousPage = true
            this.hasNextPage = posts.data.posts.pageInfo.hasNextPage
          }
        })
         window.scroll({ top:0, left:0, behavior:'smooth' });        
    }
  }
};
</script>
<style scoped>
.pagination{
  display: flex;
  margin: 15px auto 0px;
  max-width: 900px;
  padding: 0 10px;
  a:hover{
    cursor: pointer;
    color: #4b7bdf;
  }
}
.next{
  margin-left: auto;
}
</style>

Hi there.
I couldn't succeed using these with Gridsome. Would be great if you can help with a Gridsome example.

Hmmm probably could do with a upgrade

what version wp graghql are you using?

I am using latest version of WPGraphQL. It's 6.1 at the moment.

This is my posts page

<template>

	<div>
		<div>
			<div v-for="{ node } in $static.WordPress.posts.edges" :key="node.id">
				<Post :post="node"></Post>
			</div>
		</div>
		<div>
			<Pagination :posts="posts" :postsQuery="postsQuery" @updatePosts="updatePosts" :limit="3"></Pagination>
		</div>
	</div>

</template>

<static-query>
    query GetAllPosts ($first: Int, $last: Int, $endCursor: String, $startCursor: String) {
      WordPress {
        posts (first:$first last:$last after:$endCursor before:$startCursor) {
          pageInfo {
            endCursor
            hasNextPage
            hasPreviousPage
            startCursor
          }
          edges {
            cursor
            node {
              id
              title
              content
              uri
              date
              excerpt
              featuredImage {
                node {
                  mediaItemUrl 
                  altText
                }
              }
            }
          }
        }
      }
    }
</static-query>

<script>
    import Post from "~/components/PostCard";
    import Pagination from "~/components/Pagination";
    export default {
        name: "Blog",
        components: {Post, Pagination}
    }
</script>

@idesignzone do you have a repo for me to view the code?

(especially the pagination component)

thanks

I create a repo for Gridsome and WPGraphQL. https://github.com/idesignzone/gridsome-minimum.git.