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