Paginate data

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

Paginated collections

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

query Blog($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 Category($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 Blog($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
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