FaunaDBを使ったCRUDアプリをnextjsのSSRとreact-queryライブラリで作ってみました～vercelでホスティング～

こんにちわ。nap5です。


FaunaDBを使ったCRUDアプリをnextjsのSSRとreact-queryライブラリで作ってみましたので、紹介したいと思います。

前回の記事と関連です。

react-queryライブラリはこちらになります。

Overview | TanStack Query Docs

前回と異なる点は参照以外のオペレーションをイベントハンドラで実行する際はキャッシュを無効化するために以下のステートメントを実行する点です。

queryClient.invalidateQueries([SHOW_KEY]);

react-queryのクライアントインスタンスは設定ファイルとかに切り出して各種ファイルからインポートして使いまわせばいいと思います。

SSRを使うときはオンデマンドにフェッチしたり、時にはキャッシュを利かせたりして、ハンドリングできるケースではないかと思います。業務システムの管理画面のダッシュボードとかにはマッチするかもですね。

前回の記事のようにswrライブラリでクライアント側で完結させる場合よりはデータ取得の頻度は低くなるはずです。swrライブラリでフェッチするときには更新頻度とかが多くなるので、その用途の需要があるときにはマッチするのではないかと思います。

デモサイトです。

タイトル未設定

デモコードです。

jovial-firefly-2t6uiz - CodeSandbox

動かすためには、以下のKEYの部分をFaunaDBのダッシュボードから作成して置換しておく必要があります。

Fauna | The distributed serverless database

export NEXT_PUBLIC_FAUNADB_SECRET=HERE_YOUR_KEY

せっかくなので、nextjsのAPI機能を使ってみました。

FaunaDBのUdemyコースを以下で公開していますので、興味ある方はどうぞ。

FaunaDBを使用したRSSキュレーションミニシステムの構築

簡単ですが、以上です。