作りたいのがJSONデータを主体としたサイトなので、データをどのようにバックグラウンドで読み込むかが問題となっている。マークダウンファイルからの生成はいくつか見つかった。
gatsby-transformer-jsonでjsonファイルを読み込んでみると、ファイル名が数字だとエラーが出た。複数のjsonファイルも一つのjsonファイルとして扱われてしまうので、どのように分割させるのかという情報があまりなかった。
GraphQLにJSONを登録して、GraphiQLでクエリを作成した。
query MyQuery {
allJson {
edges {
node {
Asin
Booktype
Category
Contributor
ImageURL
Points
Price
Publisher
Title
URL
}
}
}
}
それをテンプレートに読み込んで表示などをした。ここで問題になったのが、一つのページごとにjsを作っていると、数が多かったらめんどくさく感じた。
<div>
{book.map(e => (
<div>
<h2>{e.node.Title}</h2>
<img src={e.node.ImageURL}></img>
<p>価格：{e.node.Price}円、ポイント：{e.node.Points}</p>
<p>{e.node.Contributor}、出版社：{e.node.Publisher}</p>
<p>カテゴリー：{e.node.Category}</p>
</div>
))}
</div>
そのほかの問題点が一ページに表示する量が多いとページの読み込みが長くなる問題。それを解決する一つの方法が無限スクロールタイプのサイトを作る方法で、もう一つはページネーションによる分割する方法。ただ、ページネーションの場合は分割するサイトの数が多くなってファイル管理の手間が増えそう。
Gatsbyでどのようにそれらを実行しているのかを調べると、いくつか見つかった。
ほかに色々な方法を見ていたが、ブログ形式のスターターから初めて慣れていったほうがよさそうな気がした。
