Retrieve and Display Data from the Database through Prisma and Remix Loaders

Now that you have a database running, you need a way to connect to it in your application. This is where Prisma client joins the fray and really shines.

With Remix, there is a little bit of set up that we have to do to ensure that we won’t be opening extra connections to the database through Prisma. Through this set up you’ll learn about another important pattern in Remix which are services. You’ll create a db.server.ts service that will manage setting up the Prisma client. The folks at Remix have us covered with this code snippet that safely sets the client up for you.

After creating the client, we will create another service post.server.ts that will expose all of the functions that you can use throughout your application to retrieve data from the db. One great benefit of this pattern is that when consuming these services you don’t need to know about the implementation that is powering them. Just the api that is exposed, in this case a Post type and getPosts function.

FINALLY you’ll consume that function in the data loader at the root of your application to display posts from the database.

This sounds like a lot but you get this all done in under 5 minutes.