GatsbyJSでテーブルに親子関係を作る方法

GatbyJS の graphQL 上でテーブル間の親子関係を作る方法

GatsbyJS でテーブルを作成する方法は日本語でも見つかったのですが、そのテーブルに親子関係を設定する方法が見つからず、公式を確認することになったので日本語で書いておきます。

解説兼ソースコード例

以下ソースコードのコメントで解説します。
gatsby-node.js に書いてください。
もしくは gatsby-node.js で require をした関数を export してください。

async function sourceNodes(
  {
    actions,
    createNodeId,
    createContentDigest,
    getNode,
    getNodesByType,
    reporter,
  },
  pluginOptions
) {
  /* Piyoテーブルのレコードを全件取得する */
  const nodeList = getNodesByType('Piyo');
  const promises = nodeList.map(async (node) => {
    const org = node['fuga'];
    let hoge;
    try {
      /* Piyoテーブルのfugaフィールドを取得してhogeを作ります */
      hoge = createHoge(org);
    } catch (e) {
      /* hogeの作成に失敗した場合 */
      reporter.panic("can't create hoge: ", e);
    }
    const newNode = {
      org,
      hoge,
    };

    /* nodeIdを作成して保持します */
    const nodeId = createNodeId(
      `piyo-fuga-hoge-${node.id}`
    );
    const nodeBase = {
      ...newNode,
      id: nodeId,
      parent: node.id // 子供側に親を設定する,
      children: [],
      internal: {
        type: "PiyoFugaHoge", // 子テーブルの名前を決める
        contentDigest: createContentDigest(newNode),
      },
    };

    /*
     * 子ノードを作成する
     *（Promise<void>を返すので子ノードを取得しなおさなければならない）
     */
    await actions.createNode(nodeBase);
    /* 子ノードを取得する */
    const childNode = getNode(nodeId);
    /* 親側に子を設定する */
    actions.createParentChildLink({ parent: node, child: childNode });
  });

  await Promise.all(promises);
}
exports.sourceNodes = sourceNodes;

以上です。ここまで読んで頂きありがとうございます。

Photo by Guillaume de Germain on Unsplash