react-query-firebase 1.0.0

package/src/firestore/useDocReferences.ts

@@ -0,0 +1,28 @@
+import { CollectionReference, doc, DocumentData, DocumentReference } from "firebase/firestore";
+
+import { useMemo } from "react";
+import { useFirestore } from "../useFirestore";
+
+export type UseDocReferencesOptions<AppModelType, DbModelType extends DocumentData = DocumentData> = {
+    reference?: CollectionReference<AppModelType, DbModelType> | DocumentReference<AppModelType, DbModelType>;
+    path: string;
+    pathSegments?: string[];
+};
+
+export const useDocReferences = <AppModelType, DbModelType extends DocumentData = DocumentData>(
+    references: UseDocReferencesOptions<AppModelType, DbModelType>[]
+) => {
+    const db = useFirestore();
+
+    return useMemo(() => {
+        return references.map(({ path, reference, pathSegments }) => {
+            return (
+                !reference
+                    ? doc(db, path || "", ...(pathSegments || []))
+                    : reference.type === "collection"
+                      ? doc(reference, path, ...(pathSegments || []))
+                      : doc(reference, path, ...(pathSegments || []))
+            ) as DocumentReference<AppModelType, DbModelType>;
+        });
+    }, [references]);
+};

package/src/firestore/useGetDocData.ts

@@ -0,0 +1,33 @@
+import { CollectionReference, DocumentData, DocumentReference } from "firebase/firestore";
+
+import { useFirestore } from "../useFirestore";
+import { getDocData } from "./utils/getDocData";
+import { useQuery, UseQueryOptions } from "@tanstack/react-query";
+
+type UseGetDocOptions<
+    AppModelType extends DocumentData = DocumentData,
+    DbModelType extends DocumentData = DocumentData
+> = {
+    options: Omit<UseQueryOptions<AppModelType | null, Error, AppModelType>, "queryFn"> &
+        Required<Pick<UseQueryOptions<AppModelType, Error, AppModelType>, "queryKey">>;
+    path?: string;
+    pathSegments?: string[];
+    reference: CollectionReference<AppModelType, DbModelType> | DocumentReference<AppModelType, DbModelType>;
+};
+
+export const useGetDocData = <
+    AppModelType extends DocumentData = DocumentData,
+    DbModelType extends DocumentData = DocumentData
+>({
+    options,
+    reference,
+    path,
+    pathSegments
+}: UseGetDocOptions<AppModelType, DbModelType>) => {
+    const db = useFirestore();
+
+    return useQuery({
+        ...options,
+        queryFn: () => getDocData<AppModelType, DbModelType>({ db, reference, path, pathSegments })
+    });
+};

package/src/firestore/useInfiniteQuery.ts

@@ -0,0 +1,84 @@
+import {
+    DocumentData,
+    FirestoreDataConverter,
+    getDocs,
+    Query,
+    query,
+    QueryCompositeFilterConstraint,
+    QueryConstraint,
+    QueryNonFilterConstraint
+} from "firebase/firestore";
+
+import {
+    useInfiniteQuery as useInfiniteReactQuery,
+    UseInfiniteQueryOptions as UseReactInfiniteQueryOptions,
+    QueryKey,
+    UseInfiniteQueryResult,
+    InfiniteData
+} from "@tanstack/react-query";
+
+type UseInfiniteQueryOptions<
+    AppModelType extends DocumentData = DocumentData,
+    DbModelType extends DocumentData = DocumentData,
+    TQueryKey extends QueryKey = QueryKey
+> = {
+    options: Omit<
+        UseReactInfiniteQueryOptions<
+            AppModelType[],
+            Error,
+            InfiniteData<AppModelType[]>,
+            AppModelType[],
+            TQueryKey,
+            QueryConstraint
+        >,
+        "queryFn"
+    > &
+        Required<
+            Pick<
+                UseReactInfiniteQueryOptions<
+                    AppModelType[],
+                    Error,
+                    InfiniteData<AppModelType[]>,
+                    AppModelType[],
+                    TQueryKey,
+                    QueryConstraint
+                >,
+                "queryKey"
+            >
+        >;
+    query: Query<AppModelType, DbModelType>;
+    queryConstraints?: QueryConstraint[] | QueryNonFilterConstraint[];
+    compositeFilter?: QueryCompositeFilterConstraint;
+    converter?: FirestoreDataConverter<AppModelType, DbModelType>;
+};
+
+export const useInfiniteQuery = <
+    AppModelType extends DocumentData = DocumentData,
+    DbModelType extends DocumentData = DocumentData
+>({
+    options,
+    query: queryReference,
+    queryConstraints = [],
+    compositeFilter,
+    converter
+}: UseInfiniteQueryOptions<AppModelType, DbModelType>): UseInfiniteQueryResult<InfiniteData<AppModelType[]>> => {
+    return useInfiniteReactQuery({
+        ...options,
+        queryFn: async ({ pageParam }) => {
+            const allQueryConstraints = [...queryConstraints, ...(pageParam ? [pageParam] : [])];
+            const queryToExecute = compositeFilter
+                ? query(queryReference, compositeFilter, ...(allQueryConstraints as QueryNonFilterConstraint[]))
+                : query(queryReference, ...allQueryConstraints);
+
+            const querySnapshot = await getDocs(converter ? queryToExecute.withConverter(converter) : queryToExecute);
+            const docs: AppModelType[] = [];
+
+            if (querySnapshot) {
+                querySnapshot.forEach((doc) => {
+                    docs.push(doc.data());
+                });
+            }
+            return docs;
+        }
+    });
+};

