Gatsby：如何在构建时将数据传递给 React Context答案

【问题标题】：Gatsby: how to pass data to React Context at build timeGatsby：如何在构建时将数据传递给 React Context
【发布时间】：2019-03-14 04:51:30
【问题描述】：

我有一个 Gatsby 站点，我在其中使用 React Context 来提供主题（标题、页脚、样式等）。现在我想将上次构建时间添加到页脚，例如“最后更新时间：11 月 13 日 23:08”。我该怎么做？

显然，如果我只是将 buildTime 放在 Context Provider 中或创建它的 React 组件中的任何位置，那么时间将随着每次刷新（而不是每次构建）而更新。

我想我应该可以在gatsby-node.js createPages API 中设置buildTime = new Date()，然后在pageContext 中传递buildTime。但是在将它传递给几个 React 组件之后，我最终需要将它传递给 <ThemeContext.Consumer>。我无法将道具传递给上下文消费者。

我想出的最佳解决方案是将构建时间写入文件，然后从文件中加载该信息，这显然很糟糕，所以如果有更好的解决方案就好了。

【问题讨论】：

标签： reactjs gatsby

【解决方案1】：

您可以使用 GraphQL 在需要它的组件中获取构建时间（而不是通过上下文提供程序向下传递）。下面的 StaticQuery 仅在构建时执行。

import React from 'react'
import { useStaticQuery, graphql } from 'gatsby'

const IndexPage = () => {
  const data = useStaticQuery(query)

  return (
    <>
      <p>This site was last built on:</p>
      <p>{data.site.buildTime}</p>
    </>
  )
}

export default IndexPage

const query = graphql`
  query Info {
    site {
      buildTime(formatString: "DD/MM/YYYY")
    }
  }
`

来自https://www.lekoarts.de/en/blog/tips-and-tricks-for-gatsby#date-of-last-build

【讨论】：