Paginate data

Use the @paginate directive in your GraphQL query to add automatic pagination for a collection. The query will receive a $page: Int variable you can use to load sources for a specific page. Default nodes per page are 25.

Paginated collections

Place the @paginate directive after the collection you want to paginate.

query ($page: Int) {
  allBlogPost(perPage: 10, page: $page) @paginate {
    pageInfo {
      totalPages
      currentPage
    }
    edges {
      node {
        id
        title
        path
      }
    }
  }
}

Paginated taxonomy pages

Place the @paginate directive after the belongsTo field you want to paginate.

query ($page: Int) {
  category {
    title
    belongsTo(perPage: 10, page: $page) @paginate {
      pageInfo {
        totalPages
        currentPage
      }
      edges {
        node {
          ... on Post {
            id
            title
            path
          }
        }
      }
    }
  }
}

Pager component

Gridsome has a built-in Pager component for easy pagination. Import it from gridsome in our components to use it. The component needs at least the pageInfo.totalPages and pageInfo.currentPage fields to render correctly.

Example usage

<template>
  <Layout>
    <ul>
      <li v-for="edge in $page.allBlogPost.edges" :key="edge.node.id">
        {{ edge.node.title }}
      </li>
    </ul>
    <Pager :info="$page.allBlogPost.pageInfo"/>
  </Layout>
</template>

<script>
import { Pager } from 'gridsome'

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

<page-query>
query ($page: Int) {
  allBlogPost(perPage: 10, page: $page) @paginate {
    pageInfo {
      totalPages
      currentPage
    }
    edges {
      node {
        id
        title
      }
    }
  }
}
</page-query>
PropertyDefault
inforequiredPage info from GraphQL result with totalPages
showLinkstrueShow navigation links
showNavigationtrueShow previous and next links
range5How many links to show
linkClassAdd custom classes to the links
activeLinkClassAdd custom classes to the active link
exactActiveLinkClassAdd custom classes to the exact active link
firstLabel«
prevLabel
nextLabel
lastLabel»
ariaLabelPagination Navigation
ariaLinkLabelGo to page %n
ariaFirstLabelGo to first page
ariaCurrentLabelCurrent page. Page %n
ariaPrevLabelGo to previous page. Page %n
ariaNextLabelGo to next page. Page %n
ariaLastLabelGo to last page. Page %n

Edit this page on GitHub