Gatsbyでjsonから記事を生成する

gatsby-starter-blogのMDをJSONに入れ替えて記事を生成する。初期い状態ではcontent→blogフォルダー内のMDを読み込む設定になっている。
gatsby-transformer-jsonをインストールして、jsonファイルを読み込む。ここではjsonファイルはstaticフォルダーに入れている
がほかのフォルダーでも構わない。optionsにtypeNameを設定しないと、先頭が数字のファイル名であれば読み込みが止まる場合がある
```
    {
      resolve: `gatsby-transformer-json`,
      options: {
        typeName: `Json`, // a fixed string
      },
    },
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `data`,
        path: `${__dirname}/static/json/`,
      },
    },
```
読み込むjsonファイルは次のものを例として、PA-APIで取得したamazonのアフィリエイト用の情報をjsonとして扱いやすくしたもの。このJSONデータからブログの記事にアフィリエイトを埋め込む。

```
[ {
  "Asin": "B0C85B1Q2D",
  "URL": "https://www.amazon.co.jp/dp/B0C85B1Q2D?tag=99-22&linkCode=ogi&th=1&psc=1",
  "ImageURL": "https://m.media-amazon.com/images/I/51LcTROqGsL._SL500_.jpg",
  "Publisher": "芳文社",
  "Contributor": "はまじあき(著)",
  "Booktype": "Kindle版",
  "Title": "ぼっち・ざ・ろっく！　６巻 (まんがタイムKRコミックス)",
  "Price": 842,
  "Category": "コミック,Custom Stores,4コマまんが",
  "Points": 8,
  "Day": "other",
  "Saletitle": "その他",
  "Date": "2023-09-16 23:02:24"
 },
...
]
```
graphqlのqueryはまず、json全体を取得する例。これではフォルダーに入れたjsonファイルが一緒くたにされて検索される。
```

query MyQuery {
  allJson {
    edges {
      node {
        Asin
        Booktype
        Category
        Contributor
        ImageURL
        Points
        Price
        Publisher
        Title
        URL
      }
    }
  }
}
  ```

一ファイルを一記事として出力するには、ファイルごとにjsonの中身を取得したい。
gatsby-node.jsには記事を一括生成する機能があるのでjsongファイルを読み込んで記事を生成する。
node.internal.mediaType === 'application/json'
と指定することで、jsonファイルにノードを追加する。ここではファイル名をslugにしている。slugをもとに記事を作成するがfilter: {extension: {eq: "json"}}で拡張子がjsonファイルのものだけに制限している。


  ```
exports.createPages = async ({ graphql, actions, getNode }) => {
  const { createPage } = actions
  const result = await graphql(`
query MyQuery {
  allFile(filter: {extension: {eq: "json"}}) {
    edges {
      node {
        fields {
          slug
        }
      }
    }
  }
}
  `)

exports.onCreateNode = ({ node, getNode, actions }) => {
  const { createNodeField } = actions
if (node.internal.mediaType === 'application/json') {
//console.log(node)
    const value = createFilePath({ node, getNode})
     createNodeField({
      node,
      name: `slug`,
      value,
    })
  }
  ```
blog-post.jsでテンプレートファイルにjsonデータを入れて、記事の中身を作る。slugを受け取ってからfileをslugで絞り込んでslugごとにjsonファイルを読み込んでいる。

````
query MyQuery($slug: String!)  {
  file(extension: {eq: "json"},fields: {slug: { eq: $slug } }) {
    childrenJson {
      Asin
      Booktype
      Category
      Contributor
      ImageURL
      Points
      Price
      Publisher
      Title
      URL
      Saletitle
      Date(formatString: "YYYY年MM月DD日")
    }
      fields {
      slug
    }
  }
      site {
      siteMetadata {
        title
        siteUrl
      }
    }
}
````

JSONから記事を生成して作ったサイト

https://kyukyunyorituryo.github.io/kindle_sale/

サイトのコード

https://github.com/kyukyunyorituryo/kindle_sale


参考

https://www.gatsbyjs.com/docs/graphql-reference/


https://www.gatsbyjs.com/starters/gatsbyjs/gatsby-starter-blog

https://qiita.com/d0ne1s/items/2e519907918b26c7a3d7

https://www.zakioka.net/blog/gatsby-md-content

https://qiita.com/d0ne1s/items/7cc9fde889e8f23b5b90