Pagination on Scroll with Gatsby

Background

I am using Gatsby and the community plugin https://github.com/birkir/gatsby-source-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: https://prismic.io/docs/graphql/query-the-api/paginate-your-results. 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?

Hey @dturkington!

We don’t have an example built with Prismic for this yet. But i found this example from the dev community (baobabKoodaa) that maybe it’s helpful to you.

What he proposes is 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/