Gatsby Starter BlogにAmazonアフィリエイトを使う

Gatsby Starter BlogにAmazonアフィリエイトを張り付ける方法

Gatsbyにアマゾンリンクを埋め込めるプラグインを使っていたが、商品リンクの数が増えるとページ出力が遅くなった。なのでPA-APIで先に商品情報を取得してからjsonをGatsbyに読み込ませた。
例えば下のようなプラグインなどがある。

ブログにマークダウンで書かれた文章内にタグを入れることでアマゾンの商品リンクを作る。

<Amazon asin="B01EJ7AK5O" />

初めはmdを使っていたが途中からMDXにすることでcomponentを呼び出す形にした。

import Amazon from "../../../src/components/amazon"

受け取り側のcomponentはasinを受け取り、jsonファイルからasinで検索して商品情報をhtmlで返す。

マークダウンからASINを抽出、PA-APIでASINから商品情報を取得してJSONファイルに、JSONファイルをGatsbyに渡すという形に落ち着いた。

componentでasinを受け取り、jsonをgraphqlから取得してasinでフィルタリングする

i/src/components/Amazon.js

import * as React from "react"
import { useStaticQuery, graphql } from "gatsby"

const Amazon = ({ asin }) => {
  const data = useStaticQuery(graphql`
query MyQuery {
  allJson {
    edges {
      node {
        Asin
        Booktype
        Category
        Contributor
        ImageURL
        Points
        Price
        Publisher
        Title
        URL
      }
    }
  }
}
  `)
  const book = data.allJson.edges

 var file = book.filter(word => asin.includes(word.node.Asin));

完成したブログ

コード

PA-APIでのアマゾンアソシエイトjsonの取得方法

GatsbyでJSONの利用

参考