Realtime Updates not working

[maximilianmeier]

Is the RealtimeRouteMixin working in RC6? I added the Firestore config and a basic layout. I get all data by this.store.findAll('article'). The current state is loaded and displayed correctly. But when I change something in the Firebase console the data is not updated in the Ember client. with version 2.x and the RTDB this was working.

Is this intended or a bug?

Version info

DEBUG: -------------------------------
DEBUG: Ember      : 3.17.0
DEBUG: Ember Data : 3.17.0
DEBUG: EmberFire  : 3.0.0-rc.6
DEBUG: Firebase   : 7.11.0
DEBUG: -------------------------------

Test case

https://github.com/maximilianmeier/emberfire-dev/tree/fd79dce49ed3d610201e6c5b338b60931a6e2f65

Steps to reproduce

1. Check out the commit.
2. Add your firebase config
3. Add data based on Ember Data models
4. Data should load
5. Update your data in the Firebase console
6. The changes are not shown in the Ember app without reloading

Expected behavior

The Data should update without a manual reload.

Actual behavior

The Data does currently not update without a manual reload.

[maxymczech]

I second this, I am in a process of migrating a project from emberfire 2 to 3. I have migrated hasMany relationships and rewrote authentication code, the app displays data fine. But realtime updates seem broken...

[Mitchal]

It seems that it comes down to the class names of the adapter and the serializer. I changed from

// adapters/application
import FirestoreAdapter from 'emberfire/adapters/firestore';

export default class ApplicationAdapter extends FirestoreAdapter {
   // ...
}

to

// adapters/application
import FirestoreAdapterBase from 'emberfire/adapters/firestore';

export default class FirestoreAdapter extends FirestoreAdapterBase {
   // ...
}

And I added this serializer, because there was a crash otherwise when creating records:

// serializers/application
import FirestoreSerializerBase from 'emberfire/serializers/firestore';

export default class FirestoreSerializer extends FirestoreSerializerBase {

  normalizeCreateRecordResponse(store, primaryModelClass) {
    let result = super.normalizeCreateRecordResponse(...arguments)
    result.data.type = primaryModelClass.modelName
    return result
  }
}

The class name FirestoreSerializer is important here as well, because it seems to be used within the realtime-listener service.

With these changes, everything seems to work as expected. Does it help at all?

[maximilianmeier]

@Mitchal yes you are right. the realtime listener just reacts to the FirestoreSerializer constructor name. Really good catch thank you 👍 https://github.com/firebase/emberfire/blob/3f23274ed72a2d890894cbd87fdcae2f42ee4905/addon/services/realtime-listener.ts#L137

[Mitchal]

So it seems the realtime updates stop working when building the Ember app for production. I guess it might be because the constructor name is then uglified and this code will stop working again. Not really sure how to solve it though, does anyone have any ideas?

EDIT: FOUND IT! :-D
Passing the precious constructor names to uglify to keep them intact, in your ember-cli-build.js like this:

let app = new EmberApp(defaults, {
    'ember-cli-uglify': {
      uglify: {
        mangle: {
          reserved: ['FirestoreSerializer', 'FirestoreAdapter']
        }
      }
    },
  });

Hopefully no more hacks will be required. 🤔

[dirkdirk]

@Mitchal ... Can you post the solution for Realtime Database, please?

[Mitchal]

@Mitchal ... Can you post the solution for Realtime Database, please?

Unfortunately not, I haven't been working with the realtime DB for years and really I don't know much about this lib either (other than that it is AWESOME when it works). I was just lucky to figure out that one very particular problem. 🤷‍♂️

Maybe the repo maintainers can help you. I hope you manage to solve it, cause I know how frustrating these problems can be!

[maximilianmeier]

@dirkdirk I haven't tried it myself, but the names that @Mitchal provided are the actual javascript class names so my suggestion would be

let app = new EmberApp(defaults, {
    'ember-cli-uglify': {
      uglify: {
        mangle: {
          reserved: ['RealtimeDatabaseSerializer', 'RealtimeDatabaseAdapter']
        }
      }
    },
  });

[dirkdirk]

FINALLY got it to work with the following ... and many thanks to you guys!

So the following is to make Realtime Database realtime updates work with (in my case):

Ember: 3.24.3
Ember Data: 3.24.2
Ember Simple Auth: 3.1.0
EmberFire: 3.0.0-rc.6
Firebase: 7.20.0

// adapters/application.js
import RealtimeDatabaseAdapterBase from "emberfire/adapters/realtime-database"
export default class RealtimeDatabaseAdapter extends RealtimeDatabaseAdapterBase {
}

// ember-cli-build.js
  let app = new EmberApp(defaults, {
    "ember-cli-terser": {
        uglify: {
            mangle: {
                reserved: ["RealtimeDatabaseSerializer", "RealtimeDatabaseAdapter"]
            }
        }
    },