在盖茨比和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)中特定新结构中的所有标记名( ["Tag 1", "Tag 2"] )。如果需要的话，稍微调整一下，得到一个简单的一维数组。

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)

现在，您正在过滤包括在tag列表中的所有标记名称( allTagsFromNode )。

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