Condition to control Featured Image display

[emmadigital]

Summary

I want to set featured image optional for my blog posts. I am using Netlify with Netlify CMS.

Relevant information

This is how I created the condition to display featured image if its not null. But this sometime gives build error:

     {featuredimage ? (
            <img src={ !!featuredimage.childImageSharp ? featuredimage.childImageSharp.fluid.src : featuredimage} alt= {title} width="100%" />
            ) : null}    

GraphQL Query

  query BlogPostByID($id: String!) {
    markdownRemark(id: { eq: $id }) {
      id
      html
      fields {
        slug
      }
    frontmatter {
        date(formatString: "MMMM DD, YYYY")
        title
        description
        tags        
        featuredimage {
          childImageSharp {
            fluid(maxWidth: 1200, quality: 100) {
              ...GatsbyImageSharpFluid
              src
            }
          }
        }
      }
    }
  }

Build Error

1:30:39 PM: If you know all field types in advance, the best strategy is to explicitly define them with the `createTypes` action, and skip inference with the `@dontInfer` directive.
1:30:39 PM: See https://www.gatsbyjs.org/docs/actions/#createTypes
**1:30:39 PM: MarkdownRemark.frontmatter.featuredimage:**
1:30:39 PM:  - type: boolean
1:30:39 PM:    value: false
1:30:39 PM:  - type: string
1:30:39 PM:    value: '../../../static/img/BlogPostsByMonth2017.png'
1:30:39 PM: MarkdownRemark.frontmatter.category:
1:30:39 PM:  - type: array
1:30:39 PM:    value: [ ..., 'productivity', ... ]
1:30:39 PM:  - type: string
1:30:39 PM:    value: 'personal'
1:30:39 PM: success building schema - 0.524s
1:30:39 PM: success createPages - 0.283s
1:30:39 PM: success createPagesStatefully - 0.138s
1:30:39 PM: success onPreExtractQueries - 0.000s
1:30:39 PM: success update schema - 0.067s
1:30:40 PM: error There was an error in your GraphQL query:
**1:30:40 PM: Cannot query field "featuredimage" on type "MarkdownRemarkFrontmatter".**
**1:30:40 PM: If you don't expect "featuredimage" to exist on the type "MarkdownRemarkFrontmatter" it is most likely a typo.**
1:30:40 PM: However, if you expect "featuredimage" to exist there are a couple of solutions to common problems:
1:30:40 PM: - If you added a new data source and/or changed something inside gatsby-node.js/gatsby-config.js, please try a restart of your development server
1:30:40 PM: - The field might be accessible in another subfield, please try your query in GraphiQL and use the GraphiQL explorer to see which fields you can query and what shape they have
**1:30:40 PM: - You want to optionally use your field "featuredimage" and right now it is not used anywhere. Therefore Gatsby can't infer the type and add it to the GraphQL schema. A quick fix is to add a least one entry with that field ("dummy content")**
1:30:40 PM: It is recommended to explicitly type your GraphQL schema if you want to use optional fields. This way you don't have to add the mentioned "dummy content". Visit our docs to learn how you can define the schema for "MarkdownRemarkFrontmatter":
1:30:40 PM: https://www.gatsbyjs.org/docs/schema-customization/#creating-type-definitions
1:30:40 PM: error There was an error in your GraphQL query:
1:30:40 PM: Cannot query field "featuredimage" on type "MarkdownRemarkFrontmatter".
1:30:40 PM: If you don't expect "featuredimage" to exist on the type "MarkdownRemarkFrontmatter" it is most likely a typo.
1:30:40 PM: However, if you expect "featuredimage" to exist there are a couple of solutions to common problems:
1:30:40 PM: - If you added a new data source and/or changed something inside gatsby-node.js/gatsby-config.js, please try a restart of your development server
1:30:40 PM: - The field might be accessible in another subfield, please try your query in GraphiQL and use the GraphiQL explorer to see which fields you can query and what shape they have
1:30:40 PM: - You want to optionally use your field "featuredimage" and right now it is not used anywhere. Therefore Gatsby can't infer the type and add it to the GraphQL schema. A quick fix is to add a least one entry with that field ("dummy content")
1:30:40 PM: It is recommended to explicitly type your GraphQL schema if you want to use optional fields. This way you don't have to add the mentioned "dummy content". Visit our docs to learn how you can define the schema for "MarkdownRemarkFrontmatter":
1:30:40 PM: https://www.gatsbyjs.org/docs/schema-customization/#creating-type-definitions
1:30:40 PM: failed extract queries from components - 0.613s
1:30:40 PM: npm

Environment (if relevant)

File contents (if changed)

gatsby-config.js: N/A
package.json: N/A
gatsby-node.js: N/A
gatsby-browser.js: N/A
gatsby-ssr.js: N/A

Please sugges how should I create confition to display featured image and if its null then it should skip the display.

[madalynrose]

Hi there, @emmadigital! It looks like perhaps your conditional rendering should use the logical && operator instead of ?

see example here

If that doesn't resolve your issue, it would be incredibly helpful if you're able to create a minimal reproduction. This is a simplified example of the issue that makes it clear and obvious what the issue is and how we can begin to debug it.

If you're up for it, we'd very much appreciate if you could provide a minimal reproduction and we'll be able to take another look.

Thanks for using Gatsby! 💜

[emmadigital]

@madalynrose thanks for responding and sharing the example link.

I have updated my code to below:

{featuredimage ? (
            <img src={ !!featuredimage.childImageSharp ? featuredimage.childImageSharp.fluid.src : featuredimage} alt= {title} width="100%" />
            ) : 
            <img src={ blogImage} alt= {title} width="100%" />
            }     

Can you check my build error, is this because of this condition. As I don't see it highlights this code but it talks about featuredimage, why does the build fails.

Here is my repo: https://github.com/emmadigital/ardalis-newsite
I also get error on Netlify CMS because of this https://prnt.sc/sfn0mr