Bringing Prisma ORM to React Native and Expo

Prisma ORM is the preferred way to work with databases in backend JavaScript applications. This is due to its excellent type-safety, easy migration system and tight integration into your favorite IDE.

We got the first request to support React Native back in 2019, and since then the issue has gotten more than 300 upvotes. We always wanted Prisma to power the data of local apps - both on mobile, web and desktop, so this community interest made sense to us. But we also knew that porting Prisma ORM to mobile wouldn’t cut it. Apps are different than web servers, and to provide excellent DX, we would need to build additional functionality to offer tight integration with the underlying platform. So that’s what we have been doing, and today, we are excited to announce the Early Access of Prisma ORM for React Native and Expo 🎉 

We have worked with Expo to make sure it’s easy to use in an app managed by Expo, and the readme contains documentation to set up Prisma ORM in a React Native app not managed by Expo.

Reactive Queries

In addition to the full Prisma ORM API, we are introducing a new set of query functions that integrate with React’s hook mechanism to automatically update your UI when the underlying data changes. We call these Reactive Queries, and it works like this:

In this component, we declare the data dependency at the top. Instead of using Prisma ORM’s normal findMany() query function, we use the new useFindMany() query function which integrates directly with the React useState() and useEffect() mechanisms to re-render the component when the underlying data changes.

This line initially returns an empty array and then re-renders the component as soon as the list of transactions is fetched from the local database:

It is customary for hooks in React to be free standing functions - for example useFindManyTransactions(). To conform with the regular Prisma ORM API, we have chosen the alternative format prisma.transactions.useFindMany(). During this Early Access period, we are soliciting feedback on this decision. Please share your thoughts on Discord.

In the LongPress handler, the database row is deleted, automatically triggering a re-render of the component. It’s important to note that data changes can happen anywhere in your application, and it will trigger a re-render of any active component that relies on that data.

By taking advantage of Reactive Queries, many applications can be refactored to remove brittle and manual state management in favor of a simple automated reactivity model.

Prisma ORM in your Expo App today

Prisma ORM is ready to be used in your Expo and React Native app today. Keep in mind this is an Early Access release, so please help us test it out and share your experience with us on Discord. To get started, follow the instructions in the readme.

A Local-First experiment

We have designed the reactive query system to work directly with a fully integrated sync service in the future. This will enable you to write applications that work with local data for the best user experience while syncing automatically in the background to enable powerful experiences such as live collaboration, presence indication, and data sharing. We aren’t ready to talk about this just yet, but you can take a look at an experimental implementation of this concept in the GitHub repo.