ContentfulBlogPost：如何使用GatsbyGraphQL在2个不同容器上显示不同类别的博客

嗨，我对使用盖茨比很陌生，对cms很满意。我只想在同一页上显示不同类别的博客文章。有没有办法做到这一点？下面是我如何显示blogpost循环以及从contentful（不确定）获取数据的graphql的代码。对不起，编码错误。我是否可以用不同类别的博客文章制作两个不同的容器

    const siteTitle = get(this, 'props.data.site.siteMetadata.title')
const posts = get(this, 'props.data.allContentfulBlogPost.edges')<div className="row">
<div className="col-lg-12 text-left">
    <h2>Title</h2>
</div>
    {posts.map(({ node }) => {
        return (
            <ArticlePreview article={node} />
        )
    })}
</div> 
export const CommunityQuery = graphql
    query CommunityIndexQuery {
    site {
        siteMetadata {
        title
    }
    }
allContentfulBlogPost(sort: { fields: [publishDate], order: DESC }) {
    edges {
        node {
          title
          slug
          publishDate(formatString: "MMMM Do, YYYY")
          tags
          heroImage {
            fluid(maxWidth: 350, maxHeight: 156, resizingBehavior: SCALE) {
              ...GatsbyContentfulFluid_tracedSVG
            }
          }
          description {
            childMarkdownRemark {
              html
            }
          }
        }
      }
    }
}`

const sitetTitle=get（这是'props.data.site.sitematadata.title'）
const posts=get（这是'props.data.allContentfulBlogPost.edges'）
标题
{posts.map（{node}）=>{
返回(
)
})}
export const CommunityQuery=graphql
查询社区索引查询{
场地{
站点元数据{
标题
}
}
allContentfulBlogPost（排序：{fields:[publishDate]，顺序：DESC}）{
边缘{
节点{
标题
鼻涕虫
publishDate（格式字符串：“MMMM Do，YYYY”）
标签
英雄法师{
流体（最大宽度：350，最大高度：156，大小调整行为：比例）{
…GATSBYCONTENTFULL FLUID_tracedSVG
}
}
描述{
童言{
html
}
}
}
}
}
}`

是的，您可以通过在

社区查询中使用两种不同的查询来实现这一点。它应该是这样的：

export const CommunityQuery = graphql
    query CommunityIndexQuery {
    site {
        siteMetadata {
        title
    }
    }
categoryOne: allContentfulBlogPost(
   filter: {category: {eq: "category one name"}}
   sort: { fields: [publishDate], order: DESC }) {
    edges {
        node {
        //your fields
        }
      }
    }
categoryTwo: allContentfulBlogPost(
   filter: {category: {eq: "category two name"}}
   sort: { fields: [publishDate], order: DESC }) {
    edges {
        node {
        //your fields
        }
      }
    }
}`

注意：请记住，您提供了一个通用查询，所以我不知道应该按类别设置哪些字段或过滤器，这只是一种方法

这将生成两个对象，您可以通过
props.data.categoryOne
和
props.data.categoryTwo
轻松检索它们（查询有别名，这是清理代码的好方法，如果没有别名，您的对象可能看起来像：
props.data.allcontentfulbogpost
）.
我使用了您的代码，但它抛出了一个错误35901GraphQL您的GRAPHQL查询中有一个错误：
vipspng:libpng读取错误vips2png:cannot write to target
我似乎无法让我的代码像您的一样显示出来。对此我深表歉意。你能告诉我怎么了吗@ferran buireu
export const CommunityQuery=graphql query CommunityIndexQuery{site{sitemata{title}}类别：allContentfulBlogPost（排序：{fields:[publishDate]，order:DESC}{edges{node{/}}}类别两个：allContentfulBlogPost（排序：{fields:[publishDate]，顺序：DESC}{edges{node{/}}}
还有一种方法可以根据字段的内容对其进行过滤吗？例如，第一个查询只显示博客的哪个类别是CategoryOne，而另一个查询只显示博客的哪个类别是CategoryTwo？谢谢这是我在回答中告诉你的（在代码段下面的注释中）。您没有提供架构或数据结构，因此我不知道类别放置在何处（我猜是在每个节点内）。我已更新了答案，添加了过滤器的外观，但您需要澄清并更多地关注您的问题。