diff --git a/packages/react/src/firestore/index.ts b/packages/react/src/firestore/index.ts index 66d21d03..c72bc345 100644 --- a/packages/react/src/firestore/index.ts +++ b/packages/react/src/firestore/index.ts @@ -2,13 +2,11 @@ export { useClearIndexedDbPersistenceMutation } from "./useClearIndexedDbPersist // useEnableIndexedDbPersistenceMutation // useDisableNetworkMutation // useEnableNetworkMutation +export { useWaitForPendingWritesQuery } from "./useWaitForPendingWritesQuery"; export { useRunTransactionMutation } from "./useRunTransactionMutation"; -// useWaitForPendingWritesQuery // useWriteBatchCommitMutation (WriteBatch) export { useDocumentQuery } from "./useDocumentQuery"; export { useCollectionQuery } from "./useCollectionQuery"; -// useGetCountFromServerQuery export { useGetAggregateFromServerQuery } from "./useGetAggregateFromServerQuery"; export { useGetCountFromServerQuery } from "./useGetCountFromServerQuery"; -// useGetAggregateFromServerQuery // useNamedQuery diff --git a/packages/react/src/firestore/useWaitForPendingWritesQuery.test.tsx b/packages/react/src/firestore/useWaitForPendingWritesQuery.test.tsx new file mode 100644 index 00000000..c842d893 --- /dev/null +++ b/packages/react/src/firestore/useWaitForPendingWritesQuery.test.tsx @@ -0,0 +1,46 @@ +import React from "react"; +import { describe, expect, test, beforeEach, vi } from "vitest"; +import { renderHook, act, waitFor } from "@testing-library/react"; +import { QueryClient, QueryClientProvider } from "@tanstack/react-query"; +import { + expectFirestoreError, + firestore, + wipeFirestore, +} from "~/testing-utils"; +import { useWaitForPendingWritesQuery } from "./useWaitForPendingWritesQuery"; +import { doc, setDoc } from "firebase/firestore"; + +const queryClient = new QueryClient({ + defaultOptions: { + queries: { retry: false }, + mutations: { retry: false }, + }, +}); + +const wrapper = ({ children }: { children: React.ReactNode }) => ( + {children} +); + +describe("useWaitForPendingWritesQuery", () => { + beforeEach(async () => { + queryClient.clear(); + await wipeFirestore(); + }); + + test("enters loading state when pending writes are in progress", async () => { + const docRef = doc(firestore, "tests", "loadingStateDoc"); + + const { result } = renderHook( + () => + useWaitForPendingWritesQuery(firestore, { + queryKey: ["pending", "write", "loading"], + }), + { wrapper } + ); + + // Initiate a write without an await + setDoc(docRef, { value: "loading-test" }); + + expect(result.current.isPending).toBe(true); + }); +}); diff --git a/packages/react/src/firestore/useWaitForPendingWritesQuery.ts b/packages/react/src/firestore/useWaitForPendingWritesQuery.ts new file mode 100644 index 00000000..f8c47678 --- /dev/null +++ b/packages/react/src/firestore/useWaitForPendingWritesQuery.ts @@ -0,0 +1,21 @@ +import { useQuery, type UseQueryOptions } from "@tanstack/react-query"; +import { + type Firestore, + type FirestoreError, + waitForPendingWrites, +} from "firebase/firestore"; + +type FirestoreUseQueryOptions = Omit< + UseQueryOptions, + "queryFn" +>; + +export function useWaitForPendingWritesQuery( + firestore: Firestore, + options: FirestoreUseQueryOptions +) { + return useQuery({ + ...options, + queryFn: () => waitForPendingWrites(firestore), + }); +}