Create Blazing Fast Websites with Gatsby and Drupal
    • Training Introduction
    • Gatsby Overview
      • Gatsby Intro
      • What is React?
      • What is GraphQL
      • Babel & Webpack
    • Modern JS Overview
      • JS Map Function
      • Let and Const
      • Template Strings (Interpolated Literals)
      • Arrow Functions
      • Destructuring
      • Async... Await
    • Installing Gatsby
    • Gatsby Building Blocks
      • Gatsby Starters
      • Plugins & Themes
      • Gatsby Pages
      • About Page Solution
      • Building with Components
      • Gatsby Link Component
    • Styles in Gatsby
      • CSS and SASS
      • CSS Modules
      • CSS in JS
      • Emotion
    • Nested Layout Components
      • Layout Solution
    • Data in Gatsby
      • GraphQL in Gatsby
      • Query Types
      • Gatsby Source Drupal
      • Create Lists of Content
      • Gatsby Image Component
    • Portfolio Challenge
    • Deploying to Netlify
    • Bonus Lessons
      • Gatsby Contact Form
      • Pagination
      • Live Preview
      • Build Hooks
      • Dynamic Content
      • Algolia Search
    • Thank You

  • Gatsby Docs
  • Code Karate

  • Star
    • Training Introduction
    • Gatsby Overview
      • Gatsby Intro
      • What is React?
      • What is GraphQL
      • Babel & Webpack
    • Modern JS Overview
      • JS Map Function
      • Let and Const
      • Template Strings (Interpolated Literals)
      • Arrow Functions
      • Destructuring
      • Async... Await
    • Installing Gatsby
    • Gatsby Building Blocks
      • Gatsby Starters
      • Plugins & Themes
      • Gatsby Pages
      • About Page Solution
      • Building with Components
      • Gatsby Link Component
    • Styles in Gatsby
      • CSS and SASS
      • CSS Modules
      • CSS in JS
      • Emotion
    • Nested Layout Components
      • Layout Solution
    • Data in Gatsby
      • GraphQL in Gatsby
      • Query Types
      • Gatsby Source Drupal
      • Create Lists of Content
      • Gatsby Image Component
    • Portfolio Challenge
    • Deploying to Netlify
    • Bonus Lessons
      • Gatsby Contact Form
      • Pagination
      • Live Preview
      • Build Hooks
      • Dynamic Content
      • Algolia Search
    • Thank You

  • Gatsby Docs
  • Code Karate

Pagination

Github logo Edit on GitHub

It's one thing to build a list of content, however, you might not want to load thousands of content items on a single page. There are many ways to tackle this problem, but those in the Drupal world will be very familiar with Pagers.

The gatsby-awesome-pagination plugin can be used to configure pagers on your lists of content. You can follow the examples in the corresponding Code Karate YouTube vidoe to see it in action.

Previous
Gatsby Contact Form
Next
Live Preview