如何在Gatsbyjs的allWpCategory中仅显示每个分类的首篇文章标题？

你的代码问题出在遍历posts.nodes时的逻辑错误：post是数组中的单个文章对象，并非数组，所以post[0]无法获取到值；而直接遍历整个数组会输出所有文章标题。下面提供两种可行的解决方式：

方式一：前端直接提取首篇文章（无需修改查询） #

直接从category.node.posts.nodes数组中取出第一个元素，不需要遍历整个数组，同时添加空值判断避免报错：

const { allWpCategory : data } = myCategoryQuery();
{data.edges.map(category => {
  // 获取当前分类下的第一篇文章
  const firstPost = category.node.posts.nodes[0];
  return (
    <div key={category.node.id}>
      {category.node.name}
      {/* 仅当存在文章时才渲染 */}
      {firstPost && <div key={firstPost.id}>{firstPost.title}</div>}
    </div>
  )
})}

方式二：在GraphQL查询时限制返回首篇文章（性能更优） #

在查询阶段就给每个分类的posts字段添加limit:1，只拉取第一篇文章，减少不必要的数据传输：

修改查询钩子： #

export const myCategoryQuery = () => {
  const data = useStaticQuery(graphql`
    query AllCategoryQuery {
      allWpCategory(limit: 10) {
        edges {
          node {
            id
            name
            posts(limit: 1) { # 添加limit限制只返回第一篇文章
              nodes {
                title
                uri
              }
            }
          }
        }
      }
    }
  `)
  return data;
}

前端渲染代码（同方式一）： #

const { allWpCategory : data } = myCategoryQuery();
{data.edges.map(category => {
  const firstPost = category.node.posts.nodes[0];
  return (
    <div key={category.node.id}>
      {category.node.name}
      {firstPost && <div key={firstPost.id}>{firstPost.title}</div>}
    </div>
  )
})}

两种方式中，方式二更推荐，因为它从数据源层面减少了数据量，提升页面加载性能。

内容的提问来源于stack exchange，提问作者Devbuddy