Add featuredImage in a Gatsby blog with MDX

Question

I'm trying to add a featured image on my Gatsby blog but can't make it work. I tried several things found here and there but I just keep having this error message : Field "featuredImage" must not have a selection since type "String" has no subfields.

Here is my blog structure :

src
 |- images
   |- house.jpeg
 | - pages
   |- actualites
     |- house.mdx

My house.mdx has the following frontmatter :

---
title: House
path: /house
date: 2019-01-29
featuredImage: ../../images/house.jpeg
---

And my gatsby-plugin looks like this :

plugins: [
    `gatsby-plugin-resolve-src`,
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        path: `${__dirname}/src/images`,
      },
    },
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        path: `${__dirname}/src/pages`,
      },
    },
    {
      resolve: `gatsby-transformer-remark`,
      options: {
        plugins: [
          {
            resolve: `gatsby-remark-images`,
            options: {
              maxWidth: 800,
            },
          },
        ],
      },
    },
    {
      resolve: `gatsby-plugin-mdx`,
      options: {
        gatsbyRemarkPlugins: [
          {
            resolve: `gatsby-remark-images`,
            options: {
              maxWidth: 1200,
            },
          },
        ],
      },
    },
    `gatsby-transformer-sharp`,
    `gatsby-plugin-sharp`,
  ],

I can't figure out what I'm doing wrong... The http://localhost:8000/___graphql shows me my featuredImage but not the subfields for the image, so I guess it doesn't understand that my field is an image.

Could you please help me point what I am missing ?

Thank you 😊

Answer 1

The issue usually comes from multiple sources:

• When there are differences in the naming of the strings paths (images in your case). For example, if you are looking for: ../../images/house.jpeg but the image is placed or named house.jpg (not jpeg). Being relative paths, I assume that the issue comes from there. Try changing it to something like ./path/to/image.jpg
• Check spelling
• Check plugins order
• Use GraphQL playground (localhost:8000/___graphql) to check the correct paths of the images by creating a specific query there.

References/useful resources:

• https://github.com/gatsbyjs/gatsby/issues/13322
• https://github.com/gatsbyjs/gatsby/issues/4123
• https://dev.to/stephencweiss/error-field-image-must-not-have-a-selection-since-type-string-has-no-subfields-3a76
• https://spectrum.chat/gatsby-js/general/this-error-field-img-must-not-have-a-selection-since-type-string~05669aa2-8045-4875-a82b-c52e53df791e