Question

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

很显然，如果我只是将buildTime放在上下文提供程序中或在创建它的React组件中的任何地方，那么时间将随着每次刷新（而不是每次构建）而更新。

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

我想出的最好的解决方案是将构建时间写入文件，然后从文件中加载信息，这显然很可怕，因此，如果有更好的解决方案，那就太好了。

Answer 1

您可以使用GraphQL在需要它的Component中获取构建时间（而不是通过上下文提供程序传递下来）。下面的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

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

1 个答案: