Advanced Remix

Imperative Mutations Exercise

Kent C. Dodds

Kent C. Dodds

Professional Trainer
Advanced Remix

Check out a free preview of the full Advanced Remix course

The "Imperative Mutations Exercise" Lesson is part of the full, Advanced Remix course featured in this preview video. Here's what you'd learn in this lesson:

Students are instructed to finish the Remix implementation of the logout modal. A post request should be sent to the /logout route with the useSubmit() hook.


Transcript from the "Imperative Mutations Exercise" Lesson

>> Let's close this down so we can work on or get introduced to exercise 6, Which we will do now. So open up the readme in exercise 6 and stop the server for exercise 5, run node dev 6. Then we'll come over here, go to 4006, log in with, kodylovesyou, and boom, we're back in the app, back in action.

And instantly, poof, we get the logout modal. So this is actually what we're gonna be working on. You may not have noticed, but there was a logout modal that pops up after I think an hour or something. In this exercise, we've reduced that to five seconds, and then you get another two seconds before this modal goes away and you get logged out.

So your job is to implement the auto logout functionality. We're doing a mutation that is imperative. The user didn't do anything, and so we're going to log them out automatically. All of the modal stuff, the timers, all of that is implemented for you. This is not a React workshop.

So your job is just to trigger the fetch that will make them be logged out. So I give an example of what actually how I've done something like this on my own blog. And my blog, I actually use a fetcher for this. In our case, we're actually doing a navigation, and so we're not gonna use a fetcher cuz a fetcher has no navigation.

We're actually gonna navigate them to the login screen. So we're going to be using useSubmit, which is the exact same as useFetcher, or it's the exact same as useFetcher.submit, except it actually triggers a navigation. So that's what we're gonna be using. And yeah, you're gonna be working in the app root.

So have an excellent experience on your exercise 6, and we'll see you on the other side.

Learn Straight from the Experts Who Shape the Modern Web

  • In-depth Courses
  • Industry Leading Experts
  • Learning Paths
  • Live Interactive Workshops
Get Unlimited Access Now