Connect a New Endpoints in a React Suspense App
Our app has evolved.
It doesn't make sense to scrub thru Pokemon one at a time when we have a list.
Let's change the function of our "Next" button to fetch the next page of Pokemon results by adding a new endpoint and connecting it to Suspense transitions.
Instructor: [00:00] Now that we have a list of Pokémon that we can click to jump to, it seems really silly to shuttle through them one by one. I'd like to change this so that the next button actually shifts to the next offset of Pokémon grabbing the next 20.
[00:17] To do that, we'll need to put our initial collection into state. Let's copy what we have here and duplicate it for collections. Let's change all this to collection. Now that we have a collection resource, we need to send it down to our component via props. We'll define that resource is collection resource and rewrite the component to read from that.
[00:56] We'll destructure off resource, collect all of the remaining props to leave them intact, and change our render function to read from that resource.
[01:09] Now we're left to modify our button. Let's first look at the response that we get and see what we can use. Visit the Network pane. We'll hit Refresh, and we see that the API actually gives us next and previous URLs, with the offsets and limits set appropriately.
[01:33] We don't have an API function yet that can do that, so let's add one. Let's duplicate this collection function, call it fetch(PokémonCollectionURL), and then take a URL.
[01:47] We then call that URL directly. Of course, I copied this one, because I want to make sure that we still have our ID edition. In a world where I had more time, I would definitely extract this out into a function, but let's go with what we got.
[02:04] Now that we have the right function, let's import it at the top of of our file here -- fetch(PokémonCollectionURL). Now, on Next, we want to fetch that URL. fetch(PokémonCollectionURL). We'll read from collectionResource. Instead of adding to the ID, we'll call it Next.
[02:37] Of course, we don't want to set a Pokémon resource, we want to set a collection resource. Let's change that. Format, save and see how we did. Hit next and indeed, we get the next 20. You can see in our offset here that we now have a next and previous. Of course, we can keep going forward by 20 and selecting any Pokémon that we want.
[03:05] Now, every time we hit next, we're seeing the receded state connecting to database. We can use useTransition to bypass this receded state. Let's do that. Our useTransition app, we're going to add a timeoutMs prop. Set that for 3,000 milliseconds, save and see what we got.
[03:29] Now when we hit next, the previous results stay in place until the new ones come along. Let's get some fresh results in here. If we want to make these results look deactivated, we can actually use isPending for this. Remember, isPending is the second element in this array and it's a Boolean.
[03:55] We can go down here into our list and make all these buttons disabled if we like. When we click next, all those get disabled until the next selection of Pokémon is loaded. Now that this button is more related to this section than this section, we can move everything around.
[04:28] When things are pending, let's add another one of those delay spinners. Add it to our imports from UI, format, save. As we click through, we'll see a cool little spinner as we fetch a new batch of Pokémon.