Add Data to your Database through Remix Actions and Prisma create
This is where things start to get fun, you’re adding data to your database!
To do this, you’ll learn about Remix actions. A Remix action utilizes HTML elements to accept input from the user. When creating data, you’ll set the form to a method of post. The form needs a route to post to so you will need to set the action to the route that will handle the request. In our case it is the index route the form is in.
The Remix action itself accepts a request that you can pull the form field data you need off of it. From here you can update your database directly, because you’re on the server! In this case, you’ll create a function createPost that will utilize Prisma to create a record. Once this happens, we will redirect users back to the index page that they were on.
Instructor: [0:00] It's time to create a post form. You are going to use this form to fill out post information, and make an HTTP post request to the index route.
[0:11] Remix uses action functions to handle post, put, and delete requests. Inside of the Action function is where you will make a call to your database. The first thing you need to do is head over to the components folder and create a new folder called postForm.
[0:35] Inside of that folder, create a file called postform.tsx. Now, you'll create a function that will return your form JSX. At the bottom of the file, you'll export default postFormComponent. Before we go any further, split the screen so you can see the changes as you make them.
[1:05] Here, I'm going to paste in the styled form component. Next, you can create an index.tsx file and export the postForm from postForm. To get your form rendering, pop over to the routes index file, import the component, and render it just above the posts list.
[1:28] When you save, you can see what the post form looks like. Back in the form component, you can see that the form has a flex and flex column classes. Go ahead and add a gap attribute to let flex manage the space between fields.
[1:50] This lets you remove all the margin bottom classes. Looking at the contents of the form, you have an input field for the title attribute, a text area for the post body, and a submit button at the bottom.
[2:09] For now, this component should take props with the type of component props without ref, passing in a string of form. Instead of passing the method statically, move that attribute up to the component props, and give the prop a default of post.
[2:36] We will pass the method directly and then spread the rest of the props on to the form component. Head back over to the index route. Here, you will add an action prop to the form.
[2:49] You don't want to define this prop inside the component because it is dependent on the page context it is rendered in. Since you are calling the form inside of an index action, Remix uses this to determine that you are posting to an index route and not some parent layout component.
[3:10] Next, head up to the top of the file where you will define an Action function. You can export const action Action function. This function will need to be async. Inside of the params, pluck off the request.
[3:31] When an action is submitted, Remix adds an async FormData function to the request. Const form = await request.FormData. Each field of your postForm component is added to this form. Const raw title = form.get passing in title.
[3:56] Const raw body = form.get passing in body. Now that you have input for a post, it's time to create a call to the database. You'll make a call to an async CreatePost function, passing in the raw title and raw body.
[4:15] This function doesn't exist yet, so you'll go create it in post.server.ts. There is one more thing to do in this Action though. That is to return a redirect back to the index route. To create your DB function, head over to post.server.
[4:34] Here, go export a CreatePost function. The arguments will take an object with a title and body. You can use the pickUtility type to create a type from the object being passed in. This lets you pass in the post type from Prisma and reference the title and body attributes in the type.
[5:00] You can return db.post.create. As you can see from the TypeScript documentation, this function expects an object with an attribute of data, and then the title and body attributes to create the post. Now that this functionality is in place, you can head to the browser and create post with your form.
[5:37] To review, you added a postForm component that takes a method in action prop. Then, you exported an action from the index route. Finally, you received the post input from the formData and created the post with Prisma.