"Cannot read property 'page' of undefined" - Gatsby and Prismic creating pagination for template in gatsby-node

Question

I'm hoping that someone has run into something similar and can give me some advice in the right direction.

I'm building out a blog using gatsby with content pulled from Prismic. Each blog post has an author and tag related to them via Prismic Content Relationship. My goal is to dynamically create pages via gatsby-node for the author and tag pages that also include pagination for their related blog posts. Prismic unfortunately doesn't seem to create a relationship going both ways, so I have to find related blog posts by doing a graphql query on my allPrismicBlog filtering for author uid.

example of the urls i'm trying to accomplish: myblog.com/author/author-name/ myblog.com/author/author-name/2

I have the following in my gatsby-node:

exports.createPages = async ({ graphql, actions }) => {
  const { createPage } = actions;
const authors = await graphql(`
    {
      allPrismicAuthor {
        edges {
          node {
            uid
          }
        }
      }
    }
  `);
  authors.data.allPrismicAuthor.edges.forEach(edge => {
    const authorUid = edge.node.uid;
    const authorPosts = graphql(`
    {
      allPrismicBlog(filter: { data: { author: { uid: { eq: ${authorUid} } } } }) {
        edges {
          node {
            uid
        }
      }
    }
    `);
    const numAuthorPages = Math.ceil(authorPosts.length / 2);
    Array.from({ length: numAuthorPages }).forEach((_, i) =>
      createPage({
        path: i === 0 ? `/author/${authorUid}` : `/author/${authorUid}/${i + 1}`,
        component: path.resolve('./src/templates/author.jsx'),
        context: {
          limit: 2,
          skip: i * 2,
          numPages,
          currentPage: i + 1,
          uid: authorUid,
        },
      }),
    );
  });
};

I'm getting the error TypeError: Cannot read property 'page' of undefined

I'm not sure if what I'm trying to do here is the right direction or if I'm missing something important. Any help would be greatly appreciated.

score 0 · Answer 1 · answered Oct 03 '19 at 15:12

0

The code above does not show any page variables.

maybe so that can help me be able to see the code as a whole?

maybe you forgot to define the page variable beforehand

answered Oct 03 '19 at 15:12

Rizky Kurniawan

67
1
4

I believe that is coming from gatsby when I'm using `createPage`. I don't have to define a `page` variable anywhere as a part of generating a page using gatsby templates. For example the following works to create just the author pages without any pagination: – clkent Oct 03 '19 at 15:35
doing the authors qraphql query and then looping through the results... authors.data.allPrismicAuthor.edges.forEach(edge => { createPage({ path: `/author/${edge.node.uid}`, component: pageTemplates.Author, context: { uid: edge.node.uid, }, }); }); – clkent Oct 03 '19 at 15:36
Have you tried configuring GraphQL by entering a query? – Rizky Kurniawan Oct 03 '19 at 15:47

score 0 · Answer 2 · answered Oct 04 '19 at 16:43

Figured out a solution and wanted to share here in case anyone else runs into something similar in the future.

Instead of trying to query for the blog posts with the author uid and dealing with the async nature of the two queries I am just filtering the blogList and creating pages based on that. There's probably several ways to improve this code during a refactor but wanted to share what I got working.

const blogList = await graphql(`
    {
      allPrismicBlog(sort: { fields: [data___blog_post_date], order: DESC }, limit: 1000) {
        edges {
          node {
            uid
            data {
              author {
                uid
              }
              tag {
                uid
              }
            }
          }
        }
      }
    }
  `);

 const posts = blogList.data.allPrismicBlog.edges;

const authors = await graphql(`
    {
      allPrismicAuthor {
        edges {
          node {
            uid
          }
        }
      }
    }
  `);

  authors.data.allPrismicAuthor.edges.forEach(edge => {
    const authorUid = edge.node.uid;

    const authorBlogs = posts.filter(post => post.node.data.author.uid === authorUid);
    const numAuthorPages = Math.ceil(authorBlogs.length / 1);

    for (let i = 0; i <= numAuthorPages; i++) {
      createPage({
        path: i === 0 ? `/author/${authorUid}` : `/author/${authorUid}/${i + 1}`,
        component: pageTemplates.Author,
        context: {
          limit: 1,
          skip: i * 1,
          numPages,
          currentPage: i + 1,
          uid: authorUid,
        },
      });
    }
  });

"Cannot read property 'page' of undefined" - Gatsby and Prismic creating pagination for template in gatsby-node

2 Answers2