"Невозможно прочитать свойство 'page' из undefined" - Gatsby и Prismic создают пагинацию для шаблона в gatsby-node

Question

Я надеюсь, что кто-то столкнулся с чем-то подобным и может дать мне несколько советов в правильном направлении.

Я создаю блог, используя gatsby, с контентом, взятым из Prismic. У каждого сообщения в блоге есть автор и тег, связанный с ними через Prismic Content Relationship. Моя цель - динамически создавать страницы через gatsby-node для автора и теги страниц, которые также включают нумерацию страниц для соответствующих сообщений в блоге. К сожалению, Prismic, похоже, не создает отношения, идущие обоими путями, поэтому мне нужно найти похожие посты в блоге, выполнив запрос graphql в моей фильтрации allPrismicBlog по uid автора.

пример URL, которые я пытаюсь сделатьвыполнить: myblog.com/author/author-name/ myblog.com/author/author-name/2

У меня в gatsby-узле есть следующее:

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 'Я получаю сообщение об ошибке TypeError: Cannot read property 'page' of undefined

Я не уверен, является ли то, что я пытаюсь сделать здесь, правильным направлением или я упускаю что-то важное. Любая помощь будет принята с благодарностью.

Answer 1

Придумал решение и хотел бы поделиться здесь на случай, если кто-нибудь еще столкнется с чем-то подобным в будущем.

Вместо того, чтобы пытаться запросить сообщения в блоге с помощью uid автора и иметь дело с асинхронной природой двух запросов, я просто фильтрую список блогов и создаю страницы на основе этого. Вероятно, есть несколько способов улучшить этот код во время рефакторинга, но я хотел поделиться тем, что у меня получилось.

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

Answer 2

Приведенный выше код не отображает никаких page переменных.

может быть, что поможет мне увидеть код целиком?

возможно, вы забылиопределить переменную page заранее