useSWRInfiniteでinitialDataが認識されない現象が発生

公開日時

Next.jsでの無限スクロール機能を実装したい場合、useSWRInfiniteを使うと手軽に実装できる。

また、getStaticPropsで初期ページのAPIレスポンスを取得し、useSWRInfiniteの initialData にAPIレスポンスを指定しておくと、初回ページ読み込み時のclient側でのAPIアクセスをなくすことができる。

「Load More」ボタンが押されたタイミングで setSize を設定することで次のページ読み込みが実行される。

setSize((prevSize) => prevSize + 1)

が、swr@0.3.9を使っていた際にinitialDataを指定しているにも関わらず、「Load More」を押しても次のページ分が読み込まれない現象が発生した。

実装コードを見直しても変化がなかったので、試しに最新版のswr@0.3.11にアップデートしたところ正しい挙動になった。

yarn add swr

ライブラリのアップデートは大事。

参考


Related #next.js