Next.js + GraphQL Yoga + Nexus + Prismaあたりを使用したリソースのCRUD操作がリアルタイムに確認できるサンプルアプリを公開しました

概要

会社につよつよエンジニアが参画してくれて、技術選定から一緒に進めることができて毎日非常に勉強になっているので、ここ1ヶ月に対してのまとめになるようなプロジェクトを作成してアウトプットします。
GraphQLでの基本的なリソース操作がわかる サンプルアプリのリポジトリ を公開しました。

ライブラリ・機能

Next.js + GraphQL Yoga

サーバー機能のあるNext.jsでルーティングとAPIリクエストを受け付け、GraphQL Yogaの Integration with Next.js でNext.jsと連携しています。
これにより、GraphQL用のサーバーやコンテナは不要になります。

Nexus

NexusでバックエンドのスキーマはすべてTypeScriptで記述でき、Nexusの機能でGraphQL SDL（Schema Definition Language）は自動生成されます。

GraphQL Code Generator

また、フロントエンドではNexusで自動生成されたGraphQL SDLをもとに、GraphQL Code GeneratorでGraphQLリクエスト用のHookを生成できます。

URQL

GraphQLクライアントです。
GraphQLクライアントはたくさんありますが、以下の点で相性が良いため採用しました。

・基本的な利用においてキャッシュ管理が不要（Mutation時に同一モデルのQueryキャッシュが自動更新）
・GraphQL Code Generatorで生成されるHookが使いやすい

Prisma

TypeScriptのためのORM。

Tailwind

configのカスタマイズをすると、ほとんどのスタイルをclass名だけで適用できる。
管理画面などにおいては不自由なくスタイルを適用できることが多い。

React Hook Form + Yup

バリデーションの定番セット。
フィールドの値が非制御となるので、細かくハンドリングが必要ないときは容易にバリデーションを適用できる。

MUI

フィールドを手軽に用意できるほか、DataGridは無償利用可能なものでもソートや検索など多機能。

まとめ

とてもいい感じの技術スタックになっている気がしています。
今後はnexus-prismaというPrismaとNexusの連携を支援するライブラリも使ってみてどんな感じか見ていきたいです。
nexus-prismaは今回のアウトプット用のプロジェクトではそこまで恩恵を感じられなさそうだったので後回しにしました。