Ember 2.x Ember 2.x

Exercise 10 Solution, Part 2

Check out a free preview of the full Ember 2.x course:
The "Exercise 10 Solution, Part 2" Lesson is part of the full, Ember 2.x course featured in this preview video. Here's what you'd learn in this lesson:

Mike continues the solution for Exercise 10. Now that data is successfully loaded the application, he adds some additional logic for handing a specific requestType in the serializer.

Get Unlimited Access Now

Transcript from the "Exercise 10 Solution, Part 2" Lesson

>> [MUSIC]

>> Mike North: This is the application adapter and I've put something extremely repo specific in it, so as soon as I start trying to work with other things, even just a single repo, this is not gonna work for me anymore. So I'm gonna create a little bit more space for myself here and we'll just wrap this on the second line, so we can see it all.

[00:00:24] And this as well, for kicks.
>> Mike North: So, I'm gonna put a debugger here, cuz I'm basically gonna do, I wanna look at a couple of different cases based on the primary model class, which will tell me what kind of record I'm deserializing. And the request type. So if we look at request type.

>> Mike North: This is a query, and primary model class has this model name property on it so I know I'm querying, which is going for a list. And I'm looking for objects of type repo, so that's pretty much all I need in order to massage this in a first pass.

[00:01:08] The first thing I'm going to do actually is, I need to find a way of, in a generalized way I want to make a top level key to contain either my object, which is like one repo, or my list of objects which is the list of repos. And so here's what I want to do.

[00:01:27] I'm going to do a switch. Request type. And this is not Crockford-esque code here but so [LAUGH].
>> Speaker 2: Specific to these two cases only right?
>> Mike North: [LAUGH] So, in the case of a query. I want to, I want my so we will make a fairly bump here. Let top level key so.

>> Mike North: All right, this is just, obviously with some significant knowledge of how things work under the hood and then default, we'll leave a debugger here just in case we forget something. And I just want to see how this works. Awesome. And then top level key is repos. Fantastic.

[00:02:48] So in the case of a query, I'm going to pluralize it. I get repos and we're good to go. So I can actually change this to top level key. And we'll just
>> Mike North: Let it ride. For now. We'll add stuff as needed.
>> Mike North: Alright, so we're at a different break point now, let me swing back towards the dov tools.

[00:03:26] Sorry. And this isn't going to work. I have to use the super fancy. He has six features for dynamic property keys. And all this is gonna do, it's a dynamic key. So, whatever the value of TLK is, that's gonna be the property key there to be a destructuring.

[00:03:55] All right. So, gosh. Things seem to be okay and I'm gonna take a look at the ember inspector and my data tab just became useful and I can look at repo. And look at all these. I got some nice stuff here, except my ids aren't really what I was hoping to get.

[00:04:15] So I happen to know that really all GitHub objects are gonna have the same thing where we have to do the old ID thing. Move that around and shift things. So, I'm just gonna take care of that here, payload, payload.map, and then we'll have rawItem. Normally there would be a little bit more trial and error.

[00:04:42] This is usually a pretty iterative process. And I happen to know that that condition will work here.
>> Mike North: And we'll take a look when that's done.
>> Mike North: And when we take a peek at one of these. I want to see that the id is a resolver and we've got oldId as null.

[00:05:20] Looks like we lost that somehow.
>> Mike North: Good thing I checked.
>> Mike North: Sweet and still null.
>> Mike North: Sorry what?
>> Speaker 3: Right, you can find in my data next again.
>> Mike North: I am but I should just be getting the value. I'm going to bank on that.
>> Mike North: All right, it was a refresh issue where I was stuck and the code hadn't quite reloaded again.

[00:06:04] But here we've got our old ID, we've done our mapping. Fantastic, and this should make things look better. So now this is sort of generic handling of at least for us the things we're interested in. And you can actually click under individual record, and you can probe around, you can probe the relationships.

[00:06:28] See what it's properties are, ember inspector is really useful for ember data. Especially if things look funky and you have to track things down. Go to tool. Alright, so let's move along and go to repo, so we can get rid of this. Or I'll leave it coming to that in case we need it.

[00:06:53] So the repo route and really we want.
>> Mike North: Get rid of this. Return this store query record. So this is, it's light query except I expect one to come back, not an array. We want repo and org id past as the query param there, and we're gonna need to go into our.

[00:07:33] We'll drill in here, we see an error because there is more work to do. So the adapter operation failed. Kind of cryptic. I do notice that this URL does not look right. So we can go back here, grab this sucker.
>> Mike North: Come on mouse, you can do it.

[00:08:02] And we'll go to our application adapter. And we need a new method. urlForQueryRecord (query, modelName)
>> Mike North: So this, now we're customizing what the url will be for a single repo.
>> Mike North: And just making sure we, okay we have to change this query. Work ID and we need a repo ID.

[00:08:49] So we'll go back to our route. Routes, repo. Past repod id params. Save it. Now our URL should look more reasonable. Drill in, hitting the debugger. We left a useful debugging statement behind. So, what's happening is the request type is now query record and we haven't kind of figured out a way to handle that.

[00:09:29] So this is a singular thing that has come back, the top level key totally still applies. In fact, we just need to make the singular version Case 'queryRecord'. Instead of pluralize, it is singularize. And so, that's now gonna be repo instead of repos. And then, it's basically the same function here.

[00:10:02] Except, we just do it directly on the payload.
>> Mike North: And break.
>> Mike North: All right, drill into a repo. Cool. So watchmen has come back, wait. Our template is still boring and hard coded.
>> Mike North: All right, ember-cli just like our URL, ember-resolver just like our URL, all right? So now we've got data coming back for real there, I'll prove it to you.

[00:11:01] Well, we should see yet one repo here, right?
>> Mike North: Now it's worth noting, so if we were on the previous page with the list of repos, we could supply the full already loaded, already fetched record to the link two helper and the model hook would not be called on the repo route.

[00:11:26] So basically we already have this data, we can pass the complete package along and no additional requests will need to be sent out. And this can be a significant load time improvement using the data you already have.