custom-ember-data-the-easy-way
Differences
This shows you the differences between two versions of the page.
| Both sides previous revision Previous revision Next revision | Previous revision | ||
|
custom-ember-data-the-easy-way [2022/08/24 02:36] sausage Refactor once primaryKey is in place. |
custom-ember-data-the-easy-way [2022/10/26 04:52] (current) sausage Minor fix for find record serializer |
||
|---|---|---|---|
| Line 16: | Line 16: | ||
| A couple of extra points before we get going. We're going to start with dummy data just to get something on the screen. While it's usual to give some sort of API to use, at times it's simpler to experiment offline and see a result with some basic JSON. | A couple of extra points before we get going. We're going to start with dummy data just to get something on the screen. While it's usual to give some sort of API to use, at times it's simpler to experiment offline and see a result with some basic JSON. | ||
| - | The second point is that Mirage is sometimes recommended to start out mocking for Ember Data. But then, if you knew what Mirage was or had experience with it, you wouldn't be reading this article. So let's skip both of those things for now. | + | The second point is that Mirage is sometimes recommended to start out mocking for Ember Data. But then, if knew what Mirage was or had experience with it, you wouldn't be reading this article. So let's skip both of those things for now. |
| As we go, we'll improve each step until we're got something more like a real application. | As we go, we'll improve each step until we're got something more like a real application. | ||
| Line 76: | Line 76: | ||
| </code> | </code> | ||
| - | {{ :ember:ember-data-template-output-raw.png?nolink |}} | ||
| ===== Using Inline JSON ===== | ===== Using Inline JSON ===== | ||
| Line 157: | Line 156: | ||
| model (){ | model (){ | ||
| - | const promise = fetch('game.json'); | + | let promise = fetch('game.json'); |
| - | return promise.then((response) => { | + | return promise.then(function(response){ |
| return response.json(); | return response.json(); | ||
| }); | }); | ||
| Line 174: | Line 173: | ||
| async model (){ | async model (){ | ||
| - | const response = await fetch('game.json'); | + | let response = await fetch('game.json'); |
| - | const data = await response.json(); | + | let data = await response.json(); |
| return data; | return data; | ||
| Line 186: | Line 185: | ||
| But either way, the data should be loading into the page from the file using fetch. Nice one. | But either way, the data should be loading into the page from the file using fetch. Nice one. | ||
| - | To show it working in non-es6 javascript you can have: | + | For the sake of showing that this step can be difficult to get your resolved Promises right, here is some code that does not work for returning the data from a model hook: |
| - | + | ||
| - | <code javascript> | + | |
| - | import Route from '@ember/routing/route'; | + | |
| - | + | ||
| - | export default class ApplicationRoute extends Route { | + | |
| - | + | ||
| - | model (){ | + | |
| - | var promise = fetch('game.json'); | + | |
| - | return promise.then(function(response){ | + | |
| - | return response.json(); | + | |
| - | }); | + | |
| - | } | + | |
| - | } | + | |
| - | </code> | + | |
| - | + | ||
| - | And that is fine too. | + | |
| - | + | ||
| - | For the sake of showing that this step can be difficult to get your resolved Promises right, here is some regular code that does not work for returning the data from a model hook: | + | |
| <code javascript> | <code javascript> | ||
| model (){ | model (){ | ||
| - | const promise = fetch('game.json'); | + | let promise = fetch('game.json'); |
| - | promise.then((response) => { | + | promise.then(function(response){ |
| return response.json() | return response.json() | ||
| - | .then((game) => { | + | .then(function(game){ |
| return game; | return game; | ||
| }); | }); | ||
| Line 308: | Line 289: | ||
| export default class GameAdapter extends RESTAdapter { | export default class GameAdapter extends RESTAdapter { | ||
| host = 'https://retrogames.waynejohnson.net'; | host = 'https://retrogames.waynejohnson.net'; | ||
| - | namespace = 'api' | + | namespace = "api" |
| } | } | ||
| </code> | </code> | ||
| Line 339: | Line 320: | ||
| } | } | ||
| </code> | </code> | ||
| - | |||
| - | And note above, the call using ''game'' in ''findRecord'' will be using the ''game'' Adapter by convention. | ||
| There's some good news and bad news. If you check the Network tab, you'll notice there was a successful call to our API to retrieve back a record: | There's some good news and bad news. If you check the Network tab, you'll notice there was a successful call to our API to retrieve back a record: | ||
| Line 554: | Line 533: | ||
| normalizeFindRecordResponse(store, type, payload, id) { | normalizeFindRecordResponse(store, type, payload, id) { | ||
| const alteredPayload = { | const alteredPayload = { | ||
| - | game: { payload } | + | game: { |
| + | gameId: payload.gameId, // <- Set prop to gameId again. primaryKey will sort this out for us! | ||
| + | title: payload.title, | ||
| + | year: payload.year | ||
| + | } | ||
| } | } | ||
| return super.normalizeFindRecordResponse(store, type, alteredPayload, id); | return super.normalizeFindRecordResponse(store, type, alteredPayload, id); | ||
| Line 570: | Line 553: | ||
| </code> | </code> | ||
| - | |||
| - | Both functions are refactored with the introduction of the ''primaryKey'' property. Very handy! | ||
| The errors and warnings are gone, and so therefore all that is left is to update our ''application.hbs'' template to ensure each record is rendered: | The errors and warnings are gone, and so therefore all that is left is to update our ''application.hbs'' template to ensure each record is rendered: | ||
| Line 590: | Line 571: | ||
| ===== Thanks ===== | ===== Thanks ===== | ||
| - | TODO | + | Thank you to Latha.K & Andrew.W for proofing and tips, and Julien.P for wallowing with me with every possible permutation of Promises. |
| ===== Further reading, tips, thoughts ===== | ===== Further reading, tips, thoughts ===== | ||
custom-ember-data-the-easy-way.1661308560.txt.gz · Last modified: 2022/08/24 02:36 by sausage
Page Tools
