diff --git a/packages/react/src/data-connect/useDataConnectQuery.test.tsx b/packages/react/src/data-connect/useDataConnectQuery.test.tsx index 052c9d87..a2ec9ffb 100644 --- a/packages/react/src/data-connect/useDataConnectQuery.test.tsx +++ b/packages/react/src/data-connect/useDataConnectQuery.test.tsx @@ -110,16 +110,15 @@ describe("useDataConnectQuery", () => { }); test("returns the correct data properties", async () => { - const { result } = renderHook(() => useDataConnectQuery(listMoviesRef()), { - wrapper, - }); - await createMovie({ title: "tanstack query firebase", genre: "library", imageUrl: "https://invertase.io/", }); - + const { result } = renderHook(() => useDataConnectQuery(listMoviesRef()), { + wrapper, + }); + await waitFor(() => expect(result.current.isSuccess).toBe(true)); result.current.data?.movies.forEach((i) => { @@ -214,6 +213,23 @@ describe("useDataConnectQuery", () => { expect(result.current.dataConnectResult).toHaveProperty("source"); expect(result.current.dataConnectResult).toHaveProperty("fetchTime"); }); + test("avails the data immediately when initialData is passed", async () => { + const queryResult = await executeQuery(listMoviesRef()); + + const { result } = renderHook(() => useDataConnectQuery(listMoviesRef(), { initialData: queryResult.data }), { + wrapper, + }); + + // Should not enter a loading state + expect(result.current.isLoading).toBe(false); + expect(result.current.isPending).toBe(false); + + expect(result.current.isSuccess).toBe(true); + + expect(result.current.data).toBeDefined(); + expect(result.current.data).to.deep.eq(queryResult.data); + expect(result.current.dataConnectResult).toHaveProperty("ref"); + }); test("a query with no variables has null as the second query key argument", async () => { const queryClient = new DataConnectQueryClient(); diff --git a/packages/react/src/data-connect/useDataConnectQuery.ts b/packages/react/src/data-connect/useDataConnectQuery.ts index 5f51903d..4bfc0fb1 100644 --- a/packages/react/src/data-connect/useDataConnectQuery.ts +++ b/packages/react/src/data-connect/useDataConnectQuery.ts @@ -1,4 +1,4 @@ -import { type UseQueryOptions, useQuery } from "@tanstack/react-query"; +import { InitialDataFunction, type UseQueryOptions, useQuery } from "@tanstack/react-query"; import type { FirebaseError } from "firebase/app"; import { type CallerSdkType, @@ -20,20 +20,25 @@ export type useDataConnectQueryOptions< > = PartialBy, "queryFn">, "queryKey">; export function useDataConnectQuery( - refOrResult: QueryRef | QueryResult, - options?: useDataConnectQueryOptions, - _callerSdkType: CallerSdkType = CallerSdkTypeEnum.TanstackReactCore, + refOrResult: QueryRef + | QueryResult, + options?: useDataConnectQueryOptions< + Data, + FirebaseError + >, + _callerSdkType: CallerSdkType = CallerSdkTypeEnum.TanstackReactCore ): UseDataConnectQueryResult { - const [dataConnectResult, setDataConnectResult] = useState< - QueryResultRequiredRef - >("ref" in refOrResult ? refOrResult : { ref: refOrResult }); - let initialData: Data | undefined; + const [dataConnectResult, setDataConnectResult] = useState>('ref' in refOrResult ? refOrResult : { ref: refOrResult }); + // TODO(mtewani): in the future we should allow for users to pass in `QueryResult` objects into `initialData`. + let initialData: Data | InitialDataFunction | undefined; const { ref } = dataConnectResult; if ("ref" in refOrResult) { initialData = { ...refOrResult.data, }; + } else { + initialData = options?.initialData; } // @ts-expect-error function is hidden under `DataConnect`.