kaumac / gatsby-prismic-pagination

A little help to get your gatsby-source-prismic-graphql based project paginating

gatsby-prismic-pagination

A little help to get your prismic.io based Gatsby project paginating.

Pre-requisites

• This plugin assumes you are using gatsby-source-prismic-graphql as your Gatsby source

Example usage

Create the paginated index pages:

In gatsby-node.js:

const { prismicPagination } = require('gatsby-prismic-pagination')

exports.createPages = async ({ graphql, actions }) => {
  const { createPage } = actions

  await prismicPagination({
    graphql,
    createPage,
    component: path.resolve(`./src/components/PrismicIndex.tsx`), // Just like for createPage
    pathPrefix: '/blog', // Generated as e.g. /blog then /blog/2 etc.
    postsPerPage: 15, // Also the amount per call to server
    prismicConnectionName: 'allBlog_posts',
    prismicConnectionArgs: {
      sortBy: 'date_DESC',
    },
    nodeFields: ['title'], // You might want to use from destructured return later...
    nodeMeta: ['tags']
  })
}

Get all posts at once

The plugin will keep querying prismic until it has all your posts. This saves you writing your own loop for prismic's 20 post limit per query:

const { allPosts } = await prismicPagination(...yourArgsLikeBefore) // Still creates index pages

// We now have all posts in a single array rather than in prismic paged responses
// so it's easier to construct individual gatsby pages
allPosts.forEach(x => {
  let titleText = x.node.title[0].text
  const slug = yourFnToCreatePath(titleText) // Or maybe you want to use a UID?
  createPage({
    path: slug,
    component: path.resolve(`./src/components/SinglePrismicBlogPost.tsx`),
    context: {
      // Data passed to context is available
      // in page queries as GraphQL variables.
      slug: slug,
      id: x.node._meta.id,
    },
  })
})

Template usage with next/previous links

const PrismicIndex = ({ data, pageContext }) => {
  return (
    <main>
      {data.prismic.allBlog_posts.edges.map((edge, index) => (
            <div key={index}>
              <Link
                to={yourFnToCreatePath(edge.node.title[0].text)}
              >
                {edge.node.title[0].text}
              </Link>
            </div>
        )
      )}

        <footer>
          {pageContext.nextPagePath && (
            <Link to={pageContext.nextPagePath}>Next</Link>
          )}

          {pageContext.previousPagePath && (
            <Link to={pageContext.previousPagePath}>Previous</Link>
          )}
        </footer>
      </main>
    </Layout>
  );
};
export default PrismicIndex;

export const query = graphql`
  query($first: Int = 2, $after: String) {
    prismic {
      allBlog_posts(
        sortBy: date_DESC,
        first: $first,
        after: $after
        ) {
        edges {
          node {
            title
            excerpt
            featured_image
            author
            date
          }
        }
        pageInfo {
          hasNextPage
          hasPreviousPage
          startCursor
          endCursor
        }
      }
    }
  }
`;

Types of prismicConnectionArgs

You can provide enum, string and array values here:

const prismicConnectionArgs: {
  someEnumValue: 'date_DESC', // Enum value
  someMatchingStringSelector: `"myString"`,
  someArray: ["tag1", "tag2"]
}

This will be provided back to your template in the pageContext which also makes them available in graphQl variables.

Other pagination options

If your emphasis is less on speed and SEO and more on publishing an article with instant feedback, then the source plugin has an example of run-time pagination: https://github.com/birkir/gatsby-source-prismic-graphql/tree/master/examples/pagination

Contributing

The plugin is written in typescipt and has rudimentary snapshot based coverage. Please see the package.json for available scripts to build and test locally.

Todos

• Update tests to parse the graphql query in a structured manner rather than a string snapshot