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の利用

参考