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

Question

我想在使用 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))
}

Answer 1

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

所以解决方案可能是构建您自己的源插件以将外部 API 数据拉入 Gatsby，然后使用 "normal" Gatsby 流程将该数据导入您的组件。这可能会有所帮助 https://www.gatsbyjs.org/docs/create-source-plugin/

Answer 2

您在 gatsby-node.js 中传递到 context 属性的数据可通过模板组件中的 props.pageContext 获得（您用来生成页面的组件 on-the-fly)

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

Pass data into createPages API from gatsby-node.js

reactjs

gatsby