web-dev-qa-db-ja.com

Gatsbyで単一のjsonファイルから複数のページを作成する方法

私はnode.jsを初めて使用して反応しますが、gatsby.jsが大好きです。私は見つけることができるすべてのチュートリアルに従いました、そしてそれはとても素晴らしいツールです。

ただし、これを使用する主な理由の1つは、1000個の異なるレコードを含むファイルjsonがあり、レコードごとに新しいページを生成したいということです。

私はgatsby-node.jsファイルについてもっと学ぶ必要があり、次のリソースを知っているという結論に達したと思いますが、このトピックに関するチュートリアルやその他の例で、もう少しわかりやすいものはありますか？

https://www.gatsbyjs.org/docs/creating-and-modifying-pages/#creating-pages-in-gatsby-nodejs

jsonnode.jsreactjsgraphqlgatsby
11
Richard Petersen-Hall

あなたが参照していた例はすでにあなたに良い考えを与えるはずです。基本的な概念は、JSONファイルをインポートしてループし、JSONソース内の各アイテムに対してcreatePageを実行することです。したがって、次のようなサンプルソースファイルを考えます。

pages.json

[{
  "page": "name-1"
}, {
  "page": "name-2"
}]

次に、Node APIを使用して、それぞれのページを作成できます。

gatsby-node.js

const path = require('path');
const data = require('./pages.json');

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

  // Your component that should be rendered for every item in JSON.
  const template = path.resolve(`src/template.js`);

  // Create pages for each JSON entry.
  data.forEach(({ page }) => {
    const path = page;

    createPage({
      path,
      component: template,

      // Send additional data to page from JSON (or query inside template)
      context: {
        path
      }
    });
  });
};
15
Fabian Schultz