javascript - 「エクスポートされたクエリは、ページ コンポーネントに対してのみ実行されます。」を取得します。ページを生成しようとしたときのギャツビー

Question

これは比較的一般的な問題のようです。ブログ投稿ページを生成しようとしていますが、このエラーが発生し、ページの読み込み時に 404 が表示されます。つまり、それらは生成されていません。

gatsby.node.jsファイルのコードは次のとおりです。

exports.createPages = async ({ graphql, useStaticQuery, actions: { createPage } }) => {
    const postQuery = graphql(`
      {
        gcms {
          posts(where: { stage: PUBLISHED }) {
              id
            slug
          }
        }
      }
    `);

    const {
        gcms: { posts },
      } = useStaticQuery(postQuery);
  
    posts.forEach(({ id, slug }) =>
      createPage({
        path: `/blog/${slug}`,
        component: require.resolve(`./src/templates/PostPage.js`),
        context: {
            id: id,
            slug: slug,
        },
      })
    );
  };

そして、ブログ投稿PostPage.jsファイルの私のコード:

/* eslint-disable react/prop-types */
import React from 'react';
import { graphql } from 'gatsby';
import Layout from "../components/layout";
//import galaxy from "../images/galaxy.jpg";
import SEO from "../components/seo";

export const postPageQuery = graphql`
  query PostPageQuery($id: ID!) {
    gcms {
      post(where: { id: $id }) {
        title
          slug
          excerpt
          postContentMarkdown
          tags
          author {
            name
            biography
          }
          seo {
            title
            description
            keywords
          }
      }
    }
  }
`;

const PostPage = ({data: {post}}) => {
    return (
        <Layout>
            <SEO
                keywords={[
                    `ui`,
                    `ux`,
                ]}
                title="Blog" />
            {post.slug}
        </Layout>
    );
};

export default PostPage;