Gatsby 节点生成页面失败答案

【问题标题】：Gatsby node fails to generate pageGatsby 节点生成页面失败
【发布时间】：2020-10-12 16:02:04
【问题描述】：

我正在尝试为 Gatsby 中的项目类别构建子页面，每个项目父页面已经生成了它应该的方式，但子页面没有。

每个项目可以有零到多个子页面，我只想生成一个子页面，如果它存在的话。数据来自通过 GraphQL 的无头 CMS

我在 gatsby-node.js 中生成这些页面的循环当前如下所示：

    result.data.allSanityProjects.edges.forEach(({ node }) => {
        node.projectChildPages.map(childPage => {
          if (node && node.projectChildPages.length > 0 && node.projectChildPages.slug) {
            createPage({
              path: childPage.slug + "/" + node.projectChildPages.slug,
              component: projectsSubPages,
              context: {
                slug: childPage.slug + "/" + node.projectChildPages.slug,
              },
            });
          }
        });
    });
  });

这将遍历此 GrapQL 查询的“allSanityProjects”部分

{
  allSanityDefaultPage {
    edges {
      node {
        slug
      }
    }
  }
  allSanityProjects {
    edges {
      node {
        slug
        projectChildPages {
          slug
        }
      }
    }
  }
}

仅运行 allSanityProjects-query 的结果如下所示

{
  "data": {
    "allSanityProjects": {
      "edges": [
        {
          "node": {
            "slug": "project-3",
            "projectChildPages": []
          }
        },
        {
          "node": {
            "slug": "project-1",
            "projectChildPages": [
              {
                "slug": "project-1"
              },
              {
                "slug": "Doggolicious"
              },
              {
                "slug": "no-cats"
              }
            ]
          }
        },
        {
          "node": {
            "slug": "Project-2",
            "projectChildPages": []
          }
        }
      ]
    }
  }
}

Gatsby 未能构建项目子页面并出现以下错误。

warn The GraphQL query in the non-page component
Exported queries are only executed for Page components. It's possible you're
trying to create pages in your gatsby-node.js and that's failing for some
reason.

If the failing component(s) is a regular component and not intended to be a page
component, you generally want to use a <StaticQuery> (https://gatsbyjs.org/docs/static-query)
instead of exporting a page query.

If you're more experienced with GraphQL, you can also export GraphQL
fragments from components and compose the fragments in the Page component
query and pass data down into the child component — https://graphql.org/learn/queries/#fragments

我的模板如下所示：

import React from "react";
import { useStaticQuery, graphql } from "gatsby";
import Layout from "../components/layout";

const BlockContent = require("@sanity/block-content-to-react");

const projectsSubPages = ({ data }) => {
  const pageData = data.sanityProjects.projectChildPages;
  return (
    <Layout>
      <BlockContent blocks={pageData._rawBlockContent} />
    </Layout>
  );
};

export const query = graphql`
  query($slug: String!) {
    sanityProjects(slug: { eq: $slug }) {
      projectChildPages {
        _rawBlockContent
        slug
        title
      }
    }
  }
`;

export default projectsSubPages;

据我所知，我的错误在我的 gatsby-node.js 文件中，而不是在我的模板中，即使 gatsby 告诉我我的错误在我的模板中。我尝试运行与我使用的其他模板完全相同的模板（只是在其中使用不同的查询），但仍然得到相同的错误。

我的完整 gatsby-node.js 文件：

exports.createPages = ({ actions, graphql }) => {
  const path = require(`path`);
  const { createPage } = actions;
  const projects = path.resolve("src/templates/projects.js");
  const defaultPage = path.resolve("src/templates/defaultPage.js");
  const projectsSubPages = path.resolve("src/templates/projectsSubPages.js");

  return graphql(`
    {
      allSanityDefaultPage {
        edges {
          node {
            slug
          }
        }
      }
      allSanityProjects {
        edges {
          node {
            slug
            projectChildPages {
              slug
            }
          }
        }
      }
    }
  `).then((result) => {
    if (result.errors) {
      reporter.panic("failed to create pages ", result.errors);
    }

    result.data.allSanityDefaultPage.edges.forEach(({ node }) => {
      createPage({
        path: node.slug,
        component: defaultPage,
        context: {
          slug: node.slug,
        },
      });
    });
    result.data.allSanityProjects.edges.forEach(({ node }) => {
      createPage({
        path: node.slug,
        component: projects,
        context: {
          slug: node.slug,
        },
      });
    });
    result.data.allSanityProjects.edges.forEach(({ node }) => {
        node.projectChildPages.map(childPage => {
          if (node && node.projectChildPages.length > 0 && node.projectChildPages.slug) {
            createPage({
              path: childPage.slug + "/" + node.projectChildPages.slug,
              component: projectsSubPages,
              context: {
                slug: childPage.slug + "/" + node.projectChildPages.slug,
              },
            });
          }
        });
    });
  });
};

【问题讨论】：

标签： javascript reactjs graphql gatsby

【解决方案1】：

代码

result.data.allSanityProjects.edges.forEach(({ node }) => {
    node.projectChildPages.map(childPage => {
      if (node && node.projectChildPages.length > 0 && node.projectChildPages.slug) {

那里的条件没有多大意义：

如果你在.map()，那么node和node.projectChildPages.length > 0肯定是true
projectChildPages 是一个数组，所以这里没有 projectChildPages.slug

查询

您获取的数据（源）不包含_rawBlockContent，因此您无法在页面组件中查询此内容。

【讨论】：