#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>