Using the readLocal attribute of a JSDO DataSource to prevent unnecessary XHR calls

I am trying to develop an Angular web application which will consume a back end OpenEdge ABL Data Service via a Progress Application Server for OpenEdge (PASOE) RESTful API. The JavaScript Data Object or JSDO (githubrogress/JSDO) will be used to manage/transport the data, and JSDO DataSource objects will be used client-side to read the data into Kendo UI data sources for display. These DataSource objects also implicitly call many of the JSDO's internal functions automatically. For the most part, everything is working very well.

Here is the basic process: start a Progress session by passing in a catalog URI, service URI, and authentication method. Then, create a JSDO instance, passing in the name of the desired resource (many endpoints can be described in a single catalog URI; the JSDO consumes this catalog to know the what/how of interacting with this Data Service). Then, create a JSDO DataSource object to perform any server-side filtering and read the data. The session is completed via a Promise, whereas the read() method of the JSDO DataSource returns an Observable. Subscribing to the returned Observable yields the desired data asynchronously.

The task is slightly complicated when accessing a multi-table resource, however. The most common reason for a multi-table resource is for master/detail table relationships. For example, Orders and OrderLines could be served in the same resource. This would require a DataSource instance for each table that needed to be referenced in the resource, however, as each DataSource interfaces with only one table. But, since the actual XHR request to the server by the JSDO always returns data for both tables, it would be redundant to make another call to the RESTful API for data that already exists client-side. Therefore, a readLocal attribute (true/false, defaults to false) was added to tell the DataSource to read the data locally in this context.

Here is the problem: the JSDO DataSource object still makes a second XHR request even when I specify readLocal: true when setting up the detail DataSource. While it is returning the correct data, it seems like poor practice to have multiple requests going out for data that already resides in the client's browser.

In an effort to isolate the problem, I have taken out the Kendo UI, as well as the Angular components and services from my code. I have all my application code running in app.component.ts and am using console logging to see if the data is being retrieved successfully. From there, it will be easy to integrate with a Kendo widget. As I mentioned before, the data is coming back fine, but I'm seeing a second XHR request getting made to the Data Service by monitoring with Developer Tools > Network Tab (both Firefox/Chrome).

Has anyone used readLocal successfully? I haven't been able to find any working examples that implement this feature. I can post my code if needed.

Thanks

Continue reading...