如何将特定上下文注入 Gatsby 中的所有页面？

Posted 2023-04-14

【中文标题】如何将特定上下文注入 Gatsby 中的所有页面？

【英文标题】：How to inject certain context into all pages in Gatsby?

【发布时间】：2019-04-19 10:01:23

【问题描述】：

使用 gatsby-node.js 和 createPages 我可以使用 graphql 查询 something 并使用该 something 作为页面上下文来创建页面。所以这些页面可以在他们的查询中使用那个 something 作为参数。

我面临的问题是我不想使用createPages。我对默认创建的页面（来自gatsby-plugin-page-creator）完全没问题，我只希望它们都拥有来自graphql的something作为上下文。

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

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

【问题讨论】：

据我所知，您想要实现的目标尚不可能。页面查询从在createPages 调用gatsby-node.js 中设置的上下文接收其参数。由于 Gatsby 解析 graphql 标记模板的方式，您不能直接将 args 传递给它（通过表达式插值）。

我也面临同样的挑战，我想我会在根模板中使用静态页面查询。

【参考方案1】：

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

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。

【讨论】：

感谢您的建议。不幸的是，它对我不起作用，因为我需要的上下文也应该来自 graphql，并且我不能在 onCreateNode 中使用 graphql。此外，我需要能够将此上下文用作页面查询的参数，而不是作为有效负载。