Accessing complex REST resources with Ext JS

Question

I am accessing a REST service which exposes these two resources, a parent resource and a child resource:

/users
/users/{userId}/account

So the resource "account" is not nested within the resource "user", it has to be accessed by a second request. There are examples for such REST APIs, e.g. here

I use these models to map users and their account to the Ext Js 4 data model:

User

Ext.define("MyApp.model.User", {
    extend: "Ext.data.Model",
    fields: [ { name: "id", type: "string" }],
    associations: [{
            model: "MyApp.model.Account",
            name: "account",
            type: "hasOne",
            reader: "json",
            getterName: "getAccount",
            setterName: "setAccount", 
            foreignKey: "accountId"
        }
    ],
    proxy: {
        type: "rest",
        url: "/rest/users",
        reader: {
            type: "json",
            totalProperty: "total",
            root: "users"
        }
    }
});

Account

Ext.define("MyApp.model.Account", {
    extend: "Ext.data.Model",
    fields: [ { name: "id", type: "string" }],
    belongsTo: "MyApp.model.User",
    proxy: {
        type: "rest",
        reader: { type: "json"}
    }
});

The account proxy does not have a url (I hoped this would be created based on the parent user model). When I call user.getAccount() I get an exception because the proxy is missing the url.

Question: Is there some way to setup the models such that Ext Js will access /users/{userId}/account WITHOUT updating the account proxy url manually with each parent userId?

Answer 1

You won't get what you want from stock Ext classes, you'll have to get a little bit dirty...

From what I understand you need the id of the user to load its account, not the id of the account record itself. So, I would configure the association to reflect that:

associations: [{
    model: "MyApp.model.Account",
    name: "account",
    type: "hasOne",
    reader: "json",
    getterName: "getAccount",
    setterName: "setAccount",
    // foreignKey: "accountId"
    foreignKey: 'id'
}],

The big advantage here being that the user id will be available to the proxy when it will be asked to build the url for the request.

Now, in order to build the url with the format you need, we must replace the proxy's buildUrl method. And, as you've already discovered, you do need an url to get to this method in the first place.

So, here's how I would configure the Account proxy:

proxy: {
    type: "rest",
    reader: {type: "json"},

    // Give it an URL to avoid the error
    url: '/rest/users/{}/account',

    // Replace the buildUrl method
    buildUrl: function(request) {
        var me        = this,
            operation = request.operation,
            records   = operation.records || [],
            record    = records[0],
            url       = me.getUrl(request),
            id        = record ? record.getId() : operation.id;

        // Here's the part honoring your URL format
        if (me.isValidId(id)) {
            url = url.replace('{}', id);
        } else {
            throw new Error('A valid id is required');
        }

        // That's enough, but we lose the cache buster param (see bellow)
        return url;

        // If we want the cache buster param (_dc=...) to be added,
        // we must call the superclass, which will read the url from
        // the request.
        request.url = url;
        return Ext.data.proxy.Rest.superclass.buildUrl.apply(this, arguments);
    }
}

At this point, we end up with the proxy firing request on urls of the form:

rest/users/45/account?id=45

That's only cosmetic but that id query parameter annoys me, so I would also replace the buildRequest method of the proxy with the following one:

buildRequest: function(operation, callback, scope) {
    var me = this,
        params = operation.params = Ext.apply({}, operation.params, me.extraParams),
        request;

    Ext.applyIf(params, me.getParams(operation));

    // if (operation.id !== undefined && params[me.idParam] === undefined) {
    //     params[me.idParam] = operation.id;
    // }

    request = new Ext.data.Request({
        params   : params,
        action   : operation.action,
        records  : operation.records,
        operation: operation,
        url      : operation.url,
        proxy: me
    });

    request.url = me.buildUrl(request);

    operation.request = request;

    return request;
}

And, here you are... While it would work, I don't really recommend overriding methods this way, in the proxy's config. In real life, you should extend your own proxy class from the Rest one, especially if you need to configure many such proxies... But I hope I gave you all the ingredients you need to get started!