外部イメージにgatsby-imageを適用する方法

以前行った外部リンクのリッチ化の続きです。

元の状態は取得した画像のURLを直リンしてしまっていました。

読み込みのラグもありますし、何より相手のサーバーに負荷をかけることになるので一回習得してしまってGraphQLでいい感じに使えるようにしようというのが今回の趣旨です。

# 解説

外部イメージを扱いたい時は createRemoteFileNode を使います。

前回のコードに処理を追加します。

gatsby-node.js
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 ($("meta[property='og:image']").attr('content'))
image_url = $("meta[property='og:image']").attr('content')
else if ($("meta[name='image']").attr('content')) {
image_url = $("meta[name='image']").attr('content')
}
const fileNode = await createRemoteFileNode({
url: image_url,
parentNodeId: node.id,
getCache,
createNode: actions.createNode,
createNodeId,
})
if (fileNode) {
node.image___NODE = fileNode.id
}
}
}

こうしておけば、あとはGraphQLで取得するだけです。

{
allLinksYaml {
nodes {
url
fields {
url
title
domain
description
}
image {
childImageSharp {
fluid(maxWidth: 300) {
...GatsbyImageSharpFluid
}
}
}
}
}
}
import Img from "gatsby-image"
export const RichLink = ({ href }) => {
// 中略
return (
<>
{/* 中略 */}
<Img fluid={data.image.childImageSharp.fluid} />
</>
)
}

これで外部イメージにgatsby-imageを適用することができました。

deg84

フリーランスでWeb系のエンジニアとスクラムマスターをやっています。

© 2020 deg84