UI not updating when retrieving data via fetch

[mwilc0x]

I'm trying to use fetch to retrieve data, but the UI is not updating when I bind the data retrieved. Is there a way I can do this, or should I only be using the XHR module?

https://gist.github.com/mjw56/1c44e0aba514f1952235

[vicb]

see angular/zone.js#108

Could you give more info info on where fetch() is called ? inside a component ? in the bootstrap .then() ?

[vicb]

@mjw56 Could you please also try:

Zone.bindPromiseFn(fetch(...)).then(...);

and reports if helps ?

[mwilc0x]

@vicb I'm calling fetch from a Util API which I inject into Injectables. The full component code is here: https://gist.github.com/mjw56/1c44e0aba514f1952235

@Component({
    selector:'app',
    injectables: [API]
})

and the API looks just like this with trying to use Zones (I'm not sure that this is right):

import {NgZone} from 'angular2/src/core/zone/ng_zone';

declare var fetch;

export class API {

    getBooks() {

        NgZone.bindPromiseFn(fetch('http://localhost:8080/books')).then((r) => {
            return r;
        });

    }
}

I had to add Zones to angular.d.ts to get this working with TypeScript:

declare module "angular2/src/core/zone/ng_zone" {
   export var NgZone: {
       bindPromiseFn: Function
    };
}

but when I run it I get a new error:

TypeError: ng_zone_1.NgZone.bindPromiseFn is not a function

TypeError: ng_zone_1.NgZone.bindPromiseFn is not a function
    at API.getBooks (api.js:6)
    at new App (app.ng2.js:22)
    at execute.ReflectionCapabilities.factory (angular2.dev.js:7878)
    at ElementInjector.execute.ElementInjector._new (angular2.dev.js:24343)
    at ElementInjector.execute.ElementInjector._getDirectiveByKeyId (angular2.dev.js:24623)
    at ElementInjector.execute.ElementInjector.instantiateDirectives (angular2.dev.js:24209)
    at AppViewManagerUtils.execute.AppViewManagerUtils._hydrateView (angular2.dev.js:11609)
    at AppViewManagerUtils.execute.AppViewManagerUtils.attachAndHydrateInPlaceHostView (angular2.dev.js:11533)
    at AppViewManager.execute.AppViewManager.createInPlaceHostView (angular2.dev.js:23221)
    at angular2.dev.js:13826

I gotta run but will be back later to give this another try. Thanks!

[vicb]

Sorry I've seen the gist afterwards.

bindPromiseFn is a property of Zone which is defined globally (not of NgZone)

[mwilc0x]

Ah, my bad. I can definitely play around with this more later.

Does something like this look like the right approach?

declare var fetch, Zone;

export class API {

    getBooks() {        
        Zone.bindPromiseFn(fetch('http://localhost:8080/books')).then(r => r);
    }
}

but I get an error

TypeError: Zone.bindPromiseFn(...).then is not a function

[vicb]

Hum, my bad.

Could you please try:

    getBooks() {        
        Zone.bindPromiseFn(() => fetch('http://localhost:8080/books')).then(r => r);
    }

Edit: actually, you want to return the value:

    getBooks() {        
        return Zone.bindPromiseFn(() => fetch('http://localhost:8080/books'));
    }

[vicb]

Actually:

    getBooks() {             
        return Zone.bindPromiseFn(fetch)('http://localhost:8080/books');
    }

Should be the last version :)

[mwilc0x]

That works! w00t! Thank you @vicb! :)

[vicb]

What is your browser ?
(There seems to be no need to patch on Chrome 44)

[mwilc0x]

Oh yes, I am only testing this on Chrome Version 44.0.2398.0 dev (64-bit)

[vicb]

Thanks !

[jon-hall]

It seems that using (some?) Promise polyfills might prevent bindPromiseFn from fixing this issue. I was having the same issue with fetch and, after applying bindPromiseFn to my fetch call, I still had to remove the polyfill that the fetch authors recommend (https://github.com/jakearchibald/es6-promise) before I could get the UI to update when I got my data out the response.

Edit: Moving the polyfill script so it loads before angular also remedies the issue, so it just looks like the polyfill is overwriting something that it probably shouldn't.

[vicb]

@jon-hall There is no need to use any Promise polyfill with Angular because it comes with a Promise monkey patch (based on es6-promise) whether native Promises are available or not.

The next release of zone.js (which should happen later this week) will integrate the patching of the fecth API and there will be no need to manually bindPromiseFn then.

[vicb]

@mjw56 zone has been updated to 0.5.1 in master. The workaround is no more required starting from next alpha (.27)

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}