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.
Instructor: [0:00] As always, you will start off by installing some npm packages. In your terminal, type npm i @prisma/client. Head over to your project in VS Code, create a folder called services. This folder will store any code that interacts with your database. Inside of services, you are going to create a file called db.server.ts.
[0:42] If you take a look at the official Remix tutorial, they show you how to manage a database connection with Prisma and Remix. Remix will reload your source files every time you make a change. This causes a potential problem in development, since you don't want to create a new connection to the database every time your source files change.
[1:05] If the environment is not production and the global DB variable hasn't been set, you create a new connection and assign it to the global DB variable. You will then sign the connection to the variable you will reference in the rest of your app.
[1:21] When the source files change, this global DB variable will still be there. Now that you've copy pasted the DB code, go and create a post.server file. First things first, you can import the DB from the path ~/services/db.server.ts.
[1:54] Oops, looks like there's an error because services is in the wrong folder. To correct this, drag services into your app folder. Export the type post from Prisma Client. This way, you can keep the post type in the same place as your post database access functions.
[2:15] Users of this file won't have to know that the post type comes from Prisma. Next, you'll export a function called getPost. You will start super simple and return all the posts in the database. Time to put your getPost function to work. Head on over to your route/index file. There is no need to define your own post type. Prisma creates a type that will keep track of all of the attributes on the model for you.
[3:01] GetPost is a Prisma promise. We're going to need to await it. Along with awaiting it, we'll need to make our LoaderFunction async. Notice the new LoaderData type. This type encapsulates the post.
[3:36] If you need to add more data to the loader, the type signature won't have to change. Instead of returning an array, you're going to return Remix's helper JSON function parsing in the data. The JSON function will set the appropriate headers to indicate a JSON response.
[3:56] Since the type of the LoaderFunction has changed, the useLoaderData hook needs to be updated as well. Now, you have to destructure posts out of the response. That's it. Head over to your browser at localhost:3000, and there's the post from your database.
[4:19] In review, you installed the Prisma Client with npm install @prisma/client. Next, you instantiated the Prisma Client while making sure extra database connections wouldn't be created in development. You used Prisma's findMany function to read all the posts in the database. Lastly, you called the getPost function inside of a loader and returned JSON to your index component.