Pagination in Gatsby

Veröffentlicht am: 16. April 2020

Lesedauer: 1 Min.

Kategorien:
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