gatsby graphql query yields different results in development vs production - reactjs

Question

these two screenshots are showing the same object, returned from a call to useStaticQuery, one in development and one in production. the development object looks the way its supposed to (as it appears in graphiql) but the image on top of production, the object is really weird with totally different fields, and I can't understand why.
to clarify, the first image is of production and the second is development build
Can someone please tell me why this is happening?
here is the whole component:
import React from "react"
import { linkResolver } from "../../utils/linkResolver"
import { useStaticQuery, graphql, Link } from "gatsby"
import Nav from "react-bootstrap/Nav"
import Navbar from "react-bootstrap/Navbar"
import NavDropdown from "react-bootstrap/NavDropdown"
const MyNav = () => {
const data = useStaticQuery(graphql`
query myNavQuery {
prismic {
allAffiliates {
edges {
node {
_meta {
id
type
uid
}
about
affiliate_name
author_name
image_1
image_2
map
}
}
}
}
}
`)
const affiliates = data.prismic.allAffiliates.edges
return (
<Navbar collapseOnSelect variant="light" expand="sm">
<Navbar.Brand href="/">
<div className="nav-logo">Global Paradise Studios</div>
</Navbar.Brand>
<Navbar.Toggle aria-controls="basic-navbar-nav" />
<Navbar.Collapse id="basic-navbar-nav">
<Nav className="ml-auto">
<NavDropdown title="Affiliates" id="basic-navbar-dropdown">
{affiliates.map(affiliate => {
return (
<NavDropdown.Item href={linkResolver(affiliate.node._meta)}>
{affiliate.node.affiliate_name[0].text}
</NavDropdown.Item>
)
})}
</NavDropdown>
<Nav.Link as={Link} to="/">
Home
</Nav.Link>
<Nav.Link as={Link} to="/about">
About
</Nav.Link>
<Nav.Link as={Link} to="/contact">
Contact
</Nav.Link>
</Nav>
</Navbar.Collapse>
</Navbar>
)
}
export default MyNav

Answer 1

Are you using the gatsby-source-prismic-graphql plugin? If so, then it doesn't currently support the useStaticQuery hook. As you've seen it will cause differences in development and prod.
In the README for the plugin you can see how to use the StaticQuery component instead which is supported and works.
https://github.com/birkir/gatsby-source-prismic-graphql#staticquery-and-usestaticquery
Give that a try!