DEV Community

loading...

Add the pagination on Gridsome site

phongduong profile image Phong Duong Originally published at phongduong.dev on ・1 min read

To add the pagination for the site, you use @paginate in your GraphQL query. The query will receive a $page: Int parameter. The default number of nodes per page is 25.

<page-query>
query ($page: Int) {
  allPost(page: $page) @paginate {
    pageInfo {
      totalPages
      currentPage
    }
    ...
  }
}
</page-query>
Enter fullscreen mode Exit fullscreen mode

Gridsome provides a Pager component for pagination. You import the component from gridsome and place it in your template. It requires a page's info property. This property is an object that 2 properties: totalPages and currentPage. You can get these 2 properties from pageInfo of your query.

<template>
  <Layout>
    <Pager 
      :info="$page.allPost.pageInfo" 
      :showNavigation="false" 
      range="10"
      linkClass="pager-link"
     />
  </Layout>
</template>

<script>
import { Pager } from 'gridsome'

export default {
  components: {
    Pager
  }
}
</script>

<page-query>
query ($page: Int) {
  allPost(page: $page) @paginate {
    pageInfo {
      totalPages
      currentPage
    }
    ...
  }
}
</page-query>
Enter fullscreen mode Exit fullscreen mode

You can also customize the Pager component's properties like show links and navigation, the number of links to show, or the custom class of links for styling.

Discussion

pic
Editor guide
Collapse
saikiruthi profile image
saikiruthi

Is it possible to add three dots in pagination

Collapse
mskian profile image
Santhosh Veer

Clearly Explained