2024 年 5 月 23 日

将 Prisma ORM 带到 React Native 和 Expo

Prisma ORM 现已为 React Native 和 Expo 提供早期访问支持,满足了社区的普遍需求。此次集成引入了响应式查询(reactive queries),它使用 React hooks 在底层数据更改时自动更新 UI。

Prisma ORM 是在后端 JavaScript 应用中与数据库交互的首选方式。这归功于其出色的类型安全、便捷的迁移系统以及与您喜爱 IDE 的紧密集成。

我们早在 2019 年就收到了支持 React Native 的第一个请求,从那时起,该问题获得了超过 300 个点赞。我们一直希望 Prisma 能为本地应用(包括移动、网页和桌面应用)提供数据支持,所以社区的这一兴趣对我们来说很有意义。但我们也知道,仅仅将 Prisma ORM 移植到移动端是不够的。应用与 Web 服务器不同,为了提供卓越的开发者体验 (DX),我们需要构建附加功能以实现与底层平台的紧密集成。这就是我们一直在做的事情,今天,我们很高兴宣布 React Native 和 Expo 版 Prisma ORM 的早期访问 🎉 

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

响应式查询(Reactive Queries)

除了完整的 Prisma ORM API 外,我们还引入了一组新的查询函数,这些函数与 React 的 hook 机制集成,以便在底层数据更改时自动更新您的 UI。我们称之为响应式查询(Reactive Queries),它的工作原理如下

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

此行最初返回一个空数组,并在从本地数据库获取交易列表后立即重新渲染组件。

在 React 中,hooks 通常是独立的函数,例如 useFindManyTransactions()。为了与常规的 Prisma ORM API 保持一致,我们选择了另一种格式 prisma.transactions.useFindMany()。在早期访问期间,我们正在征集有关此决定的反馈意见。请在 Discord 上分享您的想法。

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

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

立即在您的 Expo 应用中使用 Prisma ORM

Prisma ORM 已准备好在您的 Expo 和 React Native 应用中立即使用。请记住这是一个早期访问版本,因此请帮助我们进行测试,并在 Discord 上与我们分享您的体验。要开始使用,请遵循 readme 中的说明

本地优先实验(A Local-First experiment)

我们设计响应式查询系统是为了将来能够直接与完全集成的同步服务一起工作。这将使您能够编写使用本地数据以获得最佳用户体验的应用,同时在后台自动同步以实现强大的功能,例如实时协作、在线状态指示和数据共享。我们现在还不能详细讨论这一点,但您可以在 GitHub 仓库中查看这一概念的实验性实现。

不要错过下一篇文章!

订阅 Prisma 新闻通讯