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

Question

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

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

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

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

Answer 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