Question

“无法读取未定义的属性‘page’”-Gatsby 和 Prismic 在 gatsby-node 中为模板创建分页

2019-10-03

877

javascript reactjs gatsby prismic.io

我希望有人遇到过类似的事情，并能给我一些正确的建议。

我正在使用 gatsby 构建一个博客，内容来自 Prismic。每篇博文都有一个通过 Prismic 内容关系与其相关的作者和标签。我的目标是通过 gatsby-node 为作者和标签页面动态创建页面，其中还包括其相关博文的分页。不幸的是，Prismic 似乎无法建立双向关系，因此我必须通过在我的 allPrismicBlog 上执行 graphql 查询来过滤作者 uid，从而找到相关的博客文章。

我尝试完成的 URL 示例： myblog.com/author/author-name/ myblog.com/author/author-name/2

我的 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,
        },
      }),
    );
  });
};

我收到错误 TypeError：无法读取未定义的属性“page”

我不确定我在这里尝试做的事情是否正确，或者我是否遗漏了重要的东西。任何帮助都将不胜感激。

Answer 1

上面的代码没有显示任何 page 变量。

也许这样可以帮助我查看整个代码？

也许您忘记事先定义 page 变量了

Answer 2

想出了一个解决方案，想在这里分享，以防将来其他人遇到类似的事情。

我没有尝试使用作者 uid 查询博客文章并处理两个查询的异步性质，而是只是过滤 blogList 并基于此创建页面。在重构过程中可能有几种方法可以改进此代码，但我想分享我所做的工作。

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,
        },
      });
    }
  });