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

Question

这两个屏幕截图显示了同一个对象，从调用 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

Answer 1

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

在插件的 README 中，您可以看到如何使用 StaticQuery 组件，而不是支持和工作。 https://github.com/birkir/gatsby-source-prismic-graphql#staticquery-and-usestaticquery

试试看！