Reactjs 为什么盖茨比的两个不同布局上的两个StaticQuery元素不可能有相同的名称？

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

layoutA.js

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

const LayoutA=（{children}）=>(
(
我个人并不在乎这个名字，事实上你可以完全忽略这个名字，盖茨比会自己使用一些独特的、随机的名字。如果你选择给它取一个名字，你必须给它取两个不同的名字，没有解决办法

但是，您可以使用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>
}

从“./usetTitle”导入usetTitle
const LayoutA=（{children}）=>{
const title=usettitle（）
返回{title}{children}
}
@LekoArts给出了一个很好的解决方案。我想回答这个问题：为什么在两个不同的文件中不可能有相同的查询名称

Gatsby&独立执行它们。如果用户省略了查询名称，则将为该查询生成一个名称；但是如果该查询确实有名称，则它将与所有其他查询位于同一空间中

该系统的一个优点是，您可以导出任何文件中的片段，它将可用于其他查询。插件和软件包也利用这一点，例如使用
GatsbyImageSharpFluid
和
GatsbyImageSharpFixed

除了使用
useStaticQuery
hook（仅适用于React^16.8）之外，还可以使用
StaticQuery
将重复的查询提取到较小的组件中，或者将其转换为一个

import useTitle from './useTitle'

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

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