Name: Refactor Create Deposit Api Route into a Next.js Server Action
Uploaded: 2023-08-15T22:21:34-05:00
Description: Create a server action for adding a deposit

Primer on Next.js App Router Nested Layouts

Primer on Dynamic Routing in the Next.js App Router

Migrate Invoice Routes to Next.js App Router

Migrate Remaining Next.js Pages to App Router

Migrate UploadThing Route Handler to Next.js App Router 

CHALLENGE: Migrate Remaining Pages Api Routes

Refactor React Invoice Client Components in Next.js

Refactor Next.js User Info Api Route into React Server Components

Refactor Invoice POST Handler to Next.js Server Action

Refactor Next.js API Route for Deleting a Deposit Into a Server Action

Refactor Create Deposit Api Route into a Next.js Server Action

Next Migration Course Extras

Create a server action for adding a deposit 

https://app.egghead.io/api/v1/lessons/next-js-refactor-create-deposit-api-route-into-a-next-js-server-action/subtitles

Instructor: [0:00] The last API route to move to the server action is our Create Deposit route. As we've been doing, we can remove everything here that is happening on the client. We'll just have our Add Deposit action here.

[0:13] Nothing here is happening on the client anymore. We can actually just copy our form. We can come back into our deposit and we'll just paste this here. Now, we can remove all of the React Hook Form code.

[0:28] Now, we just need to create our action. We can come back into our route handler. Let's copy everything from this file we'll need. Then let's go ahead and delete the route handler.

[0:39] Go ahead and clean up all the Next response and add your imports. We just got our form data and invoice ID, which will be our parameters here. Then we are just getting that information off of the form data.

[0:53] Now we can come back to where the form is. Change the on-submit to action. Now, we can delete our Create Deposit form. Make sure that all the names on your inputs match up with what you have in the action where you are getting it from the form data. Then the last thing in our action that we need to do is revalidate the path.

[1:17] Just a note about using this dynamic parameter. You can't pass the revalidate path function, a literal route segment, meaning that we can't pass this invoice ID that we are passing here. We can just pass the file system path associated with what we want to revalidate.

[1:32] Now if we save our action and we save our form, we put two of our utility functions here, but it's trying to say that these should be actions. We just need to put these in our utilities folder. Then we can come import those from our utilities.

[1:52] The error that we're getting here is because the way we have our action set up is it's trying to make it. It's trying to use it as if it was in a client component. That's OK because we're going to need this to be a client component when we add the useOptimistic hook.

[2:06] If we come up and we just add the 'use client' directive. If you're working on this, you may notice there is a weird bug that when you check the intent, it will come through as the case we want to create the deposit. It'll be a string, so it'll pass the invariant.

[2:24] Then if you have the throw new error or the default case for throwing new error for unsupported intent type, it will always throw that error. Even though it is finding the Create-Deposit-Intent type to be correct, it still throws the error. For now, you can just remove that default case because it's all coming through as it should.

[2:43] The last thing we want to do is add our pending UI and clear the form. We can come back into our form and first, let's create a ref for the form. I'll just type it as any. Then we want to clear that form or reset it.

[3:01] Then we want to add our pending UI. Let's get this button.

[3:21] Now that we've added our useFormStatus and we've added our ref to our form, we can test it. Once we submit, the form is cleared. We get our pending UI here in the button and then our path is revalidated.

Refactor Create Deposit Api Route into a Next.js Server Action

Share this video with your friends

Course

Next Migration Course Extras