何时在 Gatsby 中使用 <StaticQuery /> 与页面查询？

Question

正如我在 Gatsby 中所理解的，页面查询将在父级进行，并将作为道具传递给子组件。当您在组件内部并想要获取一些数据以传递给它时，还有一个<StatiQuery />或useStaticQuery钩子。什么是最佳实践，我应该什么时候使用一个？

我猜这归结为 React 本身，例如，如果我们有需要更深层次数据的组件，我们会使用Context并将其传递下去，这样您就不必在更深层次传递道具。和这个一样吗？此外，如果有人有他们使用的任何模式。

Answer 1

我通常通过回答这个问题来决定将我的数据放在 Gatsby 的什么位置。假设我们正在制作一个电子商务商店：

我必须经常读/写数据吗？

1. 是（即添加/更新购物车项目）：使用上下文

2. 不，但应该在整个站点上访问数据（即搜索栏的产品列表）：使用 sourceNodes，并通过 useStaticQuery https://www.gatsbyjs.org/docs/node-apis/#sourceNodes获取数据

3. 不，但数据应该呈现到页面（即产品页面）：使用 createPages 和 pageContext 然后将必要的数据传递给创建的页面 https://www.gatsbyjs.org/docs/node-apis/#createPages

我认为这里重要的是，如果您将数据源放在 gatsby-node 中，您不会期望它经常更新，因为您需要在需要更新数据时重新构建。但是，如果您更新数据，可以有一些变通方法，例如触发重建。

我希望这有帮助！