Netlify CMS not able to update/replace image that has been optimized in Gatsby.js

Question

From my markdown file index.md,...

---
templateKey: home-page/index
image1: /img/City-Picture.jpg
---

...I want to make an optimized image1 available to the graphql here in templates/index.js...

export const homePageQuery = graphql`
  query HomePage($id: String!) {
    markdownRemark(id: { eq: $id }) {
      frontmatter {
        welcome_description
        image1 {
          childImageSharp {
            sizes(maxWidth: 590) {
              ...GatsbyImageSharpSizes
            }
          }
        }
      }
    }
 }

But I get this error in the terminal...

GraphQL Error Field "image1" must not have a selection since type "String" has no subfields.
2 |   query HomePage($id: String!) {
3 |     markdownRemark(id: { eq: $id }) {
4 |       frontmatter {
5 |         welcome_description
6 |         image1 {
  |                ^
7 |           childImageSharp {
8 |             sizes(maxWidth: 590) {
9 |               ...GatsbyImageSharpSizes
10|             }
11|           }
12|         }
13|       }
14|     }

(I won't get his error if I refrain from optimizing image1.)

In gatsby-config.js, I have these plugins placed before gatsby-source-filesystem ...

`gatsby-plugin-sharp`,
`gatsby-transformer-sharp`,

I'm not sure why GraphQL considers image1 to be type "String". In index.md, even if I change image1: /img/City-Picture.jpg to the relative path of the image (image1: ../..static/img/City-Picture.jpg), I still get the same error.

Of course, I'd prefer to leave it at /img/City-Picture.jpg because only that will work in Netlify CMS for image updating. In config.yml for Netlify CMS, I have...

media_folder: static/img
public_folder: /img

...which I think I'd need to keep the same in order for the image editor to work in the CMS.

I have attempted to implement to recently built plugin gatsby-remark-relative-images which is meant to compensate for Netlify CMS's inability to use relative paths, but I could not get it to work.

There is a active discussion about this at https://github.com/netlify/netlify-cms/issues/325, but so far I could not get any of the solutions to work.

As of now, I have a dilemma of two imperfect choices: 1. Having the ability to edit images in Netlify CMS, but not having the ability to optimize those images via gatsby-image. 2. Not having the ability to edit images in Netlify CMS, but then having the ability to optimize those images via gatsby-image.

I'd much prefer to have the best of both worlds if possible. Any insights on this would be much appreciated.

Answer 1

I actually just replaced my Netlify CMS with Contentful CMS (free tier). It is much easier at Contentful CMS to work with images. To do so, I viewed an excellent tutorial on setting up Gatsby with Contentful CMS.