Gatsbyでjsonから記事を生成する #Node.js

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から記事を生成して作ったサイト

サイトのコード

参考