【日記】Gatsbyの勉強⑯

Gatsbyのチュートリアルは昨日でIntermediate tutorialsまで終わりました。それ以降は、必要になったら見れば良さそうな内容なので飛ばすことにします。

今日は、Gatsbyを使った際のページングについて調べて行きたいと思います。

実装方式

１．ページネーション（ページ分割）
２．無限スクロール

無限スクロール vs ページネーション：それぞれの特徴と使い分け

無限スクロールの参考サイト

GatsbyJSブログにInfiniteScrollを実装してみた

: Gatsby Starter

ページネーションの参考サイト

Gatsbyにページネーションを実装する

GatsbyJS + Contentfulなブログでページネーションを実装する | shimar's blog

今回は、無限スクロールのStarterを触っていこうと思っているんだけど、環境構築がうまくいかない。

gatsby new infinite-scroll https://github.com/baobabKoodaa/gatsby-starter-infinite-scroll

上記コマンドを実行するとエラー。
gitのcloneは終わっているので、npm installを実行するとWARNは出ているがエラーは出てなさそうなので、その状態でgatsby buildを実行するとエラー。

一度、npm updateを実行。

やっぱり状況は変わらず（何も環境変えていないから当然といえば当然）。
調べて見るとnpmのバージョンをダウングレードさせると動くかもという記事が見つかったけど、そこまでやって動かしたいというほどでもなかったので、原因調査は一旦切り上げ。

ソースを見ていくことに。README.MDには以下の記載があったので、順番に見ていくことに。

If you want to understand how this works, I recommend reading the code in the following order:
» gatsby-node.js
» gatsby-browser.js
» templates/paginatedPageTemplate.js
» components/view.js
» components/globalState.js
If you run into any difficulty, I will be happy to help.

一応ざっと見たけど、なんとなくでしか理解できなかった。
コメントのおかげで多少理解が進んだ。
gatsby-node.jsのcreatePagesでトップページとその次以降のページとjsonデータを生成（/1、/2みたいな感じで生成）。
無限スクロールでもこんな感じで生成している。

gatsby-browser.jsでGlobalStateコンポーネントでrootコンポーネントをラップしているのかな。
GlobalState.jsはちょっとハードルが高くて挫折した。
多分view.jsと組み合わせてページスクロールするごとに次のページのjsonデータを読み込んでレンダリングしているのだと思う。

今考えているWebサイトでは無限スクロールを実装しようと思っているので、その際には調べ直してみます。