2024年5月23日

Prisma ORMをReact NativeとExpoにもたらす

Prisma ORMがReact NativeとExpoの早期アクセスサポートを開始し、コミュニティからの人気のリクエストに応えました。この統合により、基盤となるデータが変更されたときにUIを自動更新するReactフックを使用する*リアクティブクエリ*が導入されます。

Bringing Prisma ORM to React Native and Expo

Prisma ORMは、バックエンドJavaScriptアプリケーションでデータベースを扱うための推奨される方法です。これは、その優れた型安全性、簡単なマイグレーションシステム、お気に入りのIDEへの密接な統合によるものです。

React Nativeのサポートに関する最初のリクエストは2019年にあり、それ以来この課題には300件以上の賛成票が寄せられています。私たちは常にPrismaがモバイル、ウェブ、デスクトップのローカルアプリのデータを支えることを望んでいました。そのため、このコミュニティの関心は私たちにとって理にかなったものでした。しかし、Prisma ORMをモバイルに移植するだけでは不十分であることも分かっていました。アプリはウェブサーバーとは異なり、優れたDX(開発者体験)を提供するためには、基盤となるプラットフォームとの密接な統合を提供するための追加機能を構築する必要がありました。それが私たちが行ってきたことであり、本日、React NativeおよびExpo向けPrisma ORMの早期アクセスを発表できることを嬉しく思います🎉 

Expoと協力し、Expoで管理されるアプリで簡単に使用できるようにしました。また、READMEにはExpoで管理されていないReact NativeアプリでPrisma ORMを設定するためのドキュメントが含まれています。

リアクティブクエリ

完全なPrisma ORM APIに加えて、Reactのフックメカニズムと統合し、基盤となるデータが変更されたときにUIを自動的に更新する新しいクエリ関数セットを導入します。これらをリアクティブクエリと呼び、次のように動作します。

このコンポーネントでは、データ依存関係を最上部に宣言します。Prisma ORMの通常のfindMany()クエリ関数の代わりに、ReactのuseState()useEffect()メカニズムと直接統合し、基盤となるデータが変更されたときにコンポーネントを再レンダリングする新しいuseFindMany()クエリ関数を使用します。

この行は、最初は空の配列を返し、その後、ローカルデータベースからトランザクションのリストがフェッチされるとすぐにコンポーネントを再レンダリングします。

Reactのフックは、例えばuseFindManyTransactions()のように独立した関数であることが一般的です。通常のPrisma ORM APIに準拠するため、私たちは代替形式であるprisma.transactions.useFindMany()を選択しました。この早期アクセス期間中、この決定に関するフィードバックを募集しています。Discordでご意見をお聞かせください。

LongPressハンドラでは、データベースの行が削除され、自動的にコンポーネントの再レンダリングがトリガーされます。データ変更はアプリケーションのどこでも発生する可能性があり、そのデータに依存するアクティブなコンポーネントの再レンダリングをトリガーすることに注意することが重要です。

リアクティブクエリを活用することで、多くのアプリケーションは、壊れやすく手動で行う状態管理を排除し、シンプルで自動化されたリアクティビティモデルを採用するようにリファクタリングできます。

今日のExpoアプリでのPrisma ORM

Prisma ORMは、本日よりExpoおよびReact Nativeアプリで使用できます。これは早期アクセスリリースであることを念頭に置き、ぜひテストにご協力いただき、Discordで体験を共有してください。開始するには、READMEの指示に従ってください。

ローカルファーストの実験

私たちは、リアクティブクエリシステムが将来的に完全に統合された同期サービスと直接連携するように設計しました。これにより、最高のユーザーエクスペリエンスのためにローカルデータで動作するアプリケーションを記述しつつ、バックグラウンドで自動的に同期して、ライブコラボレーション、プレゼンス表示、データ共有などの強力なエクスペリエンスを可能にします。これについてはまだ詳細をお話できる段階ではありませんが、このコンセプトの実験的な実装をGitHubリポジトリで確認できます。

次の投稿をお見逃しなく!

Prismaニュースレターに登録

© . All rights reserved.