How to write GraphQL-query for fetching image from mdx-file using GatsbyJS?

Question

I am trying to create a blog using GatsbyJS. I follow this tutorial

https://www.gatsbyjs.org/docs/recipes/#optimizing-and-querying-images-in-post-frontmatter-with-gatsby-image

A blog contains a title, featured image and text.

The MDX-file structure looks like this.

---
title: My First Post
featuredImage: ./corgi.png
---
Post content...

And, the code in file gatsby-node.js like this

exports.createPages = async ({ graphql, actions }) => {
  const { createPage } = actions
  // query for all markdown
  result.data.allMdx.edges.forEach(({ node }) => {
    createPage({
      path: node.fields.slug,
      component: path.resolve(`./src/components/markdown-layout.js`),
      context: {
        slug: node.fields.slug,
      },
    })
  })
}

In the template the image will be extracted using this query.

  query PostQuery($slug: String) {
    markdown: mdx(fields: { slug: { eq: $slug } }) {
      id
      frontmatter {
        image {
          childImageSharp {
            fluid {
              ...GatsbyImageSharpFluid
            }
          }
        }
      }
    }
  }

My main problem is writing the GraphQL-query in gatsby-node.js. I tried serveral ones e.g.

const result = await graphql(`
    {
        {
            allMdx {
              edges {
                node {
                  id
                  frontmatter {
                    path
                    title
                  }
                }
              }
            }
          }                   
      `)

When I run the gatsby develop command I see the following error passing by.

Field "featuredImage" must not have a selection since type "String" has no subfields

Dependencies configured inside package.json.

...
"dependencies": {
        "@emotion/core": "^10.0.17",
        "@emotion/styled": "^10.0.17",
        "@mdx-js/mdx": "^1.5.0",
        "@mdx-js/react": "^1.5.0",
        "axios": "^0.19.0",
        "babel-plugin-styled-components": "^1.10.6",
        "express": "^4.17.1",
        "gatsby": "^2.15.14",
        "gatsby-image": "^2.2.24",
        "gatsby-plugin-emotion": "^4.1.6",
        "gatsby-plugin-express": "^1.1.6",
        "gatsby-plugin-manifest": "^2.2.16",
        "gatsby-plugin-mdx": "^1.0.47",
        "gatsby-plugin-offline": "^2.2.10",
        "gatsby-plugin-react-helmet": "^3.1.7",
        "gatsby-plugin-sharp": "^2.2.28",
        "gatsby-plugin-styled-components": "^3.1.5",
        "gatsby-remark-images": "^3.1.25",
        "gatsby-source-filesystem": "^2.1.23",
        "gatsby-transformer-remark": "^2.6.22",
        "gatsby-transformer-sharp": "^2.2.20",
        "prop-types": "^15.7.2",
        "react": "^16.9.0",
        "react-dom": "^16.9.0",
        "react-helmet": "^5.2.1",
        "styled-components": "^4.3.2",
        "typeface-source-sans-pro": "0.0.75"
    },
...

Does anyone know how to tackle the issue?

Thanks in advance, Jordy

Answer 1

You should change this:

  query PostQuery($slug: String) {
    markdown: mdx(fields: { slug: { eq: $slug } }) {
      id
      frontmatter {
        image {
          childImageSharp {
            fluid {
              ...GatsbyImageSharpFluid
            }
          }
        }
      }
    }
  }

To:

query PostQuery($slug: String) {
    markdown: mdx(fields: { slug: { eq: $slug } }) {
      id
      frontmatter {
        featuredImage { // here is a mistake
          childImageSharp {
            fluid {
              ...GatsbyImageSharpFluid
            }
          }
        }
      }
    }
  }