feat: introduce rtdb server-client caching

Author: patrickmichalina

src/core/angularfire2.ts

@@ -17,6 +17,8 @@ export const FirebaseAppConfig = new InjectionToken<FirebaseOptions>('angularfir
 // Put in database.ts when we drop database-depreciated
 export const RealtimeDatabaseURL = new InjectionToken<string>('angularfire2.realtimeDatabaseURL');
 
+export const UniversalDatabaseTransferStateKeyPrefix = new InjectionToken<string>('angularfire2.dbTransferStateKey');
+
 export class FirebaseZoneScheduler {
   constructor(public zone: NgZone) {}
   schedule(...args: any[]): Subscription {

src/core/firebase.app.module.ts

@@ -1,6 +1,6 @@
 import { InjectionToken, NgZone, NgModule } from '@angular/core';
 
-import { FirebaseAppConfig, FirebaseAppName } from './angularfire2';
+import { FirebaseAppConfig, FirebaseAppName, UniversalDatabaseTransferStateKeyPrefix } from './angularfire2';
 
 import firebase from '@firebase/app';
 import { FirebaseApp as _FirebaseApp, FirebaseOptions } from '@firebase/app-types';
@@ -42,7 +42,8 @@ export class AngularFireModule {
             ngModule: AngularFireModule,
             providers: [
                 { provide: FirebaseAppConfig, useValue: config },
-                { provide: FirebaseAppName, useValue: appName }
+                { provide: FirebaseAppName, useValue: appName },
+                { provide: UniversalDatabaseTransferStateKeyPrefix, useValue: 'RTDB' }
             ]
         }
     }

src/database/database-server.module.ts

@@ -0,0 +1,8 @@
+import { NgModule } from '@angular/core';
+import { AngularFireDatabase } from './database';
+import '@firebase/database';
+
+@NgModule({
+  providers: [ AngularFireDatabase ]
+})
+export class AngularFireDatabaseServerModule { }

src/database/database.module.ts

@@ -1,8 +1,9 @@
 import { NgModule } from '@angular/core';
 import { AngularFireDatabase } from './database';
+import { TransferState } from '@angular/platform-browser';
 import '@firebase/database';
 
 @NgModule({
-  providers: [ AngularFireDatabase ]
+  providers: [ AngularFireDatabase, TransferState ]
 })
 export class AngularFireDatabaseModule { }

src/database/database.spec.ts

@@ -2,7 +2,8 @@ import { FirebaseApp, FirebaseAppConfig, AngularFireModule, FirebaseAppName } fr
 import { AngularFireDatabase, AngularFireDatabaseModule, RealtimeDatabaseURL } from 'angularfire2/database';
 import { TestBed, inject } from '@angular/core/testing';
 import { COMMON_CONFIG } from './test-config';
-import { NgZone } from '@angular/core';
+import { NgZone, ApplicationRef } from '@angular/core';
+import { TransferState } from '@angular/platform-browser';
 
 // generate random string to test fidelity of naming
 const FIREBASE_APP_NAME = (Math.random() + 1).toString(36).substring(7);
@@ -11,6 +12,8 @@ describe('AngularFireDatabase', () => {
   let app: FirebaseApp;
   let db: AngularFireDatabase;
   let zone: NgZone
+  let ts: TransferState
+  let appRef: ApplicationRef
 
   beforeEach(() => {
     TestBed.configureTestingModule({
@@ -19,10 +22,13 @@ describe('AngularFireDatabase', () => {
         AngularFireDatabaseModule
       ]
     });
-    inject([FirebaseApp, AngularFireDatabase, NgZone], (app_: FirebaseApp, _db: AngularFireDatabase, _zone: NgZone) => {
+    inject([FirebaseApp, AngularFireDatabase, NgZone, TransferState, ApplicationRef], 
+      (app_: FirebaseApp, _db: AngularFireDatabase, _zone: NgZone, _ts: TransferState, _appRef: ApplicationRef) => {
       app = app_;
       db = _db;
       zone = _zone;
+      ts = _ts;
+      appRef = _appRef
     })();
   });
 
@@ -42,7 +48,7 @@ describe('AngularFireDatabase', () => {
     });
 
     it('should accept a Firebase App in the constructor', () => {
-      const __db = new AngularFireDatabase(app.options, app.name, null!, zone);
+      const __db = new AngularFireDatabase(app.options, app.name, null!, 'RTDB', ts, appRef, zone);
       expect(__db instanceof AngularFireDatabase).toEqual(true);
     });
 

src/database/database.ts

@@ -1,33 +1,41 @@
-import { Injectable, Inject, Optional, NgZone } from '@angular/core';
+import { Injectable, Inject, Optional, NgZone, ApplicationRef } from '@angular/core';
 import { FirebaseDatabase } from '@firebase/database-types';
 import { PathReference, DatabaseQuery, DatabaseReference, DatabaseSnapshot, ChildEvent, ListenEvent, QueryFn, AngularFireList, AngularFireObject } from './interfaces';
 import { getRef } from './utils';
 import { InjectionToken } from '@angular/core';
 import { FirebaseOptions } from '@firebase/app-types';
 import { createListReference } from './list/create-reference';
 import { createObjectReference } from './object/create-reference';
-import { FirebaseAppConfig, FirebaseAppName, RealtimeDatabaseURL, _firebaseAppFactory, FirebaseZoneScheduler } from 'angularfire2';
+import { FirebaseAppConfig, FirebaseAppName, RealtimeDatabaseURL, UniversalDatabaseTransferStateKeyPrefix, _firebaseAppFactory, FirebaseZoneScheduler } from 'angularfire2';
+import { makeStateKey, TransferState } from '@angular/platform-browser';
+import 'rxjs/add/operator/take';
 
 @Injectable()
 export class AngularFireDatabase {
   public readonly database: FirebaseDatabase;
   public readonly scheduler: FirebaseZoneScheduler;
+  private readFromCache = true;
 
   constructor(
     @Inject(FirebaseAppConfig) config:FirebaseOptions,
     @Optional() @Inject(FirebaseAppName) name:string,
     @Optional() @Inject(RealtimeDatabaseURL) databaseURL:string,
+    @Inject(UniversalDatabaseTransferStateKeyPrefix) private cacheKeyPrefix:string,
+    private ts: TransferState,
+    appRef: ApplicationRef,
     zone: NgZone
   ) {
     this.scheduler = new FirebaseZoneScheduler(zone);
     this.database = zone.runOutsideAngular(() => {
       const app = _firebaseAppFactory(config, name);
       return app.database(databaseURL || undefined);
     });
+    appRef.isStable.filter(Boolean).take(1).subscribe(() => this.readFromCache = false)
   }
 
   list<T>(pathOrRef: PathReference, queryFn?: QueryFn): AngularFireList<T> {
     const ref = getRef(this.database, pathOrRef);
+    const ssrCached = this.readFromCache && this.getValueFromServerRequest<T>(pathOrRef.toString()) || undefined
     let query: DatabaseQuery = ref;
     if(queryFn) {
       query = queryFn(ref);
@@ -37,13 +45,21 @@ export class AngularFireDatabase {
 
   object<T>(pathOrRef: PathReference): AngularFireObject<T>  {
     const ref = getRef(this.database, pathOrRef);
-    return createObjectReference<T>(ref, this);
+    const ssrCached = this.readFromCache && this.getValueFromServerRequest<T>(pathOrRef.toString()) || undefined
+    return createObjectReference<T>(ref, this, ssrCached);
   }
 
   createPushId() {
     return this.database.ref().push().key;
   }
 
+  private getValueFromServerRequest<T>(path: string) {
+    return this.ts.get<T | undefined>(this.getTsCacheKey(path), undefined);
+  }
+
+  private getTsCacheKey(path: string) {
+    return makeStateKey<string>(`${this.cacheKeyPrefix}.${path}`);
+  }
 }
 
 export {

src/database/list/create-reference.ts

@@ -6,7 +6,7 @@ import { createDataOperationMethod } from './data-operation';
 import { createRemoveMethod } from './remove';
 import { AngularFireDatabase } from '../database';
 
-export function createListReference<T>(query: DatabaseQuery, afDatabase: AngularFireDatabase): AngularFireList<T> {
+export function createListReference<T>(query: DatabaseQuery, afDatabase: AngularFireDatabase, ssrCached?: T[]): AngularFireList<T> {
   return {
     query,
     update: createDataOperationMethod<Partial<T>>(query.ref, 'update'),

src/database/object/create-reference.ts

@@ -1,8 +1,9 @@
 import { DatabaseQuery, AngularFireObject } from '../interfaces';
 import { createObjectSnapshotChanges } from './snapshot-changes';
 import { AngularFireDatabase } from '../database';
+import 'rxjs/add/operator/startWith';
 
-export function createObjectReference<T>(query: DatabaseQuery, afDatabase: AngularFireDatabase): AngularFireObject<T> {
+export function createObjectReference<T>(query: DatabaseQuery, afDatabase: AngularFireDatabase, ssrCached?: T): AngularFireObject<T> {
   return {
     query,
     snapshotChanges<T>() {
@@ -12,10 +13,14 @@ export function createObjectReference<T>(query: DatabaseQuery, afDatabase: Angul
     update(data: Partial<T>) { return query.ref.update(data as any) as Promise<void>; },
     set(data: T) { return query.ref.set(data) as Promise<void>; },
     remove() { return query.ref.remove() as Promise<void>; },
-    valueChanges<T>() { 
+    valueChanges<T>() {
       const snapshotChanges$ = createObjectSnapshotChanges(query)();
-      return afDatabase.scheduler.keepUnstableUntilFirst(snapshotChanges$)
+      const baseObs = afDatabase.scheduler.keepUnstableUntilFirst(snapshotChanges$)
         .map(action => action.payload.exists() ? action.payload.val() as T : null)
+
+      return ssrCached
+        ? baseObs.startWith(ssrCached as any) // typescript issue?
+        : baseObs
     },
   }
 }

src/database/public_api.ts

@@ -6,3 +6,4 @@ export * from './list/state-changes';
 export * from './list/audit-trail';
 export * from './observable/fromRef';
 export * from './database.module'
+export * from './database-server.module'