reactjs - 如何在使用 getStaticPaths 的类别中使用嵌套的 getStaticPaths 制作帖子文件？（使用 API）

Question

［Next.js］ 使用 Headless CMS WordPress 和插件 [WPGraphQL]，我能够通过调用 getStaticPaths 中的 API 创建类别列表。

ｓｒｃ
--pages
----category
------[slug.tsx]　
--------page
----------[pageNo.tsx]

[slug].tsx 中描述了以下 getStaticPaths

export async function getStaticPaths () {
  const allPosts = await GET_ALL_CATEGORIRS_SLUG ();
  return {
    paths: paths:
      allPosts.edges.map (({node}) => `/category/${node.slug}`) ||
      [],
    fallback: true,
  };
}

[pageNo].tsx 中描述了以下 getStaticPaths

export async function getStaticPaths() {
  const totalCount = await GET_TOTAL_POST_COUNT(currentCategorySlug);
  const totalPostsCount = totalCount.pageInfo.offsetPagination.total ?? 0;

  const pagesCount = Math.ceil(
    (totalPostsCount - PER_PAGE_FIRST) / PER_PAGE_REST + 1
  );

  const paths = new Array(pagesCount).fill("").map((_, index) => ({
    params: {
      pageNo: (index + 1).toString(),
    },
  }));

  return {
    paths: [...paths],
    fallback: true,
  };
}

但是，除非currentCategorySlug明确，否则这不起作用。

如何获取当前的父类别？

我不能在这里使用 useRouter，所以请告诉我是否有办法获取currentCategorySlug或其他东西。还是您在某处使用 useRouter ？

Answer 1

这是一个有点粗糙的代码，但我已经解决了它，所以我会描述它。

export async function getStaticPaths() {
  const allCategoryAndPosts = await GET_ALL_CATEGORY_AND_POSTS();
  var paths = new Array();
  allCategoryAndPosts.edges.map(({ node }) => {
    const totalPostsCount = node.posts.pageInfo.offsetPagination.total ?? 0;
    const pagesCount = Math.ceil(
      (totalPostsCount - PER_PAGE_FIRST) / PER_PAGE_REST + 1
    );
    for (let index = 1; index <= pagesCount; index++) {
      paths.push(`/category/${node.slug}/page/${index}` || []);
    }
  });

  return {
    paths: [...paths],
    fallback: true,
  };
}