Create & Update Queries

[00:00:00]
>> Brian Holt: form actions. So again, if your server actions are new to you, I have a whole section on that in Intermediate React V6. We cover these with Next.js in depth. We've already looked a little bit at them, but this would actually go on a bit more into them, more from the React perspective, and I'm sure Scott covers them in the Next Fundamentals as well.

[00:00:22]
So, we're going to go edit app actions articles.ts. So app, actions, articles here and then at the top, we're going to make these work, right? We'll make them actually insert into the database. EQ from Drizzle ORM. We're going to import DB from @db. You can put slash index, I think actually @db works as well, because it's the index file.

[00:01:01]
Right? Some people don't like that. I actually think that looks kind of elegant, so we'll leave it either way. Import articles from @db/schema, which is pretty smart to figure that one out. Okay, so with create article, so we have our unauthorized there. We'll get rid of the to do there, because that's what we're doing.

[00:01:28]
To do being a verb, it definitely should be, I have to have done this. Then we're going to say a constant response equals await. Create article. Oh, sorry, I'll wait, uh sorry. DB.insert, we're inserting into articles. And we're going to insert values. And here you say you're going to match everything up, title comes from data.title.

[00:02:17]
Content comes from data.content. Slug here, you'd want to like do something where like, so you'd like slugify the title or something like that, something clever. I don't want to do that, so for our placeholder value here that you will go fix later as your homework, I'm just going to put Date.now. Not necessarily the best placeholder because like you could definitely have collisions here, we just, I am assuming that you're not going to, this is going to be high traffic for now, right?

[00:02:50]
Famous last words. Why the, this, because we need to make it a string, right? There's a bunch of ways to making strings. This is the simplest way for me. Published. Everything's published by default. We'll do it live. Author ID is going to be from user.ID and again, we got user from Stackoff, right? Oh, we have to await this, sorry, await.

[00:03:23]
Oh, so actually, this wasn't working before, because that promise is always going to exist. Not a security vulnerability. No one ask any more questions. That is the power of TypeScript, though, of TypeScript being like that doesn't work. Okay, and at that point, if you get through here. What is this letters are preferred over.

[00:04:05]
Sure, okay. So it wants you to do it this way. Exact same thing, thanks Biome. Is this clearer? I would argue that this is less clear. I don't know, what do you think? Is this less clear or more clear? Versus that. Everyone could say, neither one of these is clear, you're dumb for doing either one of those, but here we are.

[00:04:31]
Okay, and, I mean, we're not really doing anything with the response here, so you really could just throw that away and say await db.insert like that. So that's fine, or you could return like one record successfully return or something like that, either way. Okay, any questions about this? Makes sense. It should just look like a normal database insert.

[00:05:18]
So, update looks much the same, let's go do that. So we're going to say. Gotta await this one too. And this one we're going to say. Await db.update. Articles.set. And then I'm going to say title is data.title and content is data.content. Now you might be saying these are optional, right? They're both optional technically, but because of the way that we structured the form, it's always going to be input with the form, so it's safe to assume that they're going to be there.

[00:06:06]
Otherwise, you have to say like data.content. And then you would do data.title or undefined. Something like that, or even better would be like void zero. Because this would then unset it so that nothing would get updated, right? This would just show up as undefined. But because we know it's always going to be there, I find this code to be much clearer, so I'm just going to leave it like that.

[00:06:38]
Okay, and then you also need to have a where clause where equals. Articles.ID and the ID it's going to, it's probably going to yell at you, yeah, because these are, this is a string because it's coming from the UI, right, and this is a number. So you need some way to make this a number. And my favorite is the unary plus.

[00:07:09]
So that takes a string and converts it into a number. Pretty sure you can do something like Number. Something like that and use the constructor to do it, but that I just like using the plus. Okay, and delete, as you might imagine, is even simpler here. And this is just await. Db.delete articles. Where equals.

[00:08:03]
Articles.ID and plus ID. That's it. That's all of it. So, this is kind of how you CRUD from a Drizzle database. You got the insert, you got the select that we saw before, and you got the delete. What would be your recommendation to handle some errors that might happen during the database operation here?

[00:08:46]
Yeah, I mean, I could see one where maybe this ID doesn't exist, right? That would be one, just to try catch. That's all. So try blah. And then assertion issue. What are you mad about? Catch. Oh, catch. Thank you. And then really what you want to do here is like send this to your observability platform.

[00:09:09]
Cause like you shouldn't ever be hitting this, right? Which we'll be setting up observability towards the end of the course. We'll do that with just Vercel because Vercel has like a very lightweight observability platform built into it, so you could just send that event to Vercel, say I encountered a client, an error here, this is what happened.