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

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

你的问题是你想访问params的propid，但是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，应该没问题。