package/src/firestore/useQuery.ts

@@ -0,0 +1,58 @@
+import {
+    DocumentData,
+    FirestoreDataConverter,
+    getDocs,
+    Query,
+    query,
+    QueryCompositeFilterConstraint,
+    QueryConstraint,
+    QueryNonFilterConstraint
+} from "firebase/firestore";
+
+import {
+    UseQueryResult,
+    useQuery as useReactQuery,
+    UseQueryOptions as UseReactQueryOptions
+} from "@tanstack/react-query";
+
+type UseQueryOptions<
+    AppModelType extends DocumentData = DocumentData,
+    DbModelType extends DocumentData = DocumentData
+> = {
+    options: Omit<UseReactQueryOptions<AppModelType[], Error, AppModelType[]>, "queryFn"> &
+        Required<Pick<UseReactQueryOptions<AppModelType[], Error, AppModelType[]>, "queryKey">>;
+    query: Query<AppModelType, DbModelType>;
+    queryConstraints?: QueryConstraint[] | QueryNonFilterConstraint[];
+    compositeFilter?: QueryCompositeFilterConstraint;
+    converter?: FirestoreDataConverter<AppModelType, DbModelType>;
+};
+
+export const useQuery = <
+    AppModelType extends DocumentData = DocumentData,
+    DbModelType extends DocumentData = DocumentData
+>({
+    options,
+    query: queryReference,
+    queryConstraints = [],
+    compositeFilter,
+    converter
+}: UseQueryOptions<AppModelType, DbModelType>): UseQueryResult<AppModelType[]> => {
+    return useReactQuery({
+        ...options,
+        queryFn: async () => {
+            const queryToExecute = compositeFilter
+                ? query(queryReference, compositeFilter, ...(queryConstraints as QueryNonFilterConstraint[]))
+                : query(queryReference, ...queryConstraints);
+
+            const querySnapshot = await getDocs(converter ? queryToExecute.withConverter(converter) : queryToExecute);
+            const docs: AppModelType[] = [];
+
+            if (querySnapshot) {
+                querySnapshot.forEach((doc) => {
+                    docs.push(doc.data());
+                });
+            }
+            return docs;
+        }
+    });
+};

package/src/firestore/useRunTransaction.ts

@@ -0,0 +1,24 @@
+import { useMutation, UseMutationOptions } from "@tanstack/react-query";
+import { runTransaction, Transaction } from "firebase/firestore";
+
+import { FirebaseError } from "firebase/app";
+import { useFirestore } from "../useFirestore";
+
+export type UseRunTransactionValues = <AppModelType = unknown>(transaction: Transaction) => AppModelType;
+
+export type UseRunTransactionOptions<AppModelType = unknown, TContext = unknown> = {
+    options?: Omit<UseMutationOptions<AppModelType, FirebaseError, UseRunTransactionValues, TContext>, "mutationFn">;
+};
+
+export const useRunTransaction = <AppModelType = unknown, TContext = unknown>({
+    options = {}
+}: UseRunTransactionOptions<AppModelType, TContext>) => {
+    const db = useFirestore();
+
+    return useMutation({
+        ...options,
+        mutationFn: async (transactionFn) => {
+            return runTransaction<AppModelType>(db, transactionFn);
+        }
+    });
+};

