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
          }
        }
      }
    `}

以上内容将导致以下错误：

错误GraphQL错误编译您网站的 GraphQL查询。错误：RelayParser：遇到重复一个或多个文档的定义：每个文档必须有一个唯一名称。重复文件： -SiteTitleQuery

从某种意义上说，它们是两个不同的StaticQueries，分别用于两个不同的页面（布局），除非可以在页面之间共享StaticQueries，否则应该可以接受。

Answer 1

我个人并不真正在乎这个名称，实际上您可以完全忽略该名称，而Gatsby会自己使用一些唯一的随机名称。如果您选择给它起一个名字，则必须给它起两个不同的名字，没有解决方法。

但是，您可以使用Hooks版本的StaticQuery：Sort-Object

那样您就不会重复。

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

$Blobs = Get-AzureStorageBlob -Container $ContainerName -Context $Context `
| Where-Object{$_.LastModified.DateTime -gt (Get-Date).Date.AddDays(-1)} `
| Sort-Object -Property Date

并在您的布局中使用它：

useStaticQuery

Answer 2

@LekoArts进行了很好的处理。我想回答这个问题：为什么在两个不同的文件中不能有相同的查询名称？

Gatsby extracts all graphql queries from your files并独立执行它们。如果用户省略了查询名称，则会为该查询生成一个名称；但如果确实有名称，它将与所有其他查询位于同一空间。

该系统的优点是，您可以在任何文件中导出片段，并且该片段可用于其他查询。插件和软件包也可以使用此功能，例如gatsby-image和GatsbyImageSharpFluid和GatsbyImageSharpFixed。

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

为什么在Gatsby的两种不同布局上无法具有两个StaticQuery元素的相同名称？

2 个答案: