Make an image optional in netlify cms and gatsby js

Question

I have a fairly simple Gatsby & Netlify CMS site. I can't cope with making images optional. In case of Netlify CMS it's just a matter of setting one field required: false. How do I write a query for Gatsby so I don't get an error 'GraphQL Error Field "image" must not have a selection since type "String" has no subfields.' when the image is in fact an empty string since it's not mandatory in my app? Is there any way around this?

GraphQL query for image:

image {
  childImageSharp {
    fluid(maxWidth: 2048) 
      ...GatsbyImageSharpFluid
    }
  }
}

Answer 1

Into your gatsby-node.js, you have to define a graphql type to handle this scenario.

exports.createSchemaCustomization = ({ actions }) => {
  const { createTypes } = actions;
  const typeDefs = `
    type MarkdownRemark implements Node {
      frontmatter: Frontmatter
    }
    
    type Frontmatter @infer {
      yourimage: File @fileByRelativePath,
    }
  `;
  createTypes(typeDefs);
};