Non-Nav Mutations Exercise

[00:00:00]
>> All right, shall we rock and roll on this first exercise? I'm so excited about this. So non-nav mutations with useFetcher, so we've got a form on the invoice ID page. So let me actually run node dev 1 to get this up and running, and you'll wanna do the same.

[00:00:18]
Again, you wanna log in, kody@remix.run, kodylovesyou is the password. We have a deposits input or section here where you can add additional deposits for an invoice. So let's say that for this cat drawing, somebody paid an additional $3,000, they paid it today, another installment, do whatever you want.

[00:00:42]
And when I click Create, you're gonna notice we get a full page refresh when that happens. And we're being redirected back to the same page where we are. What is actually happening is we end up with a point in our history stack that points to the exact same page that we're on.

[00:01:01]
So we can go back and forth between these. And the browser is kind of acting, the way that it does, actually, it's kind of interesting how that works, to go back and forth between the same page, that doesn't make any sense. So whereas creating a new invoice would redirect to that new invoice we just created, that makes total sense for that.

[00:01:24]
In this case, it doesn't make sense to redirect you where you're already at. So you could think of this as kind of like favoriting a tweet, or whatever. So your job is to change this so that it behaves in such a way that it just makes a fetch request and does not involve a navigation of any kind, okay?

[00:01:40]
You'll notice that in the code that we're using a regular form. Normally with Remix, you're going to use the uppercase form, so you don't get the full page refresh. But the uppercase form, the component form that we typically are using with Remix, that also does a navigation. That emulates the same behavior as a regular form, and so you're still gonna get this entry in your history stack.

[00:02:04]
And that is not desirable either. So we're going to use a special hook called useFetcher to just make a fetch request and not do a navigation, okay? I think that's enough background and everything, and you have the background in here, so I will let you struggle a bit.

[00:02:21]
Like I said, this one actually is literally two or three lines of code changed, so spend a little time looking at the differences.