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

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...

Solution

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):

check spelling
check you have the right plugins (period)
check plugin order
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)
delete .cache and node modules and reinstall

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