时间戳

首页 > 解决方案 > 如何正确地将 Graphql 查询结果分类，例如按类别组织博客文章

graphql - 如何正确地将 Graphql 查询结果分类，例如按类别组织博客文章

问题描述

我正在为一位自由作家在 Gatsby 网站上工作。我使用理智作为 CMS。我正在努力按类别而不是按日期对他们发表的作品进行分类和组织。如您所见，我的代码有效，但不是很健壮。我在想有一种更有效的方法来完成我想做的事情。我认为对于在反应中嵌套循环更有经验的人来说，答案在这里是显而易见的。

我一直在尝试各种循环，并在尝试嵌套循环以捕获cats变量和writing变量的结果时不断遇到问题。

const publishedList = () => {
  const data = useStaticQuery(graphql`
    query {
      allSanityPublishedWork {
        nodes {
          title
          category
          id
          publishedBy
          publishedDate
        }
        distinct(field: category)
      }
    }
  `);
  const writing = data.allSanityPublishedWork.nodes;
  const cats = data.allSanityPublishedWork.distinct;
  return (
    <div>
      <h3>{cats[0]}</h3>
      {writing
        .filter(pub => pub.category === cats[0])
        .map(pub => (
          <p>{pub.title}</p>
        ))}
      <h3>{cats[1]}</h3>
      {writing
        .filter(pub => pub.category === cats[1])
        .map(pub => (
          <p>{pub.title}</p>
        ))}
      <h3>{cats[2]}</h3>
      {writing
        .filter(pub => pub.category === cats[2])
        .map(pub => (
          <p>{pub.title}</p>
        ))}
    </div>
  );
};

export default publishedList;

正如您在我的代码示例中看到的那样，我依赖于指定数组编号，因此cats[0]这不是实现此目的的可靠方法，因为我需要知道可能随时间变化的类别的确切数量。应该有一种方法可以遍历此查询的结果，并以比我上面所做的更有效和更有弹性的方式执行以下操作：

等等。

标签： graphqlgatsby

解决方案

你在找这个吗？

cats.map(cat => (
  <>
    <h3>{cat}</h3>
    {writing
      .filter(pub => pub.category === cat)
      .map(pub => (
       <p>{pub.title}</p>
    ))}
  </>
))

尽管如此，如果您可以影响 GraphQL 模式的外观，我强烈建议您以更适合您需求的方式设计模式。

推荐阅读