4

这似乎是一个比较普遍的问题。我正在尝试生成博客文章页面，但遇到此错误并且页面在加载时显示 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;
4

2 回答 2

2

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

  • 在useStaticQuery您的gatsby-node.js. 您不需要postQuery使用静态查询挂钩来获取数据，因为您在组件外部使用挂钩。

  • where过滤器的使用。根据GraphQL 文档，过滤数据的方法是使用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;
于 2020-09-11T16:10:15.440 回答
0

我最终通过对我的项目进行完全重组来解决这个问题，更新到最新版本的 Gatsby，这是一个简单的 gatsby 启动器，一个插件一个插件。它最终成为插件冲突问题。我不确定它到底是哪个插件，但很可能是其中之一：

gatsby-plugin-eslint, gatsby-plugin-offline,gatsby-plugin-root-import或者可能是prop-typesNPM 包。

于 2020-09-13T15:48:01.827 回答