CODEWITHSUNDEEP
reactjsgraphqlnetlify-cms
Matt
Matt

Reputation: 821

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

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.

Upvotes: 5

Views: 1120

Answers (2)

Yashu Mittal
Yashu Mittal

Reputation: 1666

According to the question:

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

Here's how the flow work:

  1. Changes made in NetlifyCMS
  2. Changes trigger the build
  3. Gatsby kicks in

... (and do as mentioned in the config.yml file)

NetlifyCMS doesn't work this way, it only fetches the data from the .git repository and show them in the UI.

Whereas Gatsby starts working when the changes are committed, and all the work was done by the Gatsby (converting markdown files, optimizing images) is on the server.

Since Gatsby doesn't commit any changes to the repository, hence NetlifyCMS doesn't know anything about optimizing the images or converting markdown files into .html files.

Upvotes: 0

Matt
Matt

Reputation: 821

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.

Upvotes: 2

Related Questions