error: 'field `image` must not have a selection since type `string` has no subfields.'

2019-08-08

~2 min read

293 words

I was trying to query an image I’d placed in the frontmatter of a post, when I got the error:

Field ‘image’ must not have a selection since type “String” has no subfields

The query should have worked because image in my case, was being transformed by Sharp and so did have children. It would turn out that I was right in theory, but in practice needed to reconfigure a few things to get it to work.

How I debugged this error:

Reconfigure the gatsby-config so that plugin-sharp and transformer-sharp are first. This should be all you need to do, but if you’re still having issues after rebuilding, keep going.
Delete .cache, public and node_modules
Re-install (npm i) all dependencies
Re-build (npm run develop if you’re using a Gatsby starter)

After completing all of these steps, my query worked like a charm and I now had access to children properties of my transformed image.

This is what my config file looks like at the moment:

module.exports = {
  siteMetadata: {
    title: ‘My site’,
    description: ‘A test site’,
  },
  plugins: [
    'gatsby-plugin-sharp’,
    'gatsby-transformer-sharp',
    'gatsby-plugin-emotion',
    ‘gatsby-plugin-react-helmet’,
    {
      resolve: ‘gatsby-plugin-mdx’,
      options: {
        extensions: [".mdx",".md"],
        defaultLayouts: {
          default: require.resolve(‘./src/components/layout.js’),
        },
        gatsbyRemarkPlugins: [{ resolve: 'gatsby-remark-images' }],
        plugins: [{ resolve: 'gatsby-remark-images' }],
      },
    },
    {
        resolve: 'gatsby-source-filesystem',
        options: {
            name: 'posts',
            path: 'content/posts'
        }
    },
    {
        resolve: 'gatsby-source-filesystem',
        options: {
            name: 'blog',
            path: 'content/blog'
        }
    },
    {
        resolve: 'gatsby-source-filesystem',
        options: {
            name: 'images',
            path: 'content/images'
        }
    },
  ],
};

Footnotes

These are two resources I found particularly helpful in debugging this error:

Hi there and thanks for reading! My name's Stephen. I live in Chicago with my wife, Kate, and dog, Finn. Want more? See about and get in touch!