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挂钩。如您所见，它将导致开发和生产上的差异。

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

尝试一下！

gatsby graphql查询在开发与生产中产生不同的结果

1 个答案: