2024年5月23日

将 Prisma ORM 引入 React Native 和 Expo

Prisma ORM 现已为 React Native 和 Expo 提供抢先体验(Early Access)支持,满足了社区的普遍需求。此次集成引入了*响应式查询*(reactive queries),利用 React Hooks 在底层数据发生变化时自动更新用户界面(UI)。

Bringing Prisma ORM to React Native and Expo

Prisma ORM 是在后端 JavaScript 应用程序中处理数据库的首选方式。这得益于其出色的类型安全性、简易的迁移系统以及与您常用 IDE 的紧密集成。

早在 2019 年,我们就收到了支持 React Native 的第一个请求,此后该问题获得了 300 多个赞。我们一直希望 Prisma 能够为本地应用(包括移动、Web 和桌面应用)提供数据支持,因此社区的这种兴趣对我们来说是理所当然的。但我们也知道,仅仅将 Prisma ORM 移植到移动端是不够的。应用程序与 Web 服务器不同,为了提供卓越的开发者体验(DX),我们需要构建额外的功能,以实现与底层平台的紧密集成。因此,我们一直在努力,今天,我们很高兴地宣布 Prisma ORM for React Native 和 Expo 的抢先体验版正式发布 🎉 

我们与 Expo 合作,确保它在 Expo 管理的应用程序中易于使用,并且 readme 中包含了在非 Expo 管理的 React Native 应用程序中设置 Prisma ORM 的文档。

响应式查询

除了完整的 Prisma ORM API,我们还引入了一组新的查询函数,它们与 React 的 Hook 机制集成,可在底层数据发生变化时自动更新您的用户界面(UI)。我们称之为响应式查询,其工作原理如下

在此组件中,我们在顶部声明了数据依赖。我们没有使用 Prisma ORM 常规的 findMany() 查询函数,而是使用了新的 useFindMany() 查询函数,它直接与 React 的 useState()useEffect() 机制集成,以便在底层数据发生变化时重新渲染组件。

此行最初返回一个空数组,然后在从本地数据库获取到事务列表后立即重新渲染组件

在 React 中,Hook 通常是独立的函数——例如 useFindManyTransactions()。为了与常规的 Prisma ORM API 保持一致,我们选择了替代格式 prisma.transactions.useFindMany()。在此抢先体验期间,我们正在征求对这一决定的反馈。请在 Discord 上分享您的想法。

LongPress 处理程序中,数据库行被删除,这会自动触发组件的重新渲染。值得注意的是,数据更改可以在应用程序的任何地方发生,并且它将触发依赖该数据的任何活动组件的重新渲染。

通过利用响应式查询,许多应用程序可以重构,以消除脆弱的手动状态管理,转而采用简单的自动化响应式模型。

今天就在您的 Expo 应用中使用 Prisma ORM

Prisma ORM 今天即可在您的 Expo 和 React Native 应用中使用。请记住这是一个抢先体验版(Early Access),因此请帮助我们进行测试,并在 Discord 上与我们分享您的经验。要开始使用,请按照 readme 中的说明进行操作。

本地优先实验

我们设计了响应式查询系统,使其将来能够直接与完全集成的同步服务协同工作。这将使您能够编写使用本地数据以获得最佳用户体验的应用程序,同时在后台自动同步,从而实现实时协作、状态指示和数据共享等强大功能。我们现在还未准备好详细讨论此内容,但您可以在此 GitHub 仓库中查看此概念的实验性实现。

不要错过下一篇文章!

订阅 Prisma 新闻通讯

© . All rights reserved.