Npm start works but npm run build fails - header.js error - Gatsby prismic

Developing with Prismic
1

Hey I used the docs to create navigation:
https://prismic.io/docs/technologies/tutorial-5-add-the-navigation-gatsby
but I get this error when trying to do npm run build

Building static HTML failed for path "/404/"

See our docs page for more info on this error: https://gatsby.dev/debug-html


   6 | const Header = ({ isHomepage, navigation }) => {
   7 |   const homepageClass = isHomepage ? "homepage-header" : "";
>  8 |   const topNav = navigation.data.top_navigation;
     |                             ^
   9 | 
  10 |   return (
  11 |     <header className={`flex justify-between site-header ${homepageClass}`}>


  WebpackError: TypeError: Cannot read property 'data' of undefined
  
  - Header.js:8 
    src/components/Header.js:8:29

image
image714×472 36.3 KB 

export const query = graphql`
  fragment HeaderQuery on PrismicNavigation {
    data {
      top_navigation {
        link {
          type
          uid
          url
        }
        link_label {
          raw
        }
      }
    }
  }
`;

I think it's something in the graphql but not sure what, anyone know?

2

Hey, @ihaephrati, thanks for reaching out!

A validation to check if the response is null or not is needed before the topNav variable. Like so:

const Header = ({ isHomepage, navigation }) => {
  if (!navigation) return null

  const homepageClass = isHomepage ? 'homepage-header' : ''
  const topNav = navigation.data.top_navigation

I'll be sure to add this to the guide you are following.
Thanks

4

Thanks, it worked!
appreciate it

I have one more question if I may,

I'm trying to create a 3rd level menu, (treeview)

I saw this:

Can I please see an example of how to implement it with Gatsby?
I can see that the example in the nested lists is in Pug is it possible to see somewhere an example of how to do this with Gatsby?

Thanks again!

5

I was able to create A start like this.
Any tips?

import React from "react";
import { useStaticQuery, graphql } from "gatsby";
import { RichText } from "prismic-reactjs";

const Sidebar = ({}) => {
  const data = useStaticQuery(graphql`
    query SidebarQuery {
      prismicNewSideb {
        id
        data {
          body {
            items {
              list {
                text
              }
              list_level
            }
          }
        }
      }
    }
  `);
  // console.log(data);
  return (
    <ul className="multi_list">
      {data.prismicNewSideb.data.body[0].items.map((item) => {
        return (
          <li
            className={`
          multi ${item.list_level}
          `}
          >
            {" "}
            {RichText.asText(item.list)}
          </li>
        );
      })}
    </ul>
  );
};

export default Sidebar;
6

That's a good approach for creating the menu. I've updated the article you saw before to include a code example in React.
I can also recommend you use Fragments. That way you can have smaller more segmented fractions of queries throughout your project,
Let me know if it's helpful.

7

This issue has been closed due to inactivity. Flag to reopen.