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

Question

我一直在尝试获取 GraphQL 文章的相关新闻。每篇文章都有 1 个或多个标签，根据这些标签，它需要通过新查询查找最多 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

but Gatsby doesn't support arrays or object in the context.

事实并非如此。您可以通过上下文发送一组标签，但您需要先准备数据：

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

这应该 return 所有标签名称 (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[=27=发送]

然后，在您的 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，声明为数组（称为 list in GraphQL），其中的字符串位于：

$allTagsFromNode: [String!]

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

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

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

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

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

Getting related news by tags in Gatsby and GraphQL

javascript

reactjs

graphql

gatsby