package/src/firestore/useSetDocMutation.ts

@@ -0,0 +1,43 @@
+import { useMutation, UseMutationOptions } from "@tanstack/react-query";
+import { DocumentData, DocumentReference, setDoc, WithFieldValue } from "firebase/firestore";
+
+import { FirebaseError } from "firebase/app";
+import { useMemo } from "react";
+
+export type UseSetDocMutationValues<AppModelType> = {
+    data: WithFieldValue<AppModelType>;
+};
+
+export type UseSetDocMutationOptions<
+    AppModelType = unknown,
+    DbModelType extends DocumentData = DocumentData,
+    TContext = unknown
+> = {
+    reference: DocumentReference<AppModelType, DbModelType> | null;
+    options?: Omit<
+        UseMutationOptions<void, FirebaseError, UseSetDocMutationValues<AppModelType>, TContext>,
+        "mutationFn" | "mutationKey"
+    >;
+};
+
+export const useSetDocMutation = <
+    AppModelType = unknown,
+    DbModelType extends DocumentData = DocumentData,
+    TContext = unknown
+>({
+    reference,
+    options
+}: UseSetDocMutationOptions<AppModelType, DbModelType, TContext>) => {
+    const mutationKey = useMemo(() => [reference?.path], [reference?.path]);
+
+    return useMutation({
+        ...options,
+        mutationFn: ({ data }) => {
+            if (!reference) {
+                throw new Error("Reference is undefined");
+            }
+            return setDoc<AppModelType, DbModelType>(reference, data);
+        },
+        mutationKey
+    });
+};

package/src/firestore/useUpdateDocMutation copy.ts

@@ -0,0 +1,51 @@
+import { useMutation, UseMutationOptions } from "@tanstack/react-query";
+import {
+    DocumentData,
+    updateDoc,
+    getDoc,
+    FirestoreDataConverter,
+    DocumentReference,
+    UpdateData
+} from "firebase/firestore";
+
+import { FirebaseError } from "firebase/app";
+import { useMemo } from "react";
+
+export type UseUpdateDocMutationValues<DbModelType> = {
+    data: UpdateData<DbModelType>;
+};
+
+export type UseUpdateDocMutationOptions<
+    AppModelType extends DocumentData = DocumentData,
+    DbModelType extends DocumentData = DocumentData,
+    TContext = unknown
+> = {
+    reference: DocumentReference<AppModelType, DbModelType>;
+    converter?: FirestoreDataConverter<AppModelType, DbModelType>;
+    options?: Omit<
+        UseMutationOptions<AppModelType, FirebaseError, UseUpdateDocMutationValues<DbModelType>, TContext>,
+        "mutationFn" | "mutationKey"
+    >;
+};
+
+export const useUpdateDocMutation = <
+    AppModelType extends DocumentData = DocumentData,
+    DbModelType extends DocumentData = DocumentData,
+    TContext = unknown
+>({
+    reference,
+    converter,
+    options = {}
+}: UseUpdateDocMutationOptions<AppModelType, DbModelType, TContext>) => {
+    const mutationKey = useMemo(() => [reference.path], [reference.path]);
+
+    return useMutation({
+        ...options,
+        mutationFn: async ({ data }) => {
+            await updateDoc<AppModelType, DbModelType>(reference, data);
+            const docSnap = await getDoc(converter ? reference.withConverter(converter) : reference);
+            return docSnap.data() as AppModelType;
+        },
+        mutationKey
+    });
+};

package/src/firestore/useUpdateDocMutation.ts

