react-query-firebase 1.2.3 → 1.3.0

package/dist/src/firestore/index.d.ts

@@ -13,3 +13,4 @@ export * from "./useQuery";
 export * from "./useRunTransaction";
 export * from "./useSetDocMutation";
 export * from "./useUpdateDocMutation";
+export * from "./useGetRealtimeDocData";

package/dist/src/firestore/index.js

@@ -13,3 +13,4 @@ export * from "./useQuery";
 export * from "./useRunTransaction";
 export * from "./useSetDocMutation";
 export * from "./useUpdateDocMutation";
+export * from "./useGetRealtimeDocData";

package/dist/src/firestore/useGetRealtimeDocData.d.ts

@@ -0,0 +1,48 @@
+import { CollectionReference, DocumentData, DocumentReference } from "firebase/firestore";
+import { FirebaseError } from "firebase/app";
+/**
+ * @inline
+ */
+export type UseGetRealtimeDocDataOptions<AppModelType, DbModelType extends DocumentData = DocumentData> = {
+    /**
+     * A slash-separated path to a document. Has to be omitted to use
+     */
+    path?: string;
+    /**
+     * A reference to a collection.
+     */
+    reference: CollectionReference<AppModelType, DbModelType> | DocumentReference<AppModelType, DbModelType>;
+    /**
+     * Additional path segments that will be applied relative
+     * to the first argument.
+     */
+    pathSegments?: string[];
+    /**
+     * A callback to be called if the listen fails or is
+     * cancelled. No further callbacks will occur.
+     */
+    onError: (error: FirebaseError) => unknown;
+};
+/**
+ * A hook to get realtime updates to a firestore document.
+ *
+ * @group Hook
+ *
+ * @param {UseGetRealtimeDocDataOptions<AppModelType, DbModelType>} options
+ *
+ * @returns {AppModelType | null}
+ *
+ * @example
+ * ```jsx
+ * const firebaseConfig = {};
+ * export const MyComponent = () => {
+ *  const doc = useGetRealtimeDocData('collection/documentId');
+ *  return (
+ *      <div>
+ *          {JSON.stringify(doc)}
+ *      </div>
+ *  );
+ * };
+ * ```
+ */
+export declare const useGetRealtimeDocData: <AppModelType, DbModelType extends DocumentData = DocumentData>({ path, pathSegments, reference, onError }: UseGetRealtimeDocDataOptions<AppModelType, DbModelType>) => AppModelType | null;

package/dist/src/firestore/useGetRealtimeDocData.js

@@ -0,0 +1,41 @@
+import { onSnapshot } from "firebase/firestore";
+import { useEffect, useState } from "react";
+import { useDocReference } from "./useDocReference";
+/**
+ * A hook to get realtime updates to a firestore document.
+ *
+ * @group Hook
+ *
+ * @param {UseGetRealtimeDocDataOptions<AppModelType, DbModelType>} options
+ *
+ * @returns {AppModelType | null}
+ *
+ * @example
+ * ```jsx
+ * const firebaseConfig = {};
+ * export const MyComponent = () => {
+ *  const doc = useGetRealtimeDocData('collection/documentId');
+ *  return (
+ *      <div>
+ *          {JSON.stringify(doc)}
+ *      </div>
+ *  );
+ * };
+ * ```
+ */
+export const useGetRealtimeDocData = ({ path, pathSegments, reference, onError }) => {
+    const ref = useDocReference({ path, reference, pathSegments });
+    const [doc, setDoc] = useState(null);
+    useEffect(() => {
+        const unsubscribe = ref
+            ? onSnapshot(ref, {
+                next: async (snapshot) => {
+                    setDoc(snapshot.data() || null);
+                },
+                error: onError
+            })
+            : () => { };
+        return () => unsubscribe();
+    }, [ref, doc]);
+    return doc;
+};

package/package.json

@@ -60,5 +60,5 @@
         "docs:build": "vitepress build docs",
         "docs:preview": "vitepress preview docs"
     },
-    "version": "1.2.3"
+    "version": "1.3.0"
 }

package/src/firestore/index.ts

@@ -13,3 +13,4 @@ export * from "./useQuery";
 export * from "./useRunTransaction";
 export * from "./useSetDocMutation";
 export * from "./useUpdateDocMutation";
+export * from "./useGetRealtimeDocData";

package/src/firestore/useGetRealtimeDocData.ts

@@ -0,0 +1,76 @@
+import { CollectionReference, DocumentData, DocumentReference, onSnapshot } from "firebase/firestore";
+
+import { useEffect, useState } from "react";
+import { FirebaseError } from "firebase/app";
+import { useDocReference } from "./useDocReference";
+
+/**
+ * @inline
+ */
+export type UseGetRealtimeDocDataOptions<AppModelType, DbModelType extends DocumentData = DocumentData> = {
+    /**
+     * A slash-separated path to a document. Has to be omitted to use
+     */
+    path?: string;
+    /**
+     * A reference to a collection.
+     */
+    reference: CollectionReference<AppModelType, DbModelType> | DocumentReference<AppModelType, DbModelType>;
+    /**
+     * Additional path segments that will be applied relative
+     * to the first argument.
+     */
+    pathSegments?: string[];
+    /**
+     * A callback to be called if the listen fails or is
+     * cancelled. No further callbacks will occur.
+     */
+    onError: (error: FirebaseError) => unknown;
+};
+
+/**
+ * A hook to get realtime updates to a firestore document.
+ *
+ * @group Hook
+ *
+ * @param {UseGetRealtimeDocDataOptions<AppModelType, DbModelType>} options
+ *
+ * @returns {AppModelType | null}
+ *
+ * @example
+ * ```jsx
+ * const firebaseConfig = {};
+ * export const MyComponent = () => {
+ *  const doc = useGetRealtimeDocData('collection/documentId');
+ *  return (
+ *      <div>
+ *          {JSON.stringify(doc)}
+ *      </div>
+ *  );
+ * };
+ * ```
+ */
+export const useGetRealtimeDocData = <AppModelType, DbModelType extends DocumentData = DocumentData>({
+    path,
+    pathSegments,
+    reference,
+    onError
+}: UseGetRealtimeDocDataOptions<AppModelType, DbModelType>): AppModelType | null => {
+    const ref = useDocReference({ path, reference, pathSegments });
+    const [doc, setDoc] = useState<AppModelType | null>(null);
+
+    useEffect(() => {
+        const unsubscribe = ref
+            ? onSnapshot(ref, {
+                  next: async (snapshot) => {
+                      setDoc(snapshot.data() || null);
+                  },
+                  error: onError
+              })
+            : () => {};
+
+        return () => unsubscribe();
+    }, [ref, doc]);
+
+    return doc;
+};