Gatsby with useStaticQuery working locally but breaks in deployment

Question

I'm building a project in Gatsby where I'm trying to fetch for the frontmatter of a specific post from my markdown blog. Everything works as intended locally but my query is breaking in production. I do have an all blog posts page where the same frontmatter is displayed which works fine locally and in deployment, but my console log is returning an empty array in the build logs.

I know that I can probably move the query for my all blog page to somewhere higher in the data flow but I thought that the useStaticQuery hook was built to help us avoid such prop drilling. Obviously I have something setup wrong and I'd appreciate any leads.

import React from "react"
import { graphql, useStaticQuery, Link } from "gatsby"
import righteye from "../../images/index/righteye.png"
import lefteye from "../../images/index/lefteye.png"
import spaceeyewear from "../../images/index/spaceeyewear.png"
import * as newsCarouselStyles from "./newsCarousel.module.scss"
import { GatsbyImage } from "gatsby-plugin-image"

const NewsCarousel = () => {
  const covidProtocol = useStaticQuery(graphql`
    query {
      allMarkdownRemark(
        filter: { id: { eq: "29e257c9-ea3d-59ed-b4dc-f746c83af1be" } }
      ) {
        nodes {
          frontmatter {
            title
            date
            description
            featuredImage {
              childImageSharp {
                gatsbyImageData(placeholder: TRACED_SVG)
                id
              }
            }
          }
          id
          fields {
            slug
          }
          excerpt
        }
      }
    }
  `)
  
  console.log("Covid", covidProtocol)

  return (
    <div className={newsCarouselStyles.wrapper}>
      <section className={newsCarouselStyles.flex}>
        <img src={lefteye} />
        <Link
          to={`../news${covidProtocol.allMarkdownRemark.nodes[0].fields.slug}`}
          className={newsCarouselStyles.newsItemWrapper}
        >
          <GatsbyImage
            imgStyle={{
              width: `90%`,
              display: `block`,
              marginLeft: `auto`,
              marginRight: `auto`,
            }}
            image={
              covidProtocol.allMarkdownRemark.nodes[0].frontmatter.featuredImage
                .childImageSharp.gatsbyImageData
            }
          />

          <Link
            className={newsCarouselStyles.newsItemLink}
            to={`../news${covidProtocol.allMarkdownRemark.nodes[0].fields.slug}`}
          >
            <h2 className={newsCarouselStyles.newsItemTitle}>
              {covidProtocol.allMarkdownRemark.nodes[0].frontmatter.title}
            </h2>
          </Link>
        </Link>

        <img src={righteye} />
      </section>
    </div>
  )
}

export default NewsCarousel

Answer 1

As you pointed, you should be able to fix the issue using a page query rather than useStaticQuery hook (avoiding the drill-down). In the meantime, assuming that your query works under development, your query doesn't have anything wrong but you may need to add some rehydration controls to avoid looping through empty data and so, avoiding a code-breaking.

Have you tried something like that?

import React from "react"
import { graphql, useStaticQuery, Link } from "gatsby"
import righteye from "../../images/index/righteye.png"
import lefteye from "../../images/index/lefteye.png"
import spaceeyewear from "../../images/index/spaceeyewear.png"
import * as newsCarouselStyles from "./newsCarousel.module.scss"
import { GatsbyImage } from "gatsby-plugin-image"

const NewsCarousel = () => {
  const covidProtocol = useStaticQuery(graphql`
    query {
      allMarkdownRemark(
        filter: { id: { eq: "29e257c9-ea3d-59ed-b4dc-f746c83af1be" } }
      ) {
        nodes {
          frontmatter {
            title
            date
            description
            featuredImage {
              childImageSharp {
                gatsbyImageData(placeholder: TRACED_SVG)
                id
              }
            }
          }
          id
          fields {
            slug
          }
          excerpt
        }
      }
    }
  `)
  
  console.log("Covid", covidProtocol)

  return (
    <div className={newsCarouselStyles.wrapper}>
      <section className={newsCarouselStyles.flex}>
        <img src={lefteye} />
        {covidProtocol.allMarkdownRemark.nodes[0] && 
        <Link
          to={`../news${covidProtocol.allMarkdownRemark.nodes[0].fields.slug}`}
          className={newsCarouselStyles.newsItemWrapper}
        >
          <GatsbyImage
            imgStyle={{
              width: `90%`,
              display: `block`,
              marginLeft: `auto`,
              marginRight: `auto`,
            }}
            image={
              covidProtocol.allMarkdownRemark.nodes[0].frontmatter.featuredImage
                .childImageSharp.gatsbyImageData
            }
          />

          <Link
            className={newsCarouselStyles.newsItemLink}
            to={`../news${covidProtocol.allMarkdownRemark.nodes[0].fields.slug}`}
          >
            <h2 className={newsCarouselStyles.newsItemTitle}>
              {covidProtocol.allMarkdownRemark.nodes[0].frontmatter.title}
            </h2>
          </Link>
        </Link>
        }
        <img src={righteye} />
      </section>
    </div>
  )
}

export default NewsCarousel

Note the covidProtocol.allMarkdownRemark.nodes[0] control.