@@ -0,0 +1,55 @@
+import { useMutation, UseMutationOptions } from "@tanstack/react-query";
+import {
+    DocumentData,
+    updateDoc,
+    getDoc,
+    FirestoreDataConverter,
+    DocumentReference,
+    UpdateData
+} from "firebase/firestore";
+
+import { FirebaseError } from "firebase/app";
+import { useMemo } from "react";
+
+export type UseUpdateDocMutationValues<DbModelType> = {
+    data: UpdateData<DbModelType>;
+};
+
+export type UseUpdateDocMutationOptions<
+    AppModelType extends DocumentData = DocumentData,
+    DbModelType extends DocumentData = DocumentData,
+    TContext = unknown
+> = {
+    reference: DocumentReference<AppModelType, DbModelType> | null;
+    converter?: FirestoreDataConverter<AppModelType, DbModelType>;
+    options?: Omit<
+        UseMutationOptions<AppModelType, FirebaseError, UseUpdateDocMutationValues<DbModelType>, TContext>,
+        "mutationFn" | "mutationKey"
+    >;
+};
+
+export const useUpdateDocMutation = <
+    AppModelType extends DocumentData = DocumentData,
+    DbModelType extends DocumentData = DocumentData,
+    TContext = unknown
+>({
+    reference,
+    converter,
+    options = {}
+}: UseUpdateDocMutationOptions<AppModelType, DbModelType, TContext>) => {
+    const mutationKey = useMemo(() => [reference?.path], [reference?.path]);
+
+    return useMutation({
+        ...options,
+        mutationFn: async ({ data }) => {
+            if (!reference) {
+                throw new Error("Reference is undefined");
+            }
+
+            await updateDoc<AppModelType, DbModelType>(reference, data);
+            const docSnap = await getDoc(converter ? reference.withConverter(converter) : reference);
+            return docSnap.data() as AppModelType;
+        },
+        mutationKey
+    });
+};

package/src/firestore/utils/getDocData.ts

@@ -0,0 +1,25 @@
+import { DocumentData } from "firebase/firestore";
+import { getDocSnap, GetDocSnapOptions } from "./getDocSnap";
+
+export type GetDocDataOptions<
+    AppModelType extends DocumentData = DocumentData,
+    DbModelType extends DocumentData = DocumentData
+> = GetDocSnapOptions<AppModelType, DbModelType>;
+
+export const getDocData = async <
+    AppModelType extends DocumentData = DocumentData,
+    DbModelType extends DocumentData = DocumentData
+>({
+    db,
+    reference,
+    path,
+    pathSegments
+}: GetDocDataOptions<AppModelType, DbModelType>) => {
+    const docSnap = await getDocSnap<AppModelType, DbModelType>({ db, reference, path, pathSegments });
+
+    if (docSnap && docSnap.exists()) {
+        return docSnap.data();
+    }
+
+    return null;
+};

package/src/firestore/utils/getDocRef.ts

@@ -0,0 +1,35 @@
+import { CollectionReference, doc, DocumentData, DocumentReference, Firestore } from "firebase/firestore";
+
+export type GetDocRefOptions<
+    AppModelType extends DocumentData = DocumentData,
+    DbModelType extends DocumentData = DocumentData
+> = {
+    db: Firestore;
+    reference?: CollectionReference<AppModelType, DbModelType> | DocumentReference<AppModelType, DbModelType>;
+    path?: string;
+    pathSegments?: string[];
+};
+
+export const getDocRef = async <
+    AppModelType extends DocumentData = DocumentData,
+    DbModelType extends DocumentData = DocumentData
+>({
+    db,
+    reference,
+    path,
+    pathSegments
+}: GetDocRefOptions<AppModelType, DbModelType>) => {
+    if (!reference && !path) {
+        throw new Error("One of the options must be provided: path or reference.");
+    }
+
+    const docRef = !reference
+        ? doc(db, path as string, ...(pathSegments || []))
+        : reference.type === "collection"
+          ? doc(reference, path, ...(pathSegments || []))
+          : reference.type === "document"
+            ? doc(reference, path as string, ...(pathSegments || []))
+            : null;
+
+    return docRef as DocumentReference<AppModelType, DbModelType>;
+};

package/src/firestore/utils/getDocSnap.ts

@@ -0,0 +1,25 @@
+import { DocumentData, getDoc as firestoreGetDoc } from "firebase/firestore";
+import { getDocRef, GetDocRefOptions } from "./getDocRef";
+
+export type GetDocSnapOptions<
+    AppModelType extends DocumentData = DocumentData,
+    DbModelType extends DocumentData = DocumentData
+> = GetDocRefOptions<AppModelType, DbModelType>;
+
+export const getDocSnap = async <
+    AppModelType extends DocumentData = DocumentData,
+    DbModelType extends DocumentData = DocumentData
+>({
+    db,
+    reference,
+    path,
+    pathSegments
+}: GetDocSnapOptions<AppModelType, DbModelType>) => {
+    const docRef = await getDocRef<AppModelType, DbModelType>({ db, reference, path, pathSegments });
+
+    if (docRef) {
+        return await firestoreGetDoc(docRef);
+    }
+
+    return null;
+};

