GatsbyJs で json ファイルをインポート

March 03, 2022

GatsbyJS

GatsbyJs で json ファイルをインポートして GraphQL から取得

Data ファイル作成

src/data/topics./json を作成

[
  {
    "title": "GatsbyJS のインストールから Deploy するまで",
    "description": "TypeScript化, ESLint, Prettier, Grouping(Tags), CSS, ページネーション, 問い合わせフォーム、GitHubActions, その他",
    "url": "/blog/topics/gatsby-js"
  }
]

プラグインインストール

yarn add gatsby-transformer-json

プラグイン有効化

gatsby-config.js に追記

`gatsby-transformer-json`,
  {
    resolve: `gatsby-source-filesystem`,
    options: {
      name: `data`,
      path: `${__dirname}/src/data/`,
    },
  }