react-firehooks/lib/firestore/useQueryData.js

Lightweight dependency-free collection of React hooks for Firebase

import { onSnapshot } from "firebase/firestore";
import { useCallback } from "react";
import { useListen } from "../internal/useListen.js";
import { LoadingState } from "../internal/useLoadingValue.js";
import { isQueryEqual } from "./internal.js";
/**
 * Returns and updates a the document data of a Firestore Query
 * @template AppModelType Shape of the data after it was converted from firestore
 * @template DbModelType Shape of the data in firestore
 * @param query Firestore query that will be subscribed to
 * @param options Options to configure the subscription
 * `initialValue`: Value that is returned while the query is being fetched.
 * @returns Query data, loading state, and error
 * - value: Query data; `undefined` if query is currently being fetched, or an error occurred
 * - loading: `true` while fetching the query; `false` if the query was fetched successfully or an error occurred
 * - error: `undefined` if no error occurred
 */
export function useQueryData(query, options) {
    var _a;
    const { snapshotListenOptions, snapshotOptions } = options !== null && options !== void 0 ? options : {};
    const { includeMetadataChanges = false, source = "default" } = (snapshotListenOptions !== null && snapshotListenOptions !== void 0 ? snapshotListenOptions : {});
    const { serverTimestamps = "none" } = snapshotOptions !== null && snapshotOptions !== void 0 ? snapshotOptions : {};
    const onChange = useCallback((stableQuery, next, error) => onSnapshot(stableQuery, {
        includeMetadataChanges,
        source,
    }, {
        next: (snap) => next(snap.docs.map((doc) => doc.data({ serverTimestamps }))),
        error,
    }), [includeMetadataChanges, serverTimestamps, source]);
    return useListen(query !== null && query !== void 0 ? query : undefined, onChange, isQueryEqual, (_a = options === null || options === void 0 ? void 0 : options.initialValue) !== null && _a !== void 0 ? _a : LoadingState);
}