package/src/index.ts

@@ -0,0 +1,10 @@
+export * from "./useAuth";
+export * from "./useFirebase";
+export * from "./useFirestore";
+export * from "./FirebaseContextProvider";
+export * from "./useAnalytics";
+export * from "./useRemoteConfig";
+export * from "./analytics";
+export * from "./auth";
+export * from "./firestore";
+export * from "./remoteConfig";

package/src/remoteConfig/index.ts

@@ -0,0 +1,2 @@
+export * from "./useFetchAndActivate";
+export * from "./useGetValue";

package/src/remoteConfig/useFetchAndActivate.ts

@@ -0,0 +1,27 @@
+import { useRemoteConfig } from "../useRemoteConfig";
+import { ensureInitialized, fetchAndActivate } from "firebase/remote-config";
+import { useCallback, useMemo, useState } from "react";
+
+export const useFetchAndActivate = () => {
+    const remoteConfig = useRemoteConfig();
+    const [isFetched, setIsFetched] = useState(false);
+
+    const fetchAndActivateCallback = useCallback(async () => {
+        try {
+            await ensureInitialized(remoteConfig);
+            await fetchAndActivate(remoteConfig);
+            setIsFetched(true);
+        } catch (e) {
+            setIsFetched(true);
+            console.log(`Cannot read remote config: ${(e as Error)?.message}`);
+        }
+    }, [isFetched]);
+
+    return useMemo(
+        () => ({
+            fetchAndActivate: fetchAndActivateCallback,
+            isFetched
+        }),
+        [isFetched, fetchAndActivateCallback]
+    );
+};

package/src/remoteConfig/useGetValue.ts

@@ -0,0 +1,10 @@
+import { getValue } from "firebase/remote-config";
+import { useRemoteConfig } from "../useRemoteConfig";
+import { useMemo } from "react";
+
+export const useGetValue = (key: string) => {
+    const remoteConfig = useRemoteConfig();
+    return useMemo(() => {
+        return remoteConfig ? getValue(remoteConfig, key) : null;
+    }, [remoteConfig?.lastFetchStatus, key]);
+};

package/src/useAnalytics.ts

@@ -0,0 +1,8 @@
+import { Context, useContext } from "react";
+
+import { FirebaseContext, FirebaseContextValue } from "./FirebaseContext";
+
+export const useAnalytics = () => {
+    const { analytics } = useContext<FirebaseContextValue>(FirebaseContext as Context<FirebaseContextValue>);
+    return analytics;
+};

package/src/useAuth.ts

@@ -0,0 +1,8 @@
+import { useContext, Context } from "react";
+
+import { FirebaseContext, FirebaseContextValue } from "./FirebaseContext";
+
+export const useAuth = () => {
+    const { auth } = useContext<FirebaseContextValue>(FirebaseContext as Context<FirebaseContextValue>);
+    return auth;
+};

package/src/useFirebase.ts

@@ -0,0 +1,8 @@
+import { Context, useContext } from "react";
+
+import { FirebaseContext, FirebaseContextValue } from "./FirebaseContext";
+
+export const useFirebase = () => {
+    const { firebase } = useContext<FirebaseContextValue>(FirebaseContext as Context<FirebaseContextValue>);
+    return firebase;
+};

package/src/useFirestore.ts

@@ -0,0 +1,7 @@
+import { Context, useContext } from "react";
+import { FirebaseContext, FirebaseContextValue } from "./FirebaseContext";
+
+export const useFirestore = () => {
+    const { firestore } = useContext<FirebaseContextValue>(FirebaseContext as Context<FirebaseContextValue>);
+    return firestore;
+};

package/src/useRemoteConfig.ts

@@ -0,0 +1,7 @@
+import { Context, useContext } from "react";
+import { FirebaseContext, FirebaseContextValue } from "./FirebaseContext";
+
+export const useRemoteConfig = () => {
+    const { remoteConfig } = useContext<FirebaseContextValue>(FirebaseContext as Context<FirebaseContextValue>);
+    return remoteConfig;
+};