Pagination blog post category

Developing with Prismic
4

Hi Phil, thanks very much for posting this, it has helped and I have something that seems to be working mostly how I want it to (caveat coming later in this post though...)

The code in this post was particularly useful, but mine ended up being a little different in the end:

I tried the do while loop, but it just returned all posts, whereas removing the loop and just fetching the posts needed for the page (as shown in my code below) seemed to work. Not sure why, or if this means I'm doing something wrong with my code.

The one issue I'm having is the page is rendering for invalid page numbers. I.e., I could go to /blog/category/category-name/300 and it the page would render, even though there aren't 300 pages. There would be no data returned from getStaticProps, but I would hope that this would return a 404 page instead of a blank page without data.

I wasn't sure if this was something I was doing wrong? (perhaps due to the do while loop). I'm new to Next (coming from Gatsby previously) so am unfamiliar with how these situations are handled, perhaps it's convention to just redirect to 404 page if no data?

For anyone who would find it useful, here are my getSaticProps and getStaticPaths methods in my /blog/category/[uid]/[page].js file

export const getStaticProps = async ({ params }) => {
  const category = (await Client().getByUID('blog-category', params.uid)) || {};

  const posts = await Client().query(
    [
      Prismic.Predicates.at('document.type', 'blog-post'),
      Prismic.Predicates.at('my.blog-post.category', category.id),
    ],
    {
      pageSize: 1,
      page: params.page,
      orderings: '[document.first_publication_date desc]',
    },
  );

  return {
    props: {
      params: params,
      posts,
      category,
    },
  };
};



export const getStaticPaths = async () => {
  const categories = await Client().query(
    Prismic.Predicates.at('document.type', 'blog-category'),
  );

  const data = [];

  for (const cat of categories.results) {
    const categoryBlogPosts = await Client().query(
      [
        Prismic.Predicates.at('document.type', 'blog-post'),
        Prismic.Predicates.at('my.blog-post.category', cat.id),
      ],
      { orderings: '[my.blog-post.date desc]', page: 1, pageSize: 1 },
    );

    data.push(
      Array.from(Array(categoryBlogPosts.total_pages).keys()).map((x) => ({
        uid: cat.uid,
        page: `${x + 1}`,
        total_pages: categoryBlogPosts.total_pages,
      })),
    );
  }

  return {
    paths: data.flat().map((doc) => ({
      params: {
        page: doc.page,
        total_pages: doc.total_pages,
        uid: doc.uid,
      },
    })),
    fallback: true,
  };
};