What causes the ["String" has no subfields] image error in GraphQL/Gatsby?

Question

The whole error message on terminal is:

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

This seems like a real doozy of an error, it appears here:

gatsby issue 4123 gatsby issue 11412 gatsby issue 11534 gatsby issue 2050 gatsby issue 3531 gatsby remark plugin issue 2 netlify-cms issue 325

As well as several Stackoverflow questions/answers.

But the answers/fixes are all over the place. Some people are spelling their files wrong or ordering plugins wrong (I think). Other times, the person needs to do a big rewrite within exports.onCreateNode in gatsby-node.js. Other times the fix is to reclone your repo and run npm install again.

Anyway, I've tried what feels about everything. It seems many dozens or hundreds more people will have this error when they try to get started with Gatsby. What should they check? Where should they start to fix this? There seem to be 7 potential things to check...

Answer 1

This error seems to be caused by a wide variety of things. In my case, it was the order in gatsby-config.js. I had to move gatsby-plugin-sharp, gatsby-transformer-sharp, and gatsby-transformer-remark above my file system plugins.

For many others (if you search through those issues I mentioned):

1. check spelling
2. check you have the right plugins (period)
3. check plugin order
4. use graphiql to see if you're getting a string for the images vs. an actual node (you can use transformers on a node but not a string)
5. delete .cache and node modules and reinstall

good luck, you'll never get those 12 hours of your life back.

Answer 2

To add to the checklist when encountering this error:

Make sure you actually have images in the folder configured in gatsby-conf.js:

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

and that they match whatever path is in your graphql. If "myImage.png" is returned by your query but this is not a file in your images, you will get this error.