CODEWITHSUNDEEP
javascriptreactjsgraphqlgatsby
Andreas
Andreas

Reputation: 188

Gatsby node fails to generate page

I am trying to build sub-pages for a projects category in Gatsby, each project parent page already generates the way it should but the sub-pages do not.

Each project can have zero to many sub-pages, I only want a sub-page to be generated if it exists. Data is coming from a headless CMS through GraphQL

My loop for generating these pages in gatsby-node.js currently looks like this:

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

This loops through the "allSanityProjects" part of this GrapQL query

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

The results of running just the allSanityProjects-query looks like this

{
  "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 fails building the project child pages with the following error.

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

My template looks like this:

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;

As far as I can tell my error is in my gatsby-node.js file, not in my template even though gatsby tells me my error is in my template. I've tried running the exact same templates as the others I use (just with different queries in them) and still get the same error.

My full gatsby-node.js file:

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

Upvotes: 2

Views: 2641

Answers (1)

xadm
xadm

Reputation: 8418

code

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

Condition doesn't have much sense there:

  • if you're in .map() then for sure node and node.projectChildPages.length > 0 are true
  • projectChildPages is an array so no projectChildPages.slug here

query

Your fetched data (source) doesn't contain _rawBlockContent so you can't query for this in page component.

Upvotes: 1

Related Questions