gatsby - 如何将特定的上下文注入(inject)到 Gatsby 的所有页面中？

Question

使用 gatsby-node.js 和 createPages 我可以使用 graphql 查询某事并使用该某事创建页面> 作为页面上下文。因此，这些页面可以在查询中使用该某物作为参数。

我面临的问题是我不想使用createPages。我对默认创建的页面(来自 gatsby-plugin-page-creator)完全没问题，我只是希望所有这些页面都有来自 graphql 的东西作为上下文。

基本上，我希望所有页面都可以使用全局上下文(我从 gatsby graphql 获得)。

有 onCreatePage 钩子(Hook)，但不幸的是，根据https://github.com/gatsbyjs/gatsby/issues/3121#issuecomment-348781341，graphql在那里不可用。 .

Answer 1

这个怎么样...您可以尝试在 gatsby-nodejs 文件中使用 onCreateNode() Hook 。例如:

const allMyPageNodes = [];

exports.onCreateNode = ({ node, actions, getNode }) => {
  const { createNodeField } = actions;
  if(...) { //whatever filtering you need to select JUST pages in your site
    const mySpecialContext = "blah"; //whatever your global context settings are
    createNodeField({ node, name: "myglobal", value: mySpecialContext });
    allMyPageNodes.push(node);
  }
}

```

然后，在此后的所有 graphql 查询中，对于页面，graphql 有效负载应填充 edge.node.fields.myglobal，并且您应该能够使用它执行任何您喜欢的操作。另请查看https://www.gatsbyjs.org/docs/static-query/用于直接从组件内部查询。

HTH。