从 gatsby-node.js 将数据传递到 createPages API答案

【问题标题】：Pass data into createPages API from gatsby-node.js从 gatsby-node.js 将数据传递到 createPages API
【发布时间】：2018-02-11 16:38:21
【问题描述】：

我想在使用 gatsbyjs 时以变量的形式将数据传递到我的 react 组件中

我可以在不同的 URL 处生成页面，但我希望每个页面都可以访问 GraphQL 查询之外的数据。我知道上下文已传递给 GraphQL，但我不想这样做。

例如，使用它我可以使用反应组件创建一个名为 localhost/my-page 的页面。但是在组件内部，我使用 AJAX 从另一台服务器获取数据，并且需要将搜索查询传递给创建页面内的道具。

请问我该怎么做？

const path = require('path');

exports.createPages = ({ boundActionCreators }) => {
const { createPage } = boundActionCreators

const component = path.resolve('src/pages/demo-photos.js')

const pages = [ 'one' ].map(name => ({
  id: `page-${name}`,
  path: `/${name}`,
  component,
  layout: `index`,
  context: {
      searchtag: `${name}`, // I WANT THIS AVAILABLE INSIDE MY REACT COMPONENT
  }
}))

pages.map(p => createPage(p))
}

【问题讨论】：

searchtag 应该作为props.pathContext.searchtag 进入您的组件。不是吗？
pathContext 就像魅力一样。拯救了我的一天。谢谢:)
您好，您能举个例子说明一下您是如何使用 pathContext 的吗？

标签： reactjs gatsby

【解决方案1】：

为了让 Gatsby 正常工作，我相信 Gatsby 需要获取您的所有数据。 Gatsby 抓取您的所有数据，构建自己的内部数据模型，然后将其写入作为静态构建一部分的 JSON 文件。这就是为什么 Gatsby 可以在用户点击之前预取页面。如果您在页面内添加自己的自定义数据提取，则 Gatsby 无法预提取该数据，因为它不知道数据的来源。

因此解决方案可能是构建您自己的源插件以将外部 API 数据拉入 Gatsby，然后使用“正常”的 Gatsby 流将这些数据放入您的组件中。这可能会帮助https://www.gatsbyjs.org/docs/create-source-plugin/

【讨论】：

【解决方案2】：

您传递到gatsby-node.js 中的context 属性的数据可通过模板组件（用于即时生成页面的组件）中的props.pageContext 获得

【讨论】：