CODEWITHSUNDEEP
javascriptangularjspromisebreeze
AndrasCsanyi
AndrasCsanyi

Reputation: 4255

Wait until the data returns, synchronous call with angular and breeze

I'm working on a small blog engine where the user can create blog entry and possible to link tags to an entry. It is many-to-many relation, but due to that Breeze cannot yet manage this relation I have to expose the join table to breeze so that I can persist the data step-by-step. And my problem is here.

Tables:

Scenario:

Business logic:

I think the order must be consecutive.

I have this code and as you can see the attached screenshot the console logging marked by '_blogEntryEnttity' does not wait until the data returns from the server and it will be executed before the console logging marked by '_blogEntryEnttity inside'. The code will throw a reference exception when it tries to set up the title property a few line later.

var blogEntryEntityQueryPromise = datacontext.blogentry.getById(_blogsObject.id);

                    blogEntryEntityQueryPromise.then(function (result)
                    {
                        console.log('result', result);
                        _blogEntryEntity = result[0];
                        console.log('_blogEntryEnttity inside', _blogEntryEntity);
                        //if I need synchronous execution then I have to put the code here which must be executed consecutively
                    });
                    console.log('_blogEntryEnttity', _blogEntryEntity);
                }

                //mapping the values we got
                _blogEntryEntity.title = _blogsObject.title;
                _blogEntryEntity.leadWithMarkup = _blogsObject.leadWithMarkup;
                _blogEntryEntity.leadWithoutMarkup = _blogsObject.leadWithoutMarkup;
                _blogEntryEntity.bodyWithMarkup = _blogsObject.bodyWithMarkup;
                _blogEntryEntity.bodyWithoutMarkup = _blogsObject.bodyWithoutMarkup;
                console.log('_blogEntryEnttity', _blogEntryEntity);

The example comes from here.

My question is that, why it is not wait until the data comes back? What is the way of handling cases like this?

However, I figured out that, if I need synchronous execution then I should place the code into the success method following the data retrieving from the promise. However, I really don't like this solution because my code will be ugly after a while and hard to maintain.

The datacontext.blogentry.getById looks like below and the implementation is in an abstract class, you can find the code below too. The whole repository pattern comes from John Papa's course on Pluralsight.

Repository class method 

function getById(id)
        {

            return this._getById(this.entityName, id);
        }

Abstract repository class method. According to Breeze's documentation page the EntityQuery class' execute method returns a Promise. 

function _getById(resource, id) {

            var self = this;
            var manager = self.newManager;
            var Predicate = breeze.Predicate;
            var p1 = new Predicate('id', '==', id);

            return EntityQuery.from(resource)
                .where(p1)
                .using(manager).execute()
                .then(success).catch(_queryFailed);

            function success(data) {
                return data.results;
            }
        }

Execution order

I appreciate your help in advance!

Upvotes: 0

Views: 509

Answers (2)

Steve Schmitt
Steve Schmitt

Reputation: 3209

I don't think you need all these round trips. I'd do this:

  1. Query all available Tag entities, so they'll be in the EntityManager's cache (you need these to populate the UI anyway).

  2. If it's an existing BlogEntry, just query the BlogEntry and all its associated BlogEntryTag entities; Breeze will connect the BlogEntryTags to their associated Tags in the cache. You'll add/delete BlogEntryTags if the user selects/unselects Tags for the BlogEntry.

var query = EntityQuery.from("BlogEntries").where("id", "==", id).expand("BlogEntryTags");

  1. If it's a new BlogEntry, it won't have any BlogEntryTags. You'll create these when you save, after the user selects some tags.

  2. Save the added/updated BlogEntry and any added/deleted BlogEntryTag entities to the database in a single saveChanges call.

See the Presenting Many-to-Many doc and its associated plunker for a deeper dive. The UI is different from what you want, but the underlying concepts are useful.

Upvotes: 2

Bergi
Bergi

Reputation: 664630

why it is not wait until the data comes back?

Because promises don't magically synchronize execution. They're still asynchronous, they still rely on callbacks.

What is the way of handling cases like this?

You need to put the code that should wait in the then callback.

However, I really don't like this solution because my code will be ugly after a while and hard to maintain.

Not really, you can write concise and elegant asynchronous code with promises. If your code is becoming too much spaghetti, abstract parts of it in own functions. You should be able to get to a clean and flat promise chain.

Upvotes: 1

Related Questions