Question

我正在尝试为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查询的结果如下所示：

{
  "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,
              },
            });
          }
        });
    });
  });
};

Answer 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，因此您无法在页面组件中查询此数据。

Gatsby节点无法生成页面

1 个答案:

代码

查询