error GraphQL Error Field [type Image] must not have a selection since type "String" has no subfields.

[ChandlerMBing]

Describe the bug

After adding or changing the picture in a Image widget inside the cms, the local environment fails to build while production builds just fine
To Reproduce

1. /admin
2. Page with Image widget
3. Upload or change picture
4. Pull changes from repo
5. See error in local environment
6. Production builds just fine

Expected behaviour
local environment successfully builds the site
Screenshots

Error in browser

Two queries in graphiql one is treating img as string the other is copy of the query from the template file

Here's the frontmatter for index.md

My File Structure [pretty much standard gatsby]

Gatsby-source-filesystem settings for images and uploads

Query in template file

Applicable Versions:

• Netlify CMS version: 2.3.2
• Git provider: GitLab
• OS: OSX Mojave
• Browser version: Up-to-date chrome
• Node.JS version: 10.13.0
• npm: 6.4.1

CMS configuration

backend:
  name: git-gateway
  branch: master

media_folder: static/img
public_folder: /img
logo_url: https://proxy.duckduckgo.com/iu/?u=http%3A%2F%2Ftous-logos.com%2Fwp-content%2Fuploads%2F2017%2F09%2FLogo-IKEA.jpg&f=1
display_url: http://localhost:8000/
collections:
  - name: 'pages'
    editor:
      preview: false
    label: 'Pages'
    create: true
    files:
      # index start
      - file: 'src/pages/index.md'
        label: 'Home'
        name: 'home'
        fields:
          - {
            label: 'Template Key',
            name: 'templateKey',
            widget: 'hidden',
            default: 'index-page',
          }
          - { label: Title, name: title, widget: string}
          - { label: Hero, name: hero__image, widget: image}
          - { label: Body, name: body, widget: markdown}
      # index end

Additional context
Sometimes it works sometimes it doesn't, I tried re-running gatsby develop, changing gatsby filesystem plugin path for images from src to static, deleting cache and everything else in the application tab in dev tools. Tried to find something online but couldn't so it's either some weird obscure bug that no-one has ever encountered or, hopefully, I messed something up somewhere. 🙄

[Undistraction]

@ChandlerMBing This is a Gatsby issue, not related to Netlify CMS. It's probably related to the fact that Netlify CMS uses absolute paths and Gatsby expects relative paths. Take a look at https://www.npmjs.com/package/gatsby-remark-relative-images, but be warned it is a deep dark rabbithole.

[ChandlerMBing]

Thanks for explaining the issue, I shall brace myself for the rabbithole then.

[Undistraction]

@ChandlerMBing My advice is to concentrate on getting a single image working. That error is occurring because the image file doesn't exist at the path, so it is left as a string instead of being transformed into an image node. While trying to get it working, make sure you keep clearing Gatsby's cache so that it re-evaluates any changes. I would advise you first make sure images are loading and displaying properly in the CMS, then move to getting them working in Gatsby. Much easier than doing this the other way around because there is much less you can tweak in the CMS. Also be aware you will need to use a separate function from the library I linked to if you want to use images within your markdown (not just as field values). Good luck. It does work, but you'll probably pull some hair out on the journey.

[ChandlerMBing]

@Undistraction That's the thing, in production and in the cms it works just fine, it only breaks when I run gatsby develop.

[erquhart]

@ChandlerMBing did you figure this out?

[ChandlerMBing]

@erquhart Yup, it was 100% user error, I didn't clean the cache because I was running the localhost with gatsby develop rather than npm start. I haven't had this problem since. Sorry, I should've said that before closing, I forgot. 😇

[dbertella]

Really? I have the same error but in prod, the build failed every time I pick an image from the media library, it works fine if I upload a new image, because in the second case the image is saved with a relative path as gatsby probably expected. I added the issue on the starter I'm using, decaporg/gatsby-starter-decap-cms#201 but maybe it's more about netlify cms?

[greatwitenorth]

I started seeing this error today after updating my packages. The only thing that worked for me was downgrading gatsby to version 2.1.18.

[amykapernick]

I've been having the same issues on Gatsby with headless WP and Gatsby with Netlify CMS. Was working fine before but not now

[Zellement]

I updated NetlifyCMS to 2.8.0 yesterday and updated everything else to fix another issue I was told about on Gitter, and this has since broken my images too. They're all appearing as strings now, so I can't use gatsby-image. They're all just coming out as strings no matter what I try.

[erquhart]

Should be fixed in [email protected].