Clean up observable caching ids more, also collection() doesnt take i…

…dField

reactfire/auth/index.tsx

@@ -14,7 +14,7 @@ export function preloadUser(firebaseApp: firebase.app.App) {
   return preloadAuth(firebaseApp).then(auth => {
     const result = preloadObservable(
       user(auth() as firebase.auth.Auth),
-      `auth:preloadUser:${firebaseApp.name}`
+      `auth:user:${firebaseApp.name}`
     );
     return result.toPromise();
   });
@@ -32,11 +32,7 @@ export function useUser<T = unknown>(
 ): User | T {
   auth = auth || useAuth()();
   const currentUser = auth.currentUser || options?.startWithValue;
-  return useObservable(
-    user(auth),
-    `auth:${auth.app.name}:useUser:${JSON.stringify(options)}`,
-    currentUser
-  );
+  return useObservable(user(auth), `auth:user:${auth.app.name}`, currentUser);
 }
 
 export function useIdTokenResult(user: User, forceRefresh: boolean = false) {
@@ -48,7 +44,7 @@ export function useIdTokenResult(user: User, forceRefresh: boolean = false) {
 
   return useObservable<any>(
     idToken$,
-    `auth:getIdTokenResult:${user.uid}:forceRefresh=${forceRefresh}`
+    `auth:idTokenResult:${user.uid}:forceRefresh=${forceRefresh}`
   );
 }
 

reactfire/database/index.tsx

@@ -22,7 +22,7 @@ export function useDatabaseObject<T = unknown>(
 ): QueryChange | T {
   return useObservable(
     object(ref),
-    `RTDB Doc: ${ref.toString()}`,
+    `database:object:${ref.toString()}`,
     options ? options.startWithValue : undefined
   );
 }
@@ -54,9 +54,10 @@ export function useDatabaseObjectData<T>(
   ref: database.Reference,
   options?: ReactFireOptions<T>
 ): T {
+  const idField = checkIdField(options);
   return useObservable(
-    objectVal(ref, checkIdField(options)),
-    `RTDB DocData: ${ref.toString()}`,
+    objectVal(ref, idField),
+    `database:objectVal:${ref.toString()}:idField=${idField}`,
     checkStartWithValue(options)
   );
 }
@@ -78,7 +79,7 @@ export function useDatabaseList<T = { [key: string]: unknown }>(
   ref: database.Reference | database.Query,
   options?: ReactFireOptions<T[]>
 ): QueryChange[] | T[] {
-  const hash = `RTDB List: ${ref.toString()}|${(ref as _QueryWithId).queryIdentifier()}`;
+  const hash = `database:list:${ref.toString()}|${(ref as _QueryWithId).queryIdentifier()}`;
 
   return useObservable(
     list(ref),
@@ -91,9 +92,10 @@ export function useDatabaseListData<T = { [key: string]: unknown }>(
   ref: database.Reference | database.Query,
   options?: ReactFireOptions<T[]>
 ): T[] {
+  const idField = checkIdField(options);
   return useObservable(
-    listVal(ref, checkIdField(options)),
-    `RTDB ListData: ${ref.toString()}`,
+    listVal(ref, idField),
+    `database:listVal:${ref.toString()}|${(ref as _QueryWithId).queryIdentifier()}:idField=${idField}`,
     checkStartWithValue(options)
   );
 }

reactfire/firestore/index.tsx

@@ -28,7 +28,10 @@ export function preloadFirestoreDoc(
 ) {
   return preloadFirestore(firebaseApp).then(firestore => {
     const ref = refProvider(firestore() as firebase.firestore.Firestore);
-    return preloadObservable(doc(ref), ref.path);
+    return preloadObservable(
+      doc(ref),
+      `firestore:doc:${ref.firestore.app.name}:${ref.path}`
+    );
   });
 }
 
@@ -44,7 +47,7 @@ export function useFirestoreDoc<T = unknown>(
 ): T extends {} ? T : firestore.DocumentSnapshot {
   return useObservable(
     doc(ref),
-    `useFirestoreDoc:${ref.path}:${JSON.stringify(options)}`,
+    `firestore:doc:${ref.firestore.app.name}:${ref.path}`,
     options ? options.startWithValue : undefined
   );
 }
@@ -59,9 +62,10 @@ export function useFirestoreDocData<T = unknown>(
   ref: firestore.DocumentReference,
   options?: ReactFireOptions<T>
 ): T {
+  const idField = checkIdField(options);
   return useObservable(
-    docData(ref, checkIdField(options)),
-    `useFirestoreDocData:${ref.path}:${JSON.stringify(options)}`,
+    docData(ref, idField),
+    `firestore:docData:${ref.firestore.app.name}:${ref.path}:idField=${idField}`,
     checkStartWithValue(options)
   );
 }
@@ -76,12 +80,12 @@ export function useFirestoreCollection<T = { [key: string]: unknown }>(
   query: firestore.Query,
   options?: ReactFireOptions<T[]>
 ): T extends {} ? T[] : firestore.QuerySnapshot {
-  const queryId = `useFirestoreCollection:${getHashFromFirestoreQuery(
-    query
-  )}:${JSON.stringify(options)}`;
+  const queryId = `firestore:collection:${
+    query.firestore.app.name
+  }:${getHashFromFirestoreQuery(query)}`;
 
   return useObservable(
-    fromCollectionRef(query, checkIdField(options)),
+    fromCollectionRef(query),
     queryId,
     options ? options.startWithValue : undefined
   );
@@ -111,12 +115,13 @@ export function useFirestoreCollectionData<T = { [key: string]: unknown }>(
   query: firestore.Query,
   options?: ReactFireOptions<T[]>
 ): T[] {
-  const queryId = `useFirestoreCollectionData:${getHashFromFirestoreQuery(
-    query
-  )}:${JSON.stringify(options)}`;
+  const idField = checkIdField(options);
+  const queryId = `firestore:collectionData:${
+    query.firestore.app.name
+  }:${getHashFromFirestoreQuery(query)}:idField=${idField}`;
 
   return useObservable(
-    collectionData(query, checkIdField(options)),
+    collectionData(query, idField),
     queryId,
     checkStartWithValue(options)
   );

reactfire/remote-config/index.tsx

@@ -29,7 +29,7 @@ function typeSafeUse<T>(
 ): T {
   remoteConfig = remoteConfig || useRemoteConfig()();
   const $value = getter(remoteConfig, key);
-  return useObservable<T>($value, `remoteconfig:${key}`);
+  return useObservable<T>($value, `remoteConfig:${key}`);
 }
 
 /**

reactfire/storage/index.tsx

@@ -39,7 +39,7 @@ export function useStorageTask<T = unknown>(
 ): storage.UploadTaskSnapshot | T {
   return useObservable(
     _fromTask(task),
-    'storage upload: ' + ref.toString(),
+    `storage:task:${ref.toString()}`,
     options ? options.startWithValue : undefined
   );
 }
@@ -56,7 +56,7 @@ export function useStorageDownloadURL<T = string>(
 ): string | T {
   return useObservable(
     getDownloadURL(ref),
-    'storage download:' + ref.toString(),
+    `storage:downloadUrl:${ref.toString()}`,
     options ? options.startWithValue : undefined
   );
 }

reactfire/useObservable/index.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { Observable } from 'rxjs';
-import { SuspenseSubject } from './SuspenseSubject';
+import { SuspenseSubject } from './suspenseSubject';
 
 const DEFAULT_TIMEOUT = 30_000;
 const preloadedObservables = new Map<string, SuspenseSubject<unknown>>();
@@ -12,6 +12,7 @@ export function preloadObservable<T>(source: Observable<T>, id: string) {
   if (preloadedObservables.has(id)) {
     return preloadedObservables.get(id) as SuspenseSubject<T>;
   } else {
+    console.log(id);
     const observable = new SuspenseSubject(source, DEFAULT_TIMEOUT);
     preloadedObservables.set(id, observable);
     return observable;
@@ -21,7 +22,8 @@ export function preloadObservable<T>(source: Observable<T>, id: string) {
 export function useObservable<T>(
   source: Observable<T | any>,
   observableId: string,
-  startWithValue?: T | any
+  startWithValue?: T | any,
+  deps: React.DependencyList = [observableId]
 ): T {
   if (!observableId) {
     throw new Error('cannot call useObservable without an observableId');
@@ -41,6 +43,6 @@ export function useObservable<T>(
       }
     );
     return () => subscription.unsubscribe();
-  }, [observableId]);
+  }, deps);
   return latest;
 }