javascript - 尝试生成页面时在 Gatsby 中获取 "Exported queries are only executed for Page components."

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;

Answer 1

有几件事引起了我的注意，可能会解决您的问题。

useStaticQuery 的用法|在您的 gatsby-node.js .您无需获取 postQuery使用静态查询 Hook 的数据，因为您在组件外部使用 Hook 。

where的用法筛选。根据GraphQL documentation ，过滤数据的方法是使用filter筛选。另外，过滤时过滤的条件是字符串，所以必须加引号。

当您通过上下文 API 将字段传递给您的 PostPage 时，你应该避免过滤到你所有的gcms由于您的模板具有该帖子的信息，因此不需要再次重做相同的先前查询(与 gatsby-node.js 相同)，这不是最佳的。我会把它放在那里，因为我不知道你的数据是如何结构化的，但应该重构。

将其应用到您的代码应该如下所示。gatsby-node.js:

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

    let {posts}= postQuery.gcms;
  
    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(filter: { 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;