I need to add gatsby-image to my site. Need some direction

Question

I am trying to add gatsby-image with GraphQL. I don't need to rewrite my entire starter I just want the image optimization for loading times. All of the data queries were done with lodash so im getting confused. I know I am missing something simple following the documentation.

I am testing with a title just to see if I am accessing the data.
Do I need to add this query to gatsby-node?

import React from 'react';
import _ from 'lodash';
import { useStaticQuery, graphql } from "gatsby"

import { Layout } from '../components/index';
import { htmlToReact, safePrefix } from '../utils';

export default class Post extends React.Component {
  render() {

    const data = useStaticQuery(graphql`
    query postInfo {
  allMarkdownRemark {
    edges {
      node {
        id
        frontmatter {
          content_img_path
          excerpt
          img_path
          subtitle
          title
        }
      }
    }
  }
}
  `)

    return (
      <Layout {...this.props}>
        <article className="post post-full">
          <header className="post-header">
            <div className="post-meta">
            </div>
            <h1 className="post-title">{_.get(this.props, 'pageContext.frontmatter.title')}</h1>
          </header>
          {_.get(this.props, 'pageContext.frontmatter.subtitle') &&
            <div className="post-subtitle">
              {htmlToReact(_.get(this.props, 'pageContext.frontmatter.subtitle'))}
            </div>
          }


          <h3>{data.allMarkdownRemark.title}</h3>


          {_.get(this.props, 'pageContext.frontmatter.content_img_path') &&
            <div className="post-thumbnail">
              <img className="thumbnail" src={safePrefix(_.get(this.props, 'pageContext.frontmatter.content_img_path'))} alt={_.get(this.props, 'pageContext.frontmatter.title')} />
            </div>
          }
          <div className="post-content">
            {htmlToReact(_.get(this.props, 'pageContext.html'))}
          </div>
        </article>   
      </Layout>
    );
  }
}

Answer 1

allMarkdownRemark means you are querying for markdown not images. But you say you are just testing. If your markdown test was succesful you can be sure that the GraphQL part works.

Here the important code from the docs you linked:

import { useStaticQuery, graphql } from "gatsby"
import Img from "gatsby-image"
export default () => {
  const data = useStaticQuery(graphql`
    query {
      file(relativePath: { eq: "images/default.jpg" }) {
        childImageSharp { // gatsby-image generates this GraphQL node for you
          fluid { // gatsby-image supplies this GraphQL fragment for you
            ...GatsbyImageSharpFluid // gatsby-image supplies this GraphQL fragment for you
          }
        }
      }
    }
  `)
  return (
    <div>
      <h1>Hello gatsby-image</h1>
      <Img
        fluid={data.file.childImageSharp.fluid} // the data supplied by the gatsby-image query
        alt="Gatsby Docs are awesome"
      />
    </div>
  )
}

Do I need to add this query to gatsby-node? No, you do not. gatsby-node.js is for programmatically generating pages. You can use gatsby-image independently from any gatsby-node.js code.

EDIT

You need to tell gatsby-image where to find your images by configuring a data source. The easiest way is gatsby-plugin-filesystem in gatsby-config.js:

{
      resolve: "gatsby-source-filesystem",
      options: {
        path: `${__dirname}/images`,
        name: "images",
      },
},

Your graphQL query

{
  allFile(
    filter: {
      sourceInstanceName: {eq: "images"} // tell graphQL where to find your images
    },
    sort: {fields: [childImageSharp___fluid___originalName], order: ASC})
  {
    edges {
      node {
      childImageSharp {
          fluid(maxWidth: 300, quality: 50) {
            originalName
            ...GatsbyImageSharpFluid
          }
        }
      }
    }
  }
}