2

问题

我不能通过 slug 查询 API，它必须是通过 id。通过KeystoneJS headless CMSAPI 提供数据，我的 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 生成的 API的更多信息。

请帮忙

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

4

1 回答 1

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而不是slugand 应该没问题。

于 2021-01-26T17:54:21.417 回答