以前行った外部リンクのリッチ化の続きです。
元の状態は取得した画像のURLを直リンしてしまっていました。
読み込みのラグもありますし、何より相手のサーバーに負荷をかけることになるので一回習得してしまってGraphQLでいい感じに使えるようにしようというのが今回の趣旨です。
解説
外部イメージを扱いたい時はcreateRemoteFileNodeを使います。
前回のコードに処理を追加します。
const {
createFilePath,
createRemoteFileNode,
} = require('gatsby-source-filesystem')
// 中略
exports.onCreateNode = async ({
node,
actions,
getNode,
getCache,
createNodeId,
}) => {
if (node.internal.type === 'LinksYaml') {
// 中略
// image
let image_url
if ($(
