Gatsby.jsでノードを作るライフサイクルのsourceNodesでresourceのデータを参照したい時に詰まったのでメモ。

経緯

あるresourceのデータに外部画像のURLがあり、それを gatsby-image で使うために、gatsby-source-filesystem の createRemoteFileNode で外部画像用のNodeを生やす必要がありました。

新たにNodeを生やすのでsourceNodesのライフサイクルで

内部のスキーマに対してGraphQLで対象のURLを取得
そのURLに対してcreateRemoteFileNodeでノードを作成する

で良いのかなと思ったのですが、sourceNodesではまだschemaがないのでGraphQLのAPIを呼べませんでした。

ということで、sourceNodesライフサイクルでresourceを参照する方法です。

方法

getNode API で直接resouceのノードの情報を参照する。以上です。 schemaはないのですが、ノードはあるのでアクセスできるのですね。

const node = getNode("参照したいノードのID")

実際のコードはこちらです。
sourceNodesでfacebookのfeedのresourceから画像情報を取得してcreateRemoteFileNodeから外部画像用のノードを作成する例です

gatsby-node.js

"use strict";
const { createRemoteFileNode } = require(`gatsby-source-filesystem`);

exports.sourceNodes = async ({
  actions: { createNode, createNodeField },
  createNodeId,
  cache,
  store,
  getNode
}) => {
  // クエリは投げられないでNodeから直接取得。
  // 画像がないfeedもあるのでfilterで除外
  const feedData = getNode("ノードID").feed.data.filter(
    u => u.full_picture != null
  );

  await Promise.all(
    feedData.map(async data => {
      // 外部画像のダウンロードとノードの構築
      const fileNode = await createRemoteFileNode({
        url: data.full_picture,
        cache,
        store,
        createNode,
        createNodeId
      });

      await createNodeField({
        node: fileNode,
        name: "feedImage",
        value: "true"
      });

      await createNodeField({
        node: fileNode,
        name: "feedId",
        value: data.id
      });

      return fileNode;
    })
  );
};

参考

以下参考にさせて頂きました。良記事ありがとうございます。

Gatsby.jsのsourceNodesライフサイクルでresourceを参照する方法

経緯

方法

参考