Setup Prisma

[00:00:00]
>> We have two more pieces to this. And we wanna switch over to prisma for our data. So we can actually save this and then we also want to optimize our data loading. So actually the first thing that I'm gonna do is update this getPosts to actually read from prisma.

[00:00:17]
So I've got this prisma thing that is coming from our db server thing. This little tilde here is just a helper thing that is built into Remix to resolve anything under the app directory. So you can find this file in db.server. And this is responsible for setting up the prisma client.

[00:00:38]
It does some wonky things in here that are explained there. So you can read that later if you want. But now we have access to our Prisma client. If you've never used Prisma before, that's okay. This is not a Prisma workshop. I gave you code snippets that you can use throughout the workshop.

[00:00:53]
But basically we already have our data schema set up for us for our posts. Shoot maybe we don't know that's right we don't have our schema set up. So let me add our schema or add this to our schema. Here's our model, it's a, post, and our model has a slug, that's gonna be our ID, the title and markdown and then we'll add created at and updated because, why not?

[00:01:20]
It could be useful for display, when was last time this blog post was updated? So we have that, but we also need to update our seed script. So that it will automatically add some posts to the database that we can work with, so we don't have to create them all the time.

[00:01:36]
So I'm going to borrow the seat script as well so we can save ourselves a little bit of time. So what this is gonna do is the seat script actually creates our user for us and then it has our posts in here. So, just an array of posts here's our slug title markdown, and then down here for each one of those posts we just absurd to create that post.

[00:02:02]
We're gonna attach script warning here because Prisma does hasn't been updated to know about our new schema. For its TypeScript so the last thing that we need to do for this piece is inside of this data loading directory we're going to run MPX Prisma migrate dev. To create a new migration and we're going to add posts and there we go cool.

[00:02:24]
So now typescript is happy because Prisma now knows about the post model. And we have some posts in our database. So again not a prison Workshop but Prisma is pretty rad. Anybody here use prisma before? You can raise your hand on online too, if you want. It is awesome.

[00:02:43]
If you've used it, then you're probably like, yeah, it is awesome. Okay, so prisma.post. We're going to find many. And we're just gonna get them all give me all the posts. And what's really great about this is we still have type safety, from the database all the way to our UI.

[00:03:03]
I just love that. How did I ever write code without TypeScript? I don't know. I legitimately do not know. Okay, so let's get this app started up again. And now we have no posts because I forgot to run the seed script. So last thing we need to do is npx prisma dv seed to get our posts put into the database.

[00:03:29]
There they are, like magic. Okay, great. One last thing that I wanna do here, and that is one of the cool things about the fact that this is a loader and that it runs only on the server, is that you get the opportunity to filter out the stuff that your UI doesn't need.

[00:03:51]
And you can perform calculations you do all sorts of things before it ends up in your UI. What's the number one reason people go to Graph QL, I actually don't know but I would guess. That's one of the main reasons people go to Graph QL is the data over fetching problem.

[00:04:07]
They've got like 30 different endpoints they need to go get data from. And so they hit every one of them. Sometimes they have to wait for this one before they can fetch this one, right. And so it just like takes a long time. It's tons of data downloaded to the user's device, it makes it slow.

[00:04:20]
And so they say, Graph QL and just make a resolver. That happens on the server side. So it can like resolve these queries. And off I go, I'm only getting the data in the UI that I need. Well, guess what? You have that with the loader. You solve that problem.

[00:04:34]
That problem does not exist in remix. If we were to say, hey, all I actually care about is the slug and the title. Well check this out. I can say post.map. And then we'll get a slug from p.slug and title from p.title and poof. Now I'm only sending the data I want.

[00:04:54]
So here let's actually let's compare this to make sure that we're doing what we think we're doing. So I come over here, we'll go to this. Look at our data request preview. We've got posts, and look at all that nonsense. I don't need that. Who needs that markdown in there?

[00:05:14]
So there's a ton of markdown, all that stuff. I'm just looking at a list of the posts. I don't need all that stuff. So now we just simplify it down to just the stuff that our UI needs, And now, all we're getting is the stuff our UI needs.

[00:05:30]
Graph QL has other use cases for sure. But this ain't 1, when you're using remix. I think that's cool. Now, on top of that, we have something even better with prisma. And that is we have select title through and slug through. So now we can at the database level only query this stuff that we want.

[00:05:54]
Prisma is awesome that way but if you're making fetcher calls or whatever you're doing. Yeah, you can totally just filter out the stuff your UI doesn't need. It's pretty bad. Okay, last thing I'm gonna do is when I interact with the database, I like to do that in a separate file models file that takes care of all interaction with the database.

[00:06:16]
I just think that scales nicer. So we're going to get take this. We're going to move it to models. And I'm going to make a file called post.server.ts. The dot server on here is not always necessary. But what it does is it indicates to the developer that this is only supposed to have server stuff, and it indicates to remix.

[00:06:41]
That when it's doing the client build, it can just skip over this file. It doesn't even need to bother resolving those dependencies or anything else. So that is what this is all about. So we're gonna export this and instead of get posting an essay, get post list items that we're not indicating this gets your posts like no, it's just the list items for the posts.

[00:07:02]
So now we can say get post list items. And we're basically in the same spot this if this were the user experience I was trying to create this is how I would do it