reactjs - 为什么 Gatsby 的两个不同布局上的两个 StaticQuery 元素不能具有相同的名称？

Question

例如，如果我有两个布局并且我想使用相同的布局，我需要为每个布局命名不同的 StaticQuery:

layoutA.js

const LayoutA = ({ children }) => (
  <StaticQuery
    query={graphql`
      query SiteTitleQuery {
        site {
          siteMetadata {
            title
          }
        }
      }
    `}

layoutB.js

const LayoutB = ({ children }) => (
  <StaticQuery
    query={graphql`
      query SiteTitleQuery {
        site {
          siteMetadata {
            title
          }
        }
      }
    `}

以上会导致以下错误:

error GraphQL Error There was an error while compiling your site's GraphQL queries. Error: RelayParser: Encountered duplicate defintitions for one or more documents: each document must have a unique name. Duplicated documents: - SiteTitleQuery

在某种程度上，它们是两个不同的 StaticQueries，用于两个不同的页面(布局)，并且应该是可以接受的，除非 StaticQueries 可以在页面之间共享。

Answer 1

我个人并不真正关心这个名字，事实上你可以完全省略这个名字， Gatsby 会自己使用一些独特的、随机的名字。如果您选择给它一个名称，则必须给它两个不同的名称，没有解决方法。

但是，您可以使用 StaticQuery 的 Hooks 版本:useStaticQuery

这样你就不会重复。

<小时/>

因此，在新组件中，您可以编写以下内容:

import { useStaticQuery, graphql } from 'gatsby'

function useTitle() {
  const data = useStaticQuery(graphql`
    query {
      site {
        siteMetadata {
          title
        }
      }
    }
  `)

  return data.site.siteMetadata.title
}

export default useTitle

并在您的布局中使用它:

import useTitle from './useTitle'

const LayoutA = ({ children }) => {
  const title = useTitle()

  return <div><h1>{title}</h1>{children}</div>
}