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

[0ff5ec]

Description

The way gatsby is handling images is definitely a bug, I confirmed again today, it throws error randomly. I have experienced same source code compiling successfully and running the develop server, while 9/10 times it throws an error. Programmatically I cannot think of any good reason for gatsby develop to behave this way. Every time for good measures, I have cleared the .cache. Confirmed the behavior by doing both rm -rf as well as gatsby clean.

Steps to reproduce

Clear steps describing how to reproduce the issue. Please please please link to a demo project if possible, this makes your issue much easier to diagnose (seriously). https://github.com/0ff5ec/0ff5ec-blog I have created this repo, and verified having the issue w/o having much in it. Don't be surprised if it compiles successfully first time, I'd request you to change the config file by adding anything and removing and saving it. All I am asking you to do at this point is change the last modified timestamp. Errors will be seen by running gatsby develop

Expected result

Expected is successful compilation every time.

Actual result

9/10 times, it errors out with the error mentioned above.

Environment

Run gatsby info --clipboard in your project directory and paste the output here.

System: OS: macOS 10.14.1 CPU: (8) x64 Intel(R) Core(TM) i7-8559U CPU @ 2.70GHz Shell: 3.2.57 - /bin/bash Binaries: Node: 12.1.0 - /usr/local/bin/node npm: 6.9.0 - /usr/local/bin/npm Languages: Python: 2.7.10 - /usr/bin/python Browsers: Firefox: 66.0 Safari: 12.0.1 npmPackages: gatsby: ^2.4.2 => 2.4.2 gatsby-image: ^2.0.41 => 2.0.41 gatsby-plugin-catch-links: ^2.0.13 => 2.0.13 gatsby-plugin-manifest: ^2.1.1 => 2.1.1 gatsby-plugin-offline: ^2.1.0 => 2.1.0 gatsby-plugin-react-helmet: ^3.0.12 => 3.0.12 gatsby-plugin-sharp: ^2.0.36 => 2.0.36 gatsby-remark-autolink-headers: ^2.0.16 => 2.0.16 gatsby-remark-code-titles: ^1.1.0-rc.0 => 1.1.0-rc.0 gatsby-remark-copy-linked-files: ^2.0.12 => 2.0.12 gatsby-remark-images: ^3.0.11 => 3.0.11 gatsby-remark-prismjs: ^3.2.9 => 3.2.9 gatsby-remark-relative-images: ^0.2.2 => 0.2.2 gatsby-remark-responsive-iframe: ^2.1.1 => 2.1.1 gatsby-remark-smartypants: ^2.0.9 => 2.0.9 gatsby-source-filesystem: ^2.0.33 => 2.0.33 gatsby-transformer-remark: ^2.3.12 => 2.3.12 gatsby-transformer-sharp: ^2.1.19 => 2.1.19 npmGlobalPackages: gatsby-cli: 2.5.12

N.B.: I am not a gatsby expert, I am trying to learn this technology, but pulling my hair out because I cannot think of any good reason for it to fail. Please help!

[0ff5ec]

This issue is really limiting my ability to learn how to use images properly within posts. I have seen issues when markdown could render an image that is hosted publicly, but wouldn't render my local images in gatsby. I can see it querying for this image and getting it in response headers.

P.S. I have done my rigorous research on past issues on this topic and tried all of them.

[janosh]

I assume you're specifying the images in your posts' frontmatter? It sounds like Gatsby's automatic schema inference might be causing this issue for you. I recounted a situation where I ran into this issue here. To summarize, please go through all your posts and make sure, the image(s) they specify are actually valid file paths.

[0ff5ec]

Hey @janosh thanks for replying, but it seems the link you posted is broken somehow (404). I have tried it with all kinds of path (rel, abs) to image with or w/o path, the behavior is not persistent. I am new to this, and surely am missing something and would like to learn.

[janosh]

Ah, that link points at a Gatsby maintainers thread. Didn't know those were private.

But I'm thinking my initial suspicion may have been wrong anyways. Just cloned your repo and ran gatsby develop a few times. Worked every time both in your master and development branch. So I'm not sure why there are problems on your end. Did you try reinstalling node_modules? I.e. rm -r node_modules && npm install?

[0ff5ec]

