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

Question

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

我一直在尝试各种循环，当我尝试嵌套循环以捕获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]这不是实现此目的的可靠方法，因为我需要知道可能随时间变化的类别的确切数量。 应该有一种方法可以从此查询中循环浏览我的结果，并以比我上面所做的更有效和更有弹性的方式执行以下操作：

• 类别标题

  • 文章名称、日期、发布者
  • 文章名称、日期、发布者
  • 文章名称、日期、发布者

• 类别标题

  • 文章名称、日期、发布者
  • 文章名称、日期、发布者
  • 文章名称、日期、发布者

• 类别标题

  • 文章名称、日期、发布者
  • 文章名称、日期、发布者
  • 文章名称、日期、发布者

等。

Answer 1

你在找这个吗？

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

不过，如果你能影响 GraphQL 模式的外观，我强烈建议你以更适合你需求的方式设计你的模式。