Suspenseコンポーネント, SWRライブラリを利用したAPIデータ取得

はじめに Suspenseコンポーネントを利用し、SWRライブラリ経由でデータ取得、その取得結果をコンポーネントへ表示。まずは基本動作。 SWRライブラリはVercel社作成ライブラリで、詳細は他の記事が詳しい。 Suspenseタグ内部のコンポーネントのローディングが完了していない場合、propsのfallbackの内容を表示する。 Suspenseタグ内部のコンポーネントは複数指定が可能。API1, API2, API3を呼び出すコンポーネントを内部に指定し、すべてのデータ取得が完了するまで、fallbackの内容が表示される。 useQueryの返り値isLoadingにより出力を変える書き方等より、シンプルで可読性のある記載が可能となる。 SWRライブラリによるARI呼び出し ./src/components/hooks/useAllUsersSWR.ts(カスタムフック) use