GatsbyJSでまだ流し込むデータが無いページテンプレートを作る際に気をつけること

import React from 'react';
import { graphql } from 'gatsby';

const Example = (props) => {
  const { data } = props;
  const { markdownRemark: post } = data;

  return (
    <>
      <h1>{post.frontmatter.title}</h1>
      <p>
        {post.frontmatter.description}
      </p>
      <div
        dangerouslySetInnerHTML={{ __html: post.frontmatter.bodyBeforeImage }}
      />
      <img
        src={post.frontmatter.image}
        alt={post.frontmatter.imageAlt}
      />
      <div
        dangerouslySetInnerHTML={{ __html: post.frontmatter.bodyAfterImage }}
      />
    </>
  );
};

export default Example;

export const pageQuery = graphql`
  query ExampleByID($id: String!) {
    markdownRemark(id: { eq: $id }) {
      frontmatter {
        title
        description
        bodyBeforeImage
        image
        imageAlt
        bodyAfterImage
      }
    }
  }
`;

---
type: example
date: 2020-07-30
slug: 'example-001'
title: ダミータイトル
description: ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト
bodyBeforeImage: ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト
image: example.png
imageAlt: 'ダミーalt'
bodyAfterImage: ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト
---

ERROR #85923  GRAPHQL

There was an error in your GraphQL query:

Cannot query field "bodyBeforeImage" on type "MarkdownRemarkFrontmatter".

If you don't expect "bodyBeforeImage" to exist on the type "MarkdownRemarkFrontmatter" it is most likely a typo.
However, if you expect "bodyBeforeImage" to exist there are a couple of solutions to common problems:

- If you added a new data source and/or changed something inside gatsby-node.js/gatsby-config.js, please try a restart of your development server
- The field might be accessible in another subfield, please try your query in GraphiQL and use the GraphiQL explorer to see which fields you can query and what shape they have
- You want to optionally use your field "bodyBeforeImage" and right now it is not used anywhere. Therefore Gatsby can't infer the type and add it to the GraphQL schema. A quick fix is to add a least one entry with that field ("dummy content")

It is recommended to explicitly type your GraphQL schema if you want to use optional fields. This way you don't have to add the mentioned "dummy content". Visit our docs to learn how you can define the schema for "MarkdownRemarkFrontmatter":
https://www.gatsbyjs.org/docs/schema-customization/#creating-type-definitions

File: src/templates/example.tsx:36:9

failed extract queries from components - 0.190s

export const pageQuery = graphql`
  query ExampleByID($id: String!) {
    markdownRemark(id: { eq: $id }) {
      frontmatter {
##      title
##      description
##      bodyBeforeImage
##      image
##      imageAlt
##      bodyAfterImage
      }
    }
  }
`;