Gatsby image undefined but grapql query working

Question

I am unable to import an image on any of my pages in my gatsby project. I have tried using just plain queries, and page queries

import { graphql } from "gatsby"
import { GatsbyImage, getImage } from "gatsby-plugin-image"

function About2({ data }) {
  const image = getImage(data.imageSharp.fluid.src)
  return (
    <section>
      <h2>HELLO</h2>
      <GatsbyImage image={image} alt="Hello" />
      <p>HELLO</p>
    </section>
  )
}
export default About2


export const pageQuery = graphql`
query About2 {
    imageSharp(id: {eq: "2be3df61-ec12-5009-b2da-73c443494d90"}) {
      fluid {
        src
        originalImg
      }
    }
  }
`

Returns something back

I'm wondering if my declaring a node and layout for my other pages is what is giving me an issue? Here is my gatsby-node.js

const path = require(`path`)
const { createFilePath } = require(`gatsby-source-filesystem`)

exports.createPages = async ({ graphql, actions, reporter }) => {

  const { createPage } = actions

  // Define a template for blog post
  const ridePostTemplate = path.resolve(`./src/layouts/RidePostLayout.js`)

  // Get all markdown blog posts sorted by date
  const result = await graphql(
    `
    query makeRidePost {
      allMdx {
        edges {
          node {
            frontmatter {
              slug
            }
          }
        }
      }
    }
    `
  )

  result.data.allMdx.edges.forEach(({ node }) => {
    createPage({
      path: `rides/${node.frontmatter.slug}`,
      component: ridePostTemplate,
      context: {
        slug: node.frontmatter.slug,

      },
    })
  })




}

Here's a different strategy I tried

import React from "react"
import Layout from "../layouts/Layout"
import {graphql} from "gatsby"
import { GatsbyImage, getImage } from "gatsby-plugin-image";
import { Link } from "gatsby";
import styled from "styled-components"
import AboutImg from "../components/AboutImg";





const aboutPage = ({data}) => {

  
  const Theimage = getImage(data.allMdx.edges[0].node.frontmatter.imgFeatured.fixed)
  return (
   
  
  <Layout>
     <AboutImg/>
  <ContentWrapper>
  <h1>Coming Soon</h1>
  <ColumnWrapper>
  
  <FlexColumn>
  
  <GatsbyImage image={Theimage} alt="asdf"/>
  <img src={data.allMdx.edges[0].node.frontmatter.imgFeatured.fixed} />
  awdfasdf
  </FlexColumn>

  <FlexColumn>

    HDSKLFJSDKJFDSLJKF
    </FlexColumn>
  
  </ColumnWrapper>

  </ContentWrapper>
  
  
  </Layout>

  )

}

export default aboutPage



const ContentWrapper = styled.div`
background-color: red;

height: min(100vh);

`
const ColumnWrapper = styled.div`
background-color: blue;
display: flex;
justify-content: center;
`

const FlexColumn = styled.div`
background-color: yellow;
flex-direction: column;
padding: 20vw;

`

export const query = graphql`
query asdf {
  allMdx(limit: 1) {
    edges {
      node {
        frontmatter {
          imgFeatured {
            childImageSharp {
              fixed {
                src
              }
            }
          }
        }
      }
    }
  }
}
`

Answer 1

I wasn't giving Gatsby image the correct data here is the proper query to pass gatsby image data into

query About2 {
    imageSharp(id: {eq: "2be3df61-ec12-5009-b2da-73c443494d90"}) {
      gatsbyImageData(placeholder: BLURRED)
    }
  }
`

Then use data.imageSharp.gatsbyImagedData.