react-query-firebase 1.2.3 → 1.3.1

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,57 @@
+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;
+};
+/**
+ * @inline
+ */
+export type UseGetRealtimeDocDataResult<AppModelType> = {
+    data: AppModelType | null;
+    isError: boolean;
+    error: FirebaseError | null;
+    isFetching: boolean;
+};
+/**
+ * A hook to get realtime updates to a firestore document.
+ *
+ * @group Hook
+ *
+ * @param {UseGetRealtimeDocDataOptions<AppModelType, DbModelType>} options
+ *
+ * @returns {UseGetRealtimeDocDataResult<AppModelType>}
+ *
+ * @example
+ * ```jsx
+ * const firebaseConfig = {};
+ * export const MyComponent = () => {
+ *  const result = useGetRealtimeDocData('collection/documentId');
+ *  return (
+ *      <div>
+ *          {JSON.stringify(result)}
+ *      </div>
+ *  );
+ * };
+ * ```
+ */
+export declare const useGetRealtimeDocData: <AppModelType, DbModelType extends DocumentData = DocumentData>({ path, pathSegments, reference, onError }: UseGetRealtimeDocDataOptions<AppModelType, DbModelType>) => UseGetRealtimeDocDataResult<AppModelType>;

package/dist/src/firestore/useGetRealtimeDocData.js

@@ -0,0 +1,56 @@
+import { onSnapshot } from "firebase/firestore";
+import { useEffect, useMemo, 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 {UseGetRealtimeDocDataResult<AppModelType>}
+ *
+ * @example
+ * ```jsx
+ * const firebaseConfig = {};
+ * export const MyComponent = () => {
+ *  const result = useGetRealtimeDocData('collection/documentId');
+ *  return (
+ *      <div>
+ *          {JSON.stringify(result)}
+ *      </div>
+ *  );
+ * };
+ * ```
+ */
+export const useGetRealtimeDocData = ({ path, pathSegments, reference, onError }) => {
+    const ref = useDocReference({ path, reference, pathSegments });
+    const [doc, setDoc] = useState(null);
+    const [isError, setIsError] = useState(false);
+    const [isFetching, setIsFetching] = useState(true);
+    const [error, setError] = useState(null);
+    useEffect(() => {
+        const unsubscribe = ref
+            ? onSnapshot(ref, {
+                next: async (snapshot) => {
+                    setIsFetching(false);
+                    setDoc(snapshot.data() || null);
+                    setError(null);
+                    setIsError(false);
+                },
+                error: (e) => {
+                    setIsError(true);
+                    setError(e);
+                    onError?.(e);
+                }
+            })
+            : () => { };
+        return () => unsubscribe();
+    }, [ref, doc, isError, onError, isFetching, error]);
+    return useMemo(() => ({
+        data: doc,
+        isError,
+        isFetching,
+        error
+    }), [doc, isError, error]);
+};

package/package.json

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

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,104 @@
+import { CollectionReference, DocumentData, DocumentReference, onSnapshot } from "firebase/firestore";
+
+import { useEffect, useMemo, 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;
+};
+
+/**
+ * @inline
+ */
+export type UseGetRealtimeDocDataResult<AppModelType> = {
+    data: AppModelType | null;
+    isError: boolean;
+    error: FirebaseError | null;
+    isFetching: boolean;
+};
+
+/**
+ * A hook to get realtime updates to a firestore document.
+ *
+ * @group Hook
+ *
+ * @param {UseGetRealtimeDocDataOptions<AppModelType, DbModelType>} options
+ *
+ * @returns {UseGetRealtimeDocDataResult<AppModelType>}
+ *
+ * @example
+ * ```jsx
+ * const firebaseConfig = {};
+ * export const MyComponent = () => {
+ *  const result = useGetRealtimeDocData('collection/documentId');
+ *  return (
+ *      <div>
+ *          {JSON.stringify(result)}
+ *      </div>
+ *  );
+ * };
+ * ```
+ */
+export const useGetRealtimeDocData = <AppModelType, DbModelType extends DocumentData = DocumentData>({
+    path,
+    pathSegments,
+    reference,
+    onError
+}: UseGetRealtimeDocDataOptions<AppModelType, DbModelType>): UseGetRealtimeDocDataResult<AppModelType> => {
+    const ref = useDocReference({ path, reference, pathSegments });
+    const [doc, setDoc] = useState<AppModelType | null>(null);
+    const [isError, setIsError] = useState(false);
+    const [isFetching, setIsFetching] = useState(true);
+    const [error, setError] = useState<FirebaseError | null>(null);
+
+    useEffect(() => {
+        const unsubscribe = ref
+            ? onSnapshot(ref, {
+                  next: async (snapshot) => {
+                      setIsFetching(false);
+                      setDoc(snapshot.data() || null);
+                      setError(null);
+                      setIsError(false);
+                  },
+                  error: (e) => {
+                      setIsError(true);
+                      setError(e);
+                      onError?.(e);
+                  }
+              })
+            : () => {};
+
+        return () => unsubscribe();
+    }, [ref, doc, isError, onError, isFetching, error]);
+
+    return useMemo(
+        () => ({
+            data: doc,
+            isError,
+            isFetching,
+            error
+        }),
+        [doc, isError, error]
+    );
+};