Building an Image Query

Now that we've got the image plugins configured, we can use the GraphiQL Explorer to build our first image query.

When you open up the Explorer, you can now see allImageSharp and imageSharp. We've also got some new items under allFile like childImageSharp. This is the ImageSharp node created by the Sharp transfomer. These nodes have both a fixed and a fluid object.

In the video, we explore these different options and build out a query to get the lodge image for the home page. Here's the final query:

query MyQuery {
  file(relativePath: { eq: "images/lodge.jpg" }) {
      childImageSharp {
        fluid {  
          aspectRatio
          base64
          originalImg
          originalName
          presentationHeight
          presentationWidth
          sizes
          src
          srcSet
          srcSetWebp
          srcWebp
          tracedSVG
        }
      }
    }
}

We'll use this query in the next video with Gatsby Image in index.js.