时间戳

首页 > 解决方案 > 如何将特定上下文注入 Gatsby 中的所有页面？

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

问题描述

使用gatsby-node.jsandcreatePages我可以使用 graphql 查询某些内容并使用该内容作为页面上下文创建页面。所以这些页面可以在他们的查询中使用这个东西作为参数。

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

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

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

标签： gatsby

解决方案

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

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。

推荐阅读