I need to create another section for my website and I dont want to mix up the new markdown files with my blog, so I have to add another path in my gatsby-config.js

{
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `howto`,
        path: `${__dirname}/src/howto/`,
      },
    },

once I added the new path and reload the site, it generated a graphQL error.

Field "image" must not have a selection since type "String" has no subfields.

I spend almost 2 days researching on Stackoverflow/ Google and try to resolve this issue, I finally figure it out The root cause is because the image processing with gatsby-transformer-sharp didnt get along with Netlify CMS configuration.

Incase if anyone come across with this error, to resolve this I had to install these 2 npm packages

  • gatsby-remark-images
  • gatsby-remark-relative-images

add the plugin for gatsby-transformer-remark in gatsby-config.js

{
      resolve: `gatsby-transformer-remark`,
      options: {
        plugins: [
          {
            resolve: `gatsby-remark-relative-images`,
          },
          {
            resolve: `gatsby-remark-images`,
            options: {
              image.
              maxWidth: 590,
            },
          },
        ],
      },
    },

add a new onCreateNode in gatsby-node.js

const { fmImagesToRelative } = require('gatsby-remark-relative-images')

exports.onCreateNode = ({ node }) => {
  fmImagesToRelative(node)
}

after all the steps above, the image in the site will load properly.

About Me

I am a self-taught developer who is passionate about software development, entrepreneurship and finance. I love to write about my daily life at work and outside work.

You can find more about me on  Kenneth Au LinkedIn

Next