Add Data to your Database through Remix Actions and Prisma create

InstructorIan Jones

Share this video with your friends

Send Tweet

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.

Chad Elofson
~ 2 years ago

When I try to add a new post, I get a HTTP 405. I have looked at the source code on github too, but don't see where this is causing a 405

Gerard Sargent
~ 2 years ago

@Chad Elofson - I had the same problem that was solved by making sure props were spread on the form element in PostForm after my method was defined:

<form className="flex flex-col gap-4" method={method} {...props}>

Does that help?