Use Fetcher Keys for Registering Remix Fetchers

00:00 We've got this theme switcher. Every time I click it, it changes my theme, as you would expect. But what's interesting is we're using cookies for this. And so we need to make a request to the server to say, hey, my theme has changed. Send back whatever data that's theme-based or whatever.

00:15 A lot of really good benefits to using a cookie for managing a theme. But the challenge here is, how do we make this optimistic? Because we don't want to have the user wait for a network request before they get their update in the theme. And so we're doing some optimistic UI, and it works out really awesome, even on this slow 3G simulated network thing that we've got here. So I'm going to just scooch this over.

00:36 We're going to talk about a sweet new feature that Remix version 2.2.0 released to make this a little easier. So the way that we do it now is we have this fetcher that's responsible for making this request. The fetcher renders this form, it has the theme as a hidden value, what the next value should be, and then it has this name intent with the value update theme, so that we can identify this fetcher as well as the specific request or the intent of the request that's going to the backend. And then the backend can do its set cookie and all that stuff. So what's interesting about this is to be able to optimistically determine what the theme is going to be when this request is successful, we need to be able to find this fetcher.

01:23 And we do that using the useFetchers hook, where we find the fetcher whose form data's intent is updateTheme. Now this works fine, but Remix 2.2.0 made this even easier. And so what we can do now is we can provide a key to the useFetcher, and we can call this ThemeFetcher or whatever you want to call that. It's just got to be unique. And now I can actually access this fetcher directly right here.

01:52 So boom! And we'll call this our theme fetcher. And so now I don't need to worry about whether or not it exists. It's definitely going to exist. And then if it has form data, then let's get the theme and then we can continue with the rest of the logic.

02:08 So the rest of the logic doesn't change, it's much easier to look these things up because now they're in a global registry and they're keyed by their key, which is quite nice. To make this even better, I would say, let's extract this to a variable. We'll call this the themeFetcherKey. We'll stick that up here, and then we can have that directly right there. So that just makes it a lot more direct and specific, like, oh, okay, so these two should be the same and that's intentional.

02:35 So let's just make sure that actually does work. So we'll come over here, click a million times and boom it's totally still working. So we're in a good place. So I'm really happy about this because it actually does open up a lot of other things that we can do with Remix and Fetchers. Let your mind go wild on that.

02:53 But that is Fetcher Keys. So, thank you Remix 2.2.0.