Check out a free preview of the full Progressive Web Applications and Offline course:
The "Challenge 4: Using Fetch, Part 1" Lesson is part of the full, Progressive Web Applications and Offline course featured in this preview video. Here's what you'd learn in this lesson:

In this challenge, students fix the store cart, so it persists to course's example API.

Get Unlimited Access Now

Transcript from the "Challenge 4: Using Fetch, Part 1" Lesson

>> Steve: So, I don't know how to break this to you. But the shopping cart you've been working with so far is a lie. It hasn't been going to the server. We just updated the DOM and told you everything was okay, and we never actually saved any of it.

[00:00:12] But that's where you come in, right? What we're gonna do and I'll take you on a little tour of it in a second, is we have this save cart function in the cart store. It doesn't actually save the cart right now, because we didn't know how to use fetch, right?

[00:00:30] We didn't know how to fire off the request to save it. So, we're gonna need to update it so instead of just lying to us and saying yeah, totally saved it, to in fact, do the thing that we asked it to do. We're gonna take a look at the API to help you figure this out.

[00:00:46] Mike made this pretty cool file called API_PLAYGROUND.http and if you have one of the recommended plugins, you'll to be able to take the API for a spin. So I'm gonna do that with you real quick and then I'm going to cut you loose.
>> Steve: All right, and I'm gonna take a little less of this.

>> Steve: Sweet, all right, so if I go to files and I'm just gonna do API playground, and what we can see here, please start your server. Please stop server. Good catch.
>> Steve: There it is.
>> Steve: This is why you program with friends, they know when your server's not running, even when you're not paying attention to those things.

[00:01:39] All right, cool. So we can see Mike has documented the API. So we could theoretically get the items. You click this, you'll actually see what the JSON response might be. So this will get all the items and store. We can, too big. We can limit to them to two, we can get the tenth one forward, we can get just ones from a given category.

[00:02:09] Note those are great, but they are beyond what we've been tasked to do. We can see that if we are successfully getting the items, they show up on the page, that is not an issue. The issue was that saving to a cart was a lie. And we are here to rectify that lie.

[00:02:27] So we can see we can put, to the shopping, we can send it an array of items. That seems interesting to me. I can put stuff in the shopping cart. Seems like that would be relevant for the task at hand. Also, it looks like I can get all the orders, and I can also post an order.

[00:02:48] Again, seems relevant to our interests, just saying. I say all this apropos of nothing. Not that you will not about to implement saving carts and orders to the server or anything. Just totally spitballing here. All right, then we can go to CartStore.
>> Steve: And we gotta go through this.

[00:03:12] So we can see this.savedcart, that looks interesting to me, we'll keep going. This.savedcart, we're definitely saving the cart a lot. We're saying there's this really helpful code comment here that says persist the cart, which immediately just resolves a promise with the stuff. So it didn't save it to the service, like yeah, it did it, here it is, back to you.

[00:03:35] Seems like what we might wanna do is replace this. Like empty promise with hey, why don't you put the stuff in the chart and then return to me the promise from fetch that says whether or not this was successful and then I'll do the thing, right? So let's look at our tasks again.

[00:03:57] So our first task here is to go to the CartStore and cuz we're gonna implement a fetch that's going to use the correct API call. And we're gonna send it to the server to hopefully persist, which will give us back a promise that we could hand back to the UI.

[00:04:14] Questions, comments, concerns, cries of outrage?