react-query-firebase 1.2.2 → 1.3.0

package/dist/src/auth/useIdToken.js

@@ -1,5 +1,7 @@
 import { useCallback, useEffect, useState } from "react";
 import { useCurrentUser } from "./useCurrentUser";
+import { onIdTokenChanged } from "firebase/auth";
+import { useAuth } from "./useAuth";
 /**
  * Custom hook to manage an ID token for the current user.
  * This hook provides an `idToken` value and a `refresh` function to manually refresh the token.
@@ -9,6 +11,7 @@ import { useCurrentUser } from "./useCurrentUser";
  *   @returns {Function} refresh - A function to refresh the ID token.
  */
 export const useIdToken = () => {
+    const auth = useAuth();
     const currentUser = useCurrentUser();
     const [idToken, setIdToken] = useState("");
     const callback = useCallback(async () => {
@@ -29,6 +32,19 @@ export const useIdToken = () => {
     useEffect(() => {
         callback();
     }, [currentUser?.uid ?? ""]);
+    useEffect(() => {
+        const unsubscribe = onIdTokenChanged(auth, (user) => {
+            if (user) {
+                user.getIdToken().then((idToken) => {
+                    setIdToken(idToken);
+                });
+            }
+            else {
+                setIdToken("");
+            }
+        });
+        return () => unsubscribe();
+    }, [idToken]);
     return {
         idToken,
         refresh

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.2"
+    "version": "1.3.0"
 }

package/src/auth/useIdToken.ts

@@ -1,5 +1,7 @@
 import { useCallback, useEffect, useState } from "react";
 import { useCurrentUser } from "./useCurrentUser";
+import { onIdTokenChanged } from "firebase/auth";
+import { useAuth } from "./useAuth";
 
 /**
  * Custom hook to manage an ID token for the current user.
@@ -10,6 +12,8 @@ import { useCurrentUser } from "./useCurrentUser";
  *   @returns {Function} refresh - A function to refresh the ID token.
  */
 export const useIdToken = () => {
+    const auth = useAuth();
+
     const currentUser = useCurrentUser();
     const [idToken, setIdToken] = useState("");
 
@@ -36,6 +40,20 @@ export const useIdToken = () => {
         callback();
     }, [currentUser?.uid ?? ""]);
 
+    useEffect(() => {
+        const unsubscribe = onIdTokenChanged(auth, (user) => {
+            if (user) {
+                user.getIdToken().then((idToken) => {
+                    setIdToken(idToken);
+                });
+            } else {
+                setIdToken("");
+            }
+        });
+
+        return () => unsubscribe();
+    }, [idToken]);
+
     return {
         idToken,
         refresh

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;
+};