@mhjadav/gatsby-theme-factly/src/pages/404.js

import React from 'react';
import { graphql } from 'gatsby';
import Img from 'gatsby-image';
import PropTypes from 'prop-types';

import Layout from '../components/layout';

const PageNotFound = ({ data }) => (
  <Layout>
    <h1>Page Not Found</h1>
    <Img fixed={data.file.childImageSharp.fixed} />
  </Layout>
);

PageNotFound.propTypes = {
  data: PropTypes.shape({
    file: {
      childImageSharp: {}
    }
  })
};
export default PageNotFound;
export const query = graphql`
  query {
    file(relativePath: { eq: "logo/logo.png" }) {
      childImageSharp {
        # Specify the image processing specifications right in the query.
        # Makes it trivial to update as your page's design changes.
        fixed(width: 125, height: 125) {
          ...GatsbyImageSharpFixed
        }
      }
    }
  }
`;