Async Model Relationships Unfulfilled

1

Description
The exercise I’m working on displays content received from a backend CMS. Requested content to be rendered can be supplied as a whole page(multiple modules) or just a single module. The current setup has a service imported into component & this service directly requests the data from the backend CMS, then renders it in the components hbs. I’d like to move to using Ember Data to handle this state data. In this new setup the service makes the request to the store and it uses the adapter/ serializer pattern. As of now I can get model data to populate correctly aside from the ‘hasMany’ and ‘belongTo’ relationships. When inspecting using the Ember Inspector it always displays the promise instead of the relationship values. This includes selecting the computed property to display the value.

Any help is appreciated. New to Ember data and I’ve kinda hit a wall on this one!

Example
Example1000×302 104 KB

The current setup consists of…

  • Component & HBS file
  • Service (imported into the component)
  • Page & Module model
  • Page & Module adapter
  • Page & Module serializers


Service Request & Models
When the template is used the service is initialized and makes a request to the store.
let csPage = this.store.queryRecord("csPage", { page });

The current models are setup as such…

Page Model

import Model, { attr, hasMany } from '@ember-data/model';

export default class CsPageModel extends Model {
    @attr title;
    @attr inProgress;
    @attr tags;
    @attr locale;
    @hasMany('cs-page/cs-module', { async: true }) csModule;
}

Module Model

import Model, { attr, belongsTo } from '@ember-data/model';

export default class CsModuleModel extends Model {
    // @attr uid;
    @attr locale;
    @attr type;
    @attr title;
    @attr tags;
    @attr module_type;
    @attr marketing;
    @belongsTo('cs-page') csPage;
}


Adapters
From breakpoints /console logging that adapters are triggered and request the page data from the backend.

Page Adapter

import ApplicationAdapter from './application';

export default class CsPageAdapter extends ApplicationAdapter {
    async queryRecord (store, type, query) {
        const api_key = 'apiKeyValue';
        const access_token = 'tokenKeyValue';
        const csType = 'page';
        const url = `pageUrlAndQueryParams`;

        let res = await this.ajax(url, 'GET', {
            headers: {
                api_key,
                access_token
            },
            data: {
                entry_uid: query.page
            }
        });
        return res;
    }
}

Module Adapter

async queryRecord (store, type, query) {
    const api_key = 'apiKeyValue';
    const access_token = 'tokenKeyValue';
    const csType = 'marketing';
    const url = `moduleUrlAndQueryParams`;

    let res = await this.ajax(url, 'GET', {
        headers: {
            api_key,
            access_token
        },
        data: {
            entry_uid: query.uid
        }
    });
    return res;
}


Serializers
The page serializer takes the page response and request the individual modules that make the page. For the moment in the module serializer I’ve hardcoded the uid value for the page that was requested.

Page Serializer

import JSONSerializer from '@ember-data/serializer/json';

export default class CsPageSerializer extends JSONSerializer {
    normalizeResponse (store, modelClass, payload) {
        // Query Module records
        let modules = payload.entry.modules.forEach(elm => {
            let uid = elm.module.module[0].uid;
            this.store.queryRecord("csPage/csModule", { uid });
        });

        return {
            data: {
                id: payload.entry.uid,
                type: 'cs-page',
                attributes: {
                    id: payload.entry.uid,
                    title: payload.entry.title,
                    inProgress: payload.entry._in_progress,
                    tags: payload.entry.tags,
                    locale: payload.entry.locale,
                    csModule: modules
                }
            }
        };
    }
}


Module Serializer

import JSONSerializer from '@ember-data/serializer/json';

export default class CsPageSerializer extends JSONSerializer {
    normalizeResponse (store, modelClass, payload) {

        return {
            data: {
                id: payload.entry.uid,
                type: 'cs-page/cs-module',
                attributes: {
                    locale: payload.entry.locale,
                    type: payload.entry.type,
                    title: payload.entry.title,
                    tags: payload.entry.tags,
                    module_type: payload.entry.module_type,
                    marketing: payload.entry.marketing
                }
            },
            included: {
                type: 'cs-page',
                id: 'blt31480f2af48bcb75'
            }
        };
    }
}