通过Gatsby和GraphQL中的标签获取相关新闻

Question

我一直在尝试获取GraphQL中文章的相关新闻。每篇文章都有一个或多个标签，基于这些标签，它需要通过一个新的查询查找多达3篇相关文章。

如有任何帮助，我们将不胜感激。

我的查询如下：

strapiArticles(Slug: { eq: $slug }) {
strapiId
Title
Date
Content
tags {
tag
slug
}
Image {
publicURL
}
}
}

标签位看起来像：

"tags": [
{
"tag": "Tag 1",
"Slug": "tag-1"
},
{
"tag": "Tag 2",
"Slug": "tag-2"
}
]

我尝试过在上下文中传递标记，但Gatsby不支持上下文中的数组或对象。像这样：

createPage({
path: `news/${edge.node.Slug}`,
component: path.resolve("src/templates/news-post.js"),
context: {
tag: edge.node.tags,
slug: edge.node.Slug,
}
})

Answer 1

但Gatsby不支持上下文中的数组或对象。

这不是真的。您可以通过上下文发送一系列标签，但您需要首先准备数据：

let allTagsFromNode= edge.node.tags.map(tag=> tag.tag);

这应该返回像["Tag 1", "Tag 2"]这样的结构中特定新的所有标签名称(tag(。如果需要，可以稍微调整一下以获得一个简单的一维数组。

createPage({
path: `news/${edge.node.Slug}`,
component: path.resolve("src/templates/news-post.js"),
context: {
allTagsFromNode,
slug: edge.node.Slug,
}
})

注意：因为发送allTagsFromNode的密钥与值相同，所以可以省略通过allTagsFromNode: allTagsFromNode发送

然后，在news-post.js模板中，您的查询应该如下所示：

export const newsData = graphql`
query getNewsInformation ($slug: String!, $author: String, $allTagsFromNode: [String!]) {
## your news query
relatedArticles: strapiArticles(
filter: {
tags: {elemMatch: {tag: {in: $allTagsFromNode}}}, 
Slug: {ne: $slug}},
limit: 3) {
edges {
node {
## your node fields
}
}
}
}
`;

在调整查询以使其适应您的需求(因为我不知道您的数据结构是什么样子的(以及添加新闻查询中，重要的是您通过$allTagsFromNode发送标签，声明为中的字符串数组(在GraphQL中称为列表(

$allTagsFromNode: [String!]

现在，您可以从所有文章中查询和筛选相关新闻：

relatedArticles: strapiArticles(
filter: {
tags: {elemMatch: {tag: {in: $allTagsFromNode}}}, 
Slug: {ne: $slug}},
limit: 3)

现在，您正在筛选allTagsFromNode列表中包含的所有标记名称(tag(。

同样重要的是要注意，您不希望同一篇文章被包含为相关文章，这就是为什么您在Slug: {ne: $slug}}中省略了它(使用ne过滤器(。