reactjs - Gatsby:如何在构建时将数据传递到 React Context

Question

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

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

我想我应该能够设置 buildTime = new Date()在gatsby-node.js createPages API，然后将buildTime传递到pageContext中。但是在将其传递给几个 React 组件之后，我最终需要将其传递给 <ThemeContext.Consumer> 。我无法将 props 传递给 Context 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