CODEWITHSUNDEEP
graphqlgatsbycontentful
Jomar Bruto
Jomar Bruto

Reputation: 15

Contentful BlogPost: How can I display different category blogs on 2 different container using gatsby graphql

Hi I'm very new on using gatsby and contentful for cms. I just want to display different category blog post on the same page. Is there a way that this can be possible? Below is the code on how I show the loop of blogpost and also the graphql that gets the data from contentful(not really sure). Sorry for the bad coding. Is it possible that I make 2 different container with blogpost with different category?

    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
            }
          }
        }
      }
    }
}`

Upvotes: 1

Views: 534

Answers (1)

Ferran Buireu
Ferran Buireu

Reputation: 29320

Yes, you can achieve this by using 2 different queries in your communityQuery. It should look like:

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
        }
      }
    }
}`

Note: keep in mind that you provided a generic query so I don't know what fields or what filters you should put to filter by category, this is just an approach.

This will generate 2 objects that you can retrieve easily by props.data.categoryOne and props.data.categoryTwo (that queries are aliased, it's a good way to clean up your code, if don't, your object may look like: props.data.allContentfulBlogPost).

Upvotes: 1

Related Questions