Rolled My Own Pager

Infinity scroll or pager
I opted to implement a pager on Roxberry.DEV
Pager.js
Followed the guidance on the Gatsby site to query and set pages in the gatsby-node.js file, added a posts.js template and moved the Pager code to a separate file, pager.js.
import React from "react"
import { Link } from "gatsby"
const Pager = ({
isFirst,
isLast,
prevPage,
nextPage,
currentPage,
numPages,
}) => {
return (
<ul
className="post-pager"
style={{
display: "flex",
flexWrap: "wrap",
alignItems: "center",
listStyle: "none",
paddingInlineStart: 0,
}}
>
{!isFirst && (
<Link to={prevPage} rel="prev" style={{ marginRight: 20 }}>
← Previous Page
</Link>
)}
{Array.from({ length: numPages }, (_, i) => (
<li
key={`pagination-number${i + 1}`}
style={{
margin: 20,
}}
>
<Link
to={`/${i === 0 ? "" : i + 1}`}
style={{
textDecoration: "none",
color: i + 1 === currentPage ? "#ffffff" : "",
background: i + 1 === currentPage ? "#007acc" : "",
}}
>
{i + 1}
</Link>
</li>
))}
{!isLast && (
<Link to={nextPage} rel="next" style={{ marginLeft: 20 }}>
Next Page →
</Link>
)}
</ul>
)
}
export default Pager
Pager then can be added to a page template, posts.js:
import Pager from "../components/Pager"
Set the values, per the Gatsby documentation,
const { currentPage, numPages } = this.props.pageContext
const isFirst = currentPage === 1
const isLast = currentPage === numPages
const prevPage =
currentPage - 1 === 1 ? "/" : "/" + (currentPage - 1).toString()
const nextPage = "/" + (currentPage + 1).toString()
And then placed in the component hierarchy of the page (note the properties for the component passed in).
<Pager
isFirst={isFirst}
isLast={isLast}
prevPage={prevPage}
nextPage={nextPage}
currentPage={currentPage}
numPages={numPages} />