gatsby graphql 查询在开发和生产中产生不同的结果答案

【问题标题】：gatsby graphql query yields different results in development vs productiongatsby graphql 查询在开发和生产中产生不同的结果
【发布时间】：2020-07-29 04:35:28
【问题描述】：

这两个屏幕截图显示了同一个对象，从调用 useStaticQuery 返回，一个在开发中，一个在生产中。开发对象看起来像它应该的样子（就像它在 graphiql 中出现的那样），但是在生产之上的图像，这个对象真的很奇怪，具有完全不同的领域，我不明白为什么。

澄清一下，第一张图片是生产的，第二张是开发版的

谁能告诉我为什么会这样？

这是整个组件：

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

【问题讨论】：

你在生产中得到了正确的结果吗？
没有。我在生产中得到了错误的结果
你能显示查询吗？
是的，我编辑了帖子以包含查询。谢谢。
在同一个组件中是否有静态和页面查询*

标签： reactjs graphql gatsby prismic.io

【解决方案1】：

您在使用gatsby-source-prismic-graphql 插件吗？如果是这样，那么它目前不支持 useStaticQuery 挂钩。正如您所看到的，它会导致开发和产品的差异。

在插件的 README 中，您可以看到如何使用 StaticQuery 组件，它受支持且有效。 https://github.com/birkir/gatsby-source-prismic-graphql#staticquery-and-usestaticquery

试试看！

【讨论】：