Model Data in the Prisma Schema for a Remix App
Let’s move away from hardcoded JSON and use our own database. In this course, we’ll be using Prisma as our database but Remix doesn’t actually care about what database you’re using!
To model Posts in our Prisma database we can edit the schema.prisma file under the prisma directory. Changes can be pushed to the db by running npx prism db push in your terminal.
We’ll also be seeding the database with data using a seed file in this lesson. Data in your seed file can be pushed running npx prisma db seed. Once you have data it can be accessed directly in your components!
Kent C. Dodds: [0:00] We do want this data to actually come from a real database and so, we're going to update our Prisma schema, which is how we access our SQLite database.
[0:07] Before we get started, I just want to mention that we're going to be using Prisma. You don't have to use Prisma, if you're using Remix, you can make a network call to some third-party server or to your own server, somewhere else, a Rails backend, wherever.
[0:21] Remix has no opinion on where you're getting your data or where you're making your mutations. For us, we want to have our own database. Prisma is an excellent ORM for accessing and mutating data in that database. That's what we're going to be using today.
[0:36] Let's open up the schema.prisma file, which is in our prisma directory. Right here at the bottom, below all of the other pieces that we had in here when we got started, we're going to add a new model for our Post with a slug, title, the markdown, and also createdAt and updatedAt as well.
[0:55] We'll save that. Then, we're going to open up our terminal. Let's go ahead and cancel that. We'll run npx prisma db push. This will update our local SQLite database to match the schema that we've specified in our Prisma schema. Now, we want to seed our database with a couple of posts.
[1:16] Let's go to our seed.ts file, which is in our prisma directory here. We've already seeded it with a user and a couple of notes, but we want to seed it with some posts. I'm going to just paste that all in here. We'll take a look at what that's doing really quick.
[1:35] We first define all of our posts. We have our "My First Post!" Here's our markdown. We've got our "Trail Riding with Onewheel" and here's our markdown for that. Then, for each of those posts, we're going to upsert where the post.slug is equal to the slug that we specified.
[1:51] Then, we pass the post for update and create. Whether we're updating or creating, this is the data that we want that value to be at. We'll save that. We'll run npx prisma db seed to get our database seeded with all of that data. Then, we'll run npm run dev to get our dev server up and running again.
[2:11] As a last step to actually get this from the database, we're going to import prisma from db.server file, which is located right here. This is responsible for connecting our Prisma client. With that, now, I can simply return prisma.post.findMany. That's going to get all of the posts in our database.
[2:35] We come over here. We hit refresh and there's "My First Post." Those pages are still not built, but if you go ahead and go to the home page, click the "Blog Post" link, and see the data that's coming back, we'll see that the posts do indeed have our updatedAt, our markdown, and createdAt fields which they did not have before. This is coming from our seeded database.
[2:57] In review, what we did here was we went into the prisma directory. We updated our schema to include the Post model. We updated our seed file to create a couple of posts for us. This is not the way that we're going to be creating our posts in the future. When we add the Create feature, we will be inserting things normally. This is just for local testing.
[3:18] We ran npx prisma db push to push the changes to the schema and npx prisma db seed to seed our database with this test data. Then, we updated our post.server to look in prisma.post to findMany, to get all of the posts that we have in our SQLite database.