Demo 1: JSONAPIAdapter with JSONAPISerializer

app/adapters/application.js

@@ -0,0 +1,7 @@
+import DS from 'ember-data';
+
+const { JSONAPIAdapter } = DS;
+
+export default JSONAPIAdapter.extend({
+
+});

app/models/post.js

@@ -0,0 +1,8 @@
+import DS from 'ember-data';
+
+const { Model, attr, hasMany } = DS;
+
+export default Model.extend({
+  title: attr('string'),
+  tags: hasMany('tag', { async: false })
+});

app/models/tag.js

@@ -0,0 +1,7 @@
+import DS from 'ember-data';
+
+const { Model, attr } = DS;
+
+export default Model.extend({
+  name: attr('string')
+});

app/routes/application.js

@@ -0,0 +1,7 @@
+import Route from '@ember/routing/route';
+
+export default Route.extend({
+  model() {
+    return this.store.findAll('post');
+  }
+});

app/serializers/post.js

@@ -0,0 +1,38 @@
+import DS from 'ember-data';
+
+const { JSONAPISerializer } = DS;
+
+export default JSONAPISerializer.extend({
+  normalizeFindAllResponse(store, primaryModelClass, payload, id, requestType) {
+    payload.data.forEach((resource) => {
+      resource.relationships = {
+        tags: {
+          data: resource.attributes.tags.map((tag) => {
+            return {
+              id: tag.id,
+              type: 'tags'
+            };
+          })
+        }
+      };
+    });
+
+    payload.included = payload.data
+      .map((resource) => {
+        return resource.attributes.tags;
+      })
+      .flat()
+      .map((tag) => {
+        let resource = {
+          id: tag.id,
+          type: 'tags'
+        };
+
+        delete tag.id;
+        resource.attributes = tag;
+        return resource;
+      });
+
+    return this._super(...arguments);
+  }
+});

app/templates/application.hbs

@@ -1,5 +1,14 @@
-{{!-- The following component displays Ember's default welcome message. --}}
-<WelcomePage />
-{{!-- Feel free to remove this! --}}
-
-{{outlet}}
+<ul>
+  {{#each model as |post|}}
+    <li>
+      {{post.title}}
+      <ul>
+        {{#each post.tags as |tag|}}
+          <li>
+            {{tag.name}}
+          </li>
+        {{/each}}
+      </ul>
+    </li>
+  {{/each}}
+</ul>

mirage/config.js

@@ -0,0 +1,46 @@
+import { Response } from 'ember-cli-mirage';
+
+export default function() {
+  this.get('/posts', () => {
+    return new Response(200, {}, {
+      data: [
+        {
+          id: '1',
+          type: 'post',
+          attributes: {
+            title: 'Post A',
+            body: '...',
+            tags: [
+              {
+                id: '1',
+                'name': 'JavaScript'
+              },
+              {
+                id: '2',
+                name: 'Node.js'
+              }
+            ]
+          }
+        },
+        {
+          id: '2',
+          type: 'post',
+          attributes: {
+            title: 'Post B',
+            body: '...',
+            tags: [
+              {
+                id: '1',
+                'name': 'JavaScript'
+              },
+              {
+                id: '3',
+                name: 'Ember.js'
+              }
+            ]
+          }
+        }
+      ]
+    });
+  });
+}

mirage/scenarios/default.js

@@ -0,0 +1,9 @@
+export default function(/* server */) {
+
+  /*
+    Seed your development database using your factories.
+    This data will not be loaded in your tests.
+  */
+
+  // server.createList('post', 10);
+}