react-adminで、Prismaをお手軽にデータソースにできるライブラリ【ra-data-simple-prisma】

こんにちは、Buildチームの佐々木です。
最近、会社の寮(私の年は千葉県市川市でした)から池袋に引っ越したら、飲み会に行く・帰る時に便利すぎて感動しています。
皆さんも是非便利な場所に住みましょう。

さて、今回は、「PrismaでDBを実装して作ったアプリ」に対して、お手軽に管理画面を作りたくなった人向けのお話です。

プロダクトを作成してリリースすると、非エンジニアのご担当者からちょっとしたデータ変更の依頼が結構頻繁にきます。
その度に我々エンジニアが毎回SQLを叩くのは手間ですし、危険なのでできれば担当者ご自身に管理画面からやってもらえるようにしたいですよね。

ra-data-simple-prisma は、この管理画面の作成に必要な無数のAPIを、設定なしで利用できるようにするライブラリです。
使ってみたらだいぶ便利でしたが、いくつか注意点(主にreact-adminの制約)もあったので記載させていただきます。

ra-data-simple-prisma のここが便利!

  1. 全てのmodelのAPI(NextJSで実行可能)が、設定なし(PrismaClientのインスタンスを読ませるだけ)で完成します

  2. react-admin からそのAPIを利用するための dataProvider が提供されているので、フロントエンド側も設定不要です。

  3. 管理画面のいろいろなパーツがreact-adminに揃っているので、画面自体の実装もらくらく!

ra-data-simple-prisma の利用の注意点

  1. (react-adminの制約ですが)Prismaの主キーの名前を、必ず `id` にする必要がある

  2. react-admin で利用される前提なので、作成したAPIを他の管理画面ライブラリ(refineなど)でそのまま使い回せない

    • ちょっと変えれば何とかなりそうなので、時間ができたら対応させたいです

私がプロダクトに利用しようとした際には、この「Prismaの主キーの名前を、必ず `id` にする必要がある」という制約がだいぶ致命的でした。
管理画面のためだけに、 User の主キーの名前を `userId` から `id` に、それ以外の model も同じように変更するなんて今更できませんでした。

皆様が新規プロジェクトを始める際に、react-admin でお手軽に管理画面を作成したいとお考えの場合は、主キーの物理名を `id` にしておくと幸せになれます。ぜひご検討ください。

ここまで簡単にPrismaからAPIが作れるライブラリは探した感じなさそうだったので、時間が取れる日に refine などもう少し制約の緩い管理画面ライブラリでも動作するように改修して公開してみたいです。

ご拝読ありがとうございました!


みんなにも読んでほしいですか?

オススメした記事はフォロワーのタイムラインに表示されます!