Question

问题

我不能通过 slug 查询 API，它必须通过 id。 KeystoneJS headless CMS 通过 API 提供数据，我的 NextJS 应该在静态生成的 Next.js 应用程序中使用这些数据。 Keystone API 必须像这样查询：

所有帖子：(ALL_POSTS_QUERY)


query {
  allPosts {
    id
    slug
    title
  }
}

单个帖子：(POST_QUERY)

query {
  Post(where: { id: $id }) {
   title
   body
  }
}

我确实使用 Apollo Client 连接到 API 端点。

对单个帖子的查询必须按上述格式进行格式化，并带有 id 变量，这似乎是问题所在。我需要通过 slug 而不是通过 id 生成静态页面。

功能

getStaticPaths()

export const getStaticPaths = async () => {
  const { data } = await apolloClient.query({
    query: ALL_POSTS_QUERY,
  });

  return {
    paths: data.allPosts.map(({ id, slug }) => ({
      params: { slug: slug },
    })),
    fallback: false,
  };
};

getStaticProps()

export const getStaticProps = async ({ params }) => {
  const id = params.id;
  const { data } = await apolloClient.query({
    query: POST_QUERY,
    variables: {
      id,
    },
  });
  return {
    props: {
      term: data.Post,
    },
  };
};

有关 KeystoneJS generated APIs 的更多信息。

请帮忙

我对开发很陌生，所以我对此的理解仍然很基本。如果我误解了逻辑，请道歉。请任何人都可以帮助我解决我的功能出错的地方吗？我找不到其他人尝试通过 slug 构建动态路由，但通过 id 查询 API 以检索该帖子的数据。

Answer 1

您的问题是您想访问 id 的属性 params，但 params.id 根本不存在。存在的是params.slug。如果您想通过 id，请将您的代码更改为：

export const getStaticPaths = async () => {
  const { data } = await apolloClient.query({
    query: ALL_POSTS_QUERY,
  });

  return {
    paths: data.allPosts.map(({ id, slug }) => ({
      params: { id },
    })),
    fallback: false,
  };
};

现在您正在通过 id 而不是 slug，应该没问题。

getStaticProps() 和 getStaticPaths() 哪里出错了？

问题

功能

请帮忙

1 个答案: