Merge pull request #270 from mauriceackel/feature/initial-value

Feature/initial value

firestore/README.md

@@ -128,6 +128,7 @@ The `useCollectionData` hook takes the following parameters:
 - `options`: (optional) `Object` with the following parameters:
   - `snapshotListenOptions`: (optional) `firestore.SnapshotListenOptions` to customise how the collection is loaded
   - `snapshotOptions`: (optional) `firestore.SnapshotOptions` to customise how data is retrieved from snapshots
+  - `initialValue`: (optional) the initial value returned by the hook, until data from the firestore query has loaded
 
 Returns:
 
@@ -154,6 +155,7 @@ The `useCollectionDataOnce` hook takes the following parameters:
   - `getOptions`: (optional) `Object` to customise how the collection is loaded
     - `source`: (optional): `'default' | 'server' | 'cache'` Describes whether we should get from server or cache.
   - `snapshotOptions`: (optional) `firestore.SnapshotOptions` to customise how data is retrieved from snapshots
+  - `initialValue`: (optional) the initial value returned by the hook, until data from the firestore query has loaded
 
 Returns:
 
@@ -247,6 +249,7 @@ The `useDocumentData` hook takes the following parameters:
 - `options`: (optional) `Object` with the following parameters:
   - `snapshotListenOptions`: (optional) `firestore.SnapshotListenOptions` to customise how the collection is loaded
   - `snapshotOptions`: (optional) `firestore.SnapshotOptions` to customise how data is retrieved from snapshots
+  - `initialValue`: (optional) the initial value returned by the hook, until data from the firestore query has loaded
 
 Returns:
 
@@ -273,6 +276,7 @@ The `useDocumentDataOnce` hook takes the following parameters:
   - `getOptions`: (optional) `Object` to customise how the collection is loaded
     - `source`: (optional): `'default' | 'server' | 'cache'` Describes whether we should get from server or cache
   - `snapshotOptions`: (optional) `firestore.SnapshotOptions` to customise how data is retrieved from snapshots
+  - `initialValue`: (optional) the initial value returned by the hook, until data from the firestore query has loaded
 
 Returns:
 

firestore/types.ts

@@ -14,6 +14,9 @@ export type IDOptions<T> = {
 export type Options = {
   snapshotListenOptions?: SnapshotListenOptions;
 };
+export type InitialValueOptions<T> = {
+  initialValue?: T;
+};
 export type DataOptions<T> = Options & IDOptions<T>;
 export type OnceOptions = {
   getOptions?: GetOptions;

firestore/useCollection.ts

@@ -19,6 +19,7 @@ import {
   CollectionOnceHook,
   DataOptions,
   GetOptions,
+  InitialValueOptions,
   OnceDataOptions,
   OnceOptions,
   Options,
@@ -113,25 +114,39 @@ export const useCollectionOnce = <T = DocumentData>(
 
 export const useCollectionData = <T = DocumentData>(
   query?: Query<T> | null,
-  options?: DataOptions<T>
+  options?: DataOptions<T> & InitialValueOptions<T[]>
 ): CollectionDataHook<T> => {
   const snapshotOptions = options?.snapshotOptions;
   const [snapshots, loading, error] = useCollection<T>(query, options);
-  const values = getValuesFromSnapshots<T>(snapshots, snapshotOptions);
+
+  const initialValue = options?.initialValue;
+  const values = getValuesFromSnapshots<T>(
+    snapshots,
+    snapshotOptions,
+    initialValue
+  );
+
   const resArray: CollectionDataHook<T> = [values, loading, error, snapshots];
   return useMemo(() => resArray, resArray);
 };
 
 export const useCollectionDataOnce = <T = DocumentData>(
   query?: Query<T> | null,
-  options?: OnceDataOptions<T>
+  options?: OnceDataOptions<T> & InitialValueOptions<T[]>
 ): CollectionDataOnceHook<T> => {
   const snapshotOptions = options?.snapshotOptions;
   const [snapshots, loading, error, loadData] = useCollectionOnce<T>(
     query,
     options
   );
-  const values = getValuesFromSnapshots<T>(snapshots, snapshotOptions);
+
+  const initialValue = options?.initialValue;
+  const values = getValuesFromSnapshots<T>(
+    snapshots,
+    snapshotOptions,
+    initialValue
+  );
+
   const resArray: CollectionDataOnceHook<T> = [
     values,
     loading,
@@ -143,13 +158,17 @@ export const useCollectionDataOnce = <T = DocumentData>(
 };
 
 const getValuesFromSnapshots = <T>(
-  snapshots?: QuerySnapshot<T>,
-  options?: SnapshotOptions
-) => {
-  return useMemo(() => snapshots?.docs.map((doc) => doc.data(options)) as T[], [
-    snapshots,
-    options,
-  ]);
+  snapshots: QuerySnapshot<T> | undefined,
+  options?: SnapshotOptions,
+  initialValue?: T[]
+): T[] | undefined => {
+  return useMemo(
+    () =>
+      (snapshots?.docs.map((doc) => doc.data(options)) ?? initialValue) as
+        | T[]
+        | undefined,
+    [snapshots, options]
+  );
 };
 
 const getDocsFnFromGetOptions = (

firestore/useDocument.ts

@@ -18,6 +18,7 @@ import {
   DocumentHook,
   DocumentOnceHook,
   GetOptions,
+  InitialValueOptions,
   OnceDataOptions,
   OnceOptions,
   Options,
@@ -117,32 +118,36 @@ export const useDocumentOnce = <T = DocumentData>(
 
 export const useDocumentData = <T = DocumentData>(
   docRef?: DocumentReference<T> | null,
-  options?: DataOptions<T>
+  options?: DataOptions<T> & InitialValueOptions<T>
 ): DocumentDataHook<T> => {
   const snapshotOptions = options?.snapshotOptions;
   const [snapshot, loading, error] = useDocument<T>(docRef, options);
-  const value = useMemo(() => snapshot?.data(snapshotOptions) as T, [
-    snapshot,
-    snapshotOptions,
-  ]);
+
+  const initialValue = options?.initialValue;
+  const value = useMemo(
+    () => (snapshot?.data(snapshotOptions) ?? initialValue) as T | undefined,
+    [snapshot, snapshotOptions, initialValue]
+  );
 
   const resArray: DocumentDataHook<T> = [value, loading, error, snapshot];
   return useMemo(() => resArray, resArray);
 };
 
 export const useDocumentDataOnce = <T = DocumentData>(
   docRef?: DocumentReference<T> | null,
-  options?: OnceDataOptions<T>
+  options?: OnceDataOptions<T> & InitialValueOptions<T>
 ): DocumentDataOnceHook<T> => {
   const snapshotOptions = options?.snapshotOptions;
   const [snapshot, loading, error, loadData] = useDocumentOnce<T>(
     docRef,
     options
   );
-  const value = useMemo(() => snapshot?.data(snapshotOptions) as T, [
-    snapshot,
-    snapshotOptions,
-  ]);
+
+  const initialValue = options?.initialValue;
+  const value = useMemo(
+    () => (snapshot?.data(snapshotOptions) ?? initialValue) as T | undefined,
+    [snapshot, snapshotOptions, initialValue]
+  );
 
   const resArray: DocumentDataOnceHook<T> = [
     value,