Pagination on Scroll with Gatsby

Developing with Prismic
1

Background

I am using Gatsby and the community plugin GitHub - birkir/gatsby-source-prismic-graphql: Gatsby source plugin for Prismic GraphQL to build a static site. I would like to display 100+ instances of published content from Prismic on a single page. To do this, I am using GraphQL. The GraphQL client only allows 20 results per query. In order to get more results I need to paginate the results as described here: Query Data with GraphQL - Prismic. I would like to render more pages of results automatically as the user scrolls.

Problem

Gatsby generates a static site, so this means all queries must be run at build time. However, the GraphQL interface doesn't have a way to construct static queries for pagination. The plugin gatsby-source-prismic-graphql provides some guidance on this but the paginated queries are throwing errors. Is there a way to create Gatsby queries for scrolling pagination?

3

Hey @dturkington!

We don't have an example built with Prismic for this yet. But I found two examples, one using the plugin and one from the dev community that may be helpful to you:

(baobabKoodaa) proposes to implement infinite scroll or pagination to your Gatsby site:

Github code: https://github.com/baobabKoodaa/gatsby-starter-infinite-scroll
Demo: https://gatsby-starter-infinite-scroll.baobab.fi/

7

This topic was automatically closed 24 hours after the last reply. New replies are no longer allowed.