fix(react): Fix issue where initialData wasn't respected (#177)

* Fix react typings

* Fixed issue with initialData

* Fixed race condition in test

* Removed extra newline

---------

Co-authored-by: Elliot Hesp <[email protected]>

Author: maneesht

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();

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<Omit<UseQueryOptions<TData, TError>, "queryFn">, "queryKey">;
 
 export function useDataConnectQuery<Data = unknown, Variables = unknown>(
-  refOrResult: QueryRef<Data, Variables> | QueryResult<Data, Variables>,
-  options?: useDataConnectQueryOptions<Data, FirebaseError>,
-  _callerSdkType: CallerSdkType = CallerSdkTypeEnum.TanstackReactCore,
+  refOrResult: QueryRef<Data, Variables>
+    | QueryResult<Data, Variables>,
+  options?: useDataConnectQueryOptions<
+    Data,
+    FirebaseError
+  >,
+  _callerSdkType: CallerSdkType = CallerSdkTypeEnum.TanstackReactCore
 ): UseDataConnectQueryResult<Data, Variables> {
-  const [dataConnectResult, setDataConnectResult] = useState<
-    QueryResultRequiredRef<Data, Variables>
-  >("ref" in refOrResult ? refOrResult : { ref: refOrResult });
-  let initialData: Data | undefined;
+  const [dataConnectResult, setDataConnectResult] = useState<QueryResultRequiredRef<Data, Variables>>('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<Data> | undefined;
   const { ref } = dataConnectResult;
 
   if ("ref" in refOrResult) {
     initialData = {
       ...refOrResult.data,
     };
+  } else {
+    initialData = options?.initialData;
   }
 
   // @ts-expect-error function is hidden under `DataConnect`.