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

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

元の状態は取得した画像の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 ($("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を適用することができました。