Add featuredImage in a Gatsby blog with MDX

user_10933211 0
Viewed 403

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

graphql gatsby
2 Answers

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:

user_55853710

I was finally able to make it work.

The problem was that I was requesting allSitePage instead of allMdx in my graphQL. Now I can see my path as an image and request all its subfields.

user_109332110
Related