© Joe Attardi 2020
J. AttardiUsing Gatsby and Netlify CMShttps://doi.org/10.1007/978-1-4842-6297-9_8

8. Blog Pagination

Joe Attardi1 
(1)
Billerica, MA, USA
 

Currently, we are displaying all of the blog posts on the index page. This is fine for just a handful of entries, but in most real-world sites, entries are broken up into pages. In this chapter, we will add some more blog entries and implement pagination.

How pagination works

We generate the list of blog posts by performing a GraphQL query. The query in its current form is shown in Listing 8-1.
{
  allMarkdownRemark(sort: { fields: frontmatter___date, order: DESC }) {
    edges {
      node {
        id
        frontmatter {
          title
          date(formatString: "MMMM D, YYYY")
        }
        fields ...

Get Using Gatsby and Netlify CMS: Build Blazing Fast JAMstack Apps Using Gatsby and Netlify CMS now with O’Reilly online learning.

O’Reilly members experience live online training, plus books, videos, and digital content from 200+ publishers.