Oh no, my bad, I overwritten those files last night, I thought I was writing somewhere else. To reproduce the bug, if you change the gatsby-config.js file to add

    resolve: `gatsby-transformer-remark`,
    options: {
      plugins: [
        {
          resolve: `gatsby-remark-images`,
          options: {
            // It's important to specify the maxWidth (in pixels) of
            // the content container as this plugin uses this as the
            // base for generating different widths of each image.
            maxWidth: 590,
          },
        },
      ],
    },
  },

as per documented https://www.gatsbyjs.org/packages/gatsby-remark-images/?=gatsby-remark-images, you can reproduce the error, but 9/10 times. Now reading more, https://www.gatsbyjs.org/packages/gatsby-image/?=gatsby-images I might be missing the

      resolve: `gatsby-source-filesystem`,
      options: {
        name: `images`,
        path: path.join(__dirname, `src`, `images`),
      },
    },

part to map the files properly?

[kara-todd]

@janosh I'm running into this issue as well (in a different context)

I have markdown files (using frontmatter) that are created by netlify-cms. The issue that I have is a lot of my image are "optional" which can create a mix of valid image paths and empty string fields (i.e. image: "".)

To avoid the GraphQL error I added a manual schema definition with sourceNodes and createTypes like so:

type Frontmatter {
  image: File
}

type MarkdownRemark implements Node {
  frontmatter: Frontmatter!
}

However, now when I run the GraphQL query all of my image file nodes fail to load... Is there somewhere explaining exactly how these nodes are generated? I can't seem to trace the logic from Frontmatter => File => Sharp ... It seems to be a combination of the gatsby-transformer-remark and gatsby-transformer-sharp plugins? But maybe I'm barking up the wrong tree here...

I can open a new issue if needed, but it's related to the same core problem I think.

Edit:

I forgot to mention. If I delete the empty string fields from the markdown files the site works correctly. The issue is that netlify generates these automatically. I could manually delete them or try and fix the netlify-cms ... but I feel like the image handling could be better for this case... so it seems like fixing the string issue would be a more sound approach.

[janosh]

@kara-todd I'm not familiar with gatsby-plugin-netlify-cms but regarding the schema customization, what you did sounds exactly like what I would have tried. Is your repo public? Might help if we could take a look.

Maybe @LekoArts or @m-allanson could chime in if the problem might be caused by gatsby-plugin-netlify-cms?

[kara-todd]

@janosh in order to take netlify out of the equation I created a quick demo repo. I tried to strip out anything that wasn't relevant to the issue. If you check out the master branch you will see the site builds properly with images. Then on the broken branch I injected the empty string which seems to be causing the issue.

If you try to run these with yarn develop it's important to clear the cache directory between runs. The broken branch works OK if the cache exists from the working branch.

I thought I could replicate this without using the /static/ directory structure that netlify uses... but this does seem to be related to the problem. Using pure relative urls I couldn't replicate the issue. The code I've included in gatsby-node.js is based on one of the most common solutions which is to use fmImagesToRelative from gatsby-remark-relative-images.

I don't want to monopolize the thread here if this is unrelated to the original issue opened. So let me know if I need to open a new issue.

[janosh]

@kara-todd I'm not getting any errors on the broken branch even without ever compiling on master. I did a gatsby clean just to be sure but still worked. What error exactly are you seeing?

[janosh]

@0ff5ec I added gatsby-remark-images to the list of gatsby-transformer-remark plugins but I still don't see errors even on repeated compiles.

[0ff5ec]

I am closing the issue if everyone is okay with it, as I need to do some testing myself and swamped on a different task at the moment.

[janosh]

@0ff5ec No problem and good luck!

@kara-todd Feel free to keep posting here or open a new issue if questions remain.

[kara-todd]

hey @janosh ! Sorry for the radio silence there...

I opened up a new issue #14018 with clearer steps to reproduce. I went through these from scratch as a test and I was able to reproduce the issue. Please let me know if you have issues reproducing as I'd really like to keep this moving if possible. Also, if there are any pointers you can give me for where to look into the issue I'd be happy to try and patch it myself...

I just can't quite follow the logic for how image nodes are created from relative urls.

[janosh]

@0ff5ec You may want to checkout what @pieh suggested in #14018 as that resolved the issue for @kara-todd. Might help in your case as well.