Pagination in Gatsby
Veröffentlicht am: 16. April 2020
Lesedauer: 1 Min.
export const allCategoriesQuery = graphql`
query AllCategoriesQuery($skip: Int!, $limit: Int!) {
allContentfulCategory(sort: {order: ASC, fields: title}, limit: $limit, skip: $skip) {
nodes {
title
slug
id
blog_post {
title
}
}
}
}
`
const {numberOfPages, currentPage} = props.pageContext
const isFirstPage = currentPage === 1
const isLastPage = currentPage === numberOfPages
const nextPage = `/categories/${currentPage + 1}`
const previousPage = currentPage - 1 === 1 ? '/categories' : `/categories/${currentPage - 1}`
<Box display="flex" justifyContent="space-around">
{!isFirstPage && (<Link to={previousPage} rel='prev'>Previous Page</Link>)}
{!isLastPage && (<Link to={nextPage} rel='next'>Next Page</Link>)}
</Box>
const categories = result.data.allCategories.nodes
const categoriesPerPage = 3
const numberOfPages = Math.ceil(categories.length / categoriesPerPage)
Array.from({ length: numberOfPages }).forEach((v,i) => {
createPage({
path: i === 0 ? '/categories' : `/categories/${i + 1}`,
component: require.resolve('./src/templates/all-categories.js'),
context: {
limit: categoriesPerPage,
skip: i * categoriesPerPage,
numberOfPages,
currentPage: i + 1
}
})
})
Articles in related Categories
18. März 2020
16. April 2020
16. April 2020