以前行った外部リンクのリッチ化の続きです。
元の状態は取得した画像の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を適用することができました。