Fix issue where initialData wasn't respected

dataconnect-sdk/js/default-connector/esm/index.esm.js

@@ -7,7 +7,7 @@ export const connectorConfig = {
 };
 
 export function createMovieRef(dcOrVars, vars) {
-  const { dc: dcInstance, vars: inputVars } = validateArgs(connectorConfig, dcOrVars, vars, true);
+  const { dc: dcInstance, vars: inputVars} = validateArgs(connectorConfig, dcOrVars, vars, true);
   dcInstance._useGeneratedSdk();
   return mutationRef(dcInstance, 'CreateMovie', inputVars);
 }
@@ -17,7 +17,7 @@ export function createMovie(dcOrVars, vars) {
 }
 
 export function upsertMovieRef(dcOrVars, vars) {
-  const { dc: dcInstance, vars: inputVars } = validateArgs(connectorConfig, dcOrVars, vars, true);
+  const { dc: dcInstance, vars: inputVars} = validateArgs(connectorConfig, dcOrVars, vars, true);
   dcInstance._useGeneratedSdk();
   return mutationRef(dcInstance, 'UpsertMovie', inputVars);
 }
@@ -27,7 +27,7 @@ export function upsertMovie(dcOrVars, vars) {
 }
 
 export function deleteMovieRef(dcOrVars, vars) {
-  const { dc: dcInstance, vars: inputVars } = validateArgs(connectorConfig, dcOrVars, vars, true);
+  const { dc: dcInstance, vars: inputVars} = validateArgs(connectorConfig, dcOrVars, vars, true);
   dcInstance._useGeneratedSdk();
   return mutationRef(dcInstance, 'DeleteMovie', inputVars);
 }
@@ -37,7 +37,7 @@ export function deleteMovie(dcOrVars, vars) {
 }
 
 export function addMetaRef(dc) {
-  const { dc: dcInstance } = validateArgs(connectorConfig, dc, undefined);
+  const { dc: dcInstance} = validateArgs(connectorConfig, dc, undefined);
   dcInstance._useGeneratedSdk();
   return mutationRef(dcInstance, 'AddMeta');
 }
@@ -47,7 +47,7 @@ export function addMeta(dc) {
 }
 
 export function deleteMetaRef(dcOrVars, vars) {
-  const { dc: dcInstance, vars: inputVars } = validateArgs(connectorConfig, dcOrVars, vars, true);
+  const { dc: dcInstance, vars: inputVars} = validateArgs(connectorConfig, dcOrVars, vars, true);
   dcInstance._useGeneratedSdk();
   return mutationRef(dcInstance, 'DeleteMeta', inputVars);
 }
@@ -57,7 +57,7 @@ export function deleteMeta(dcOrVars, vars) {
 }
 
 export function listMoviesRef(dc) {
-  const { dc: dcInstance } = validateArgs(connectorConfig, dc, undefined);
+  const { dc: dcInstance} = validateArgs(connectorConfig, dc, undefined);
   dcInstance._useGeneratedSdk();
   return queryRef(dcInstance, 'ListMovies');
 }
@@ -67,7 +67,7 @@ export function listMovies(dc) {
 }
 
 export function getMovieByIdRef(dcOrVars, vars) {
-  const { dc: dcInstance, vars: inputVars } = validateArgs(connectorConfig, dcOrVars, vars, true);
+  const { dc: dcInstance, vars: inputVars} = validateArgs(connectorConfig, dcOrVars, vars, true);
   dcInstance._useGeneratedSdk();
   return queryRef(dcInstance, 'GetMovieById', inputVars);
 }
@@ -77,7 +77,7 @@ export function getMovieById(dcOrVars, vars) {
 }
 
 export function getMetaRef(dc) {
-  const { dc: dcInstance } = validateArgs(connectorConfig, dc, undefined);
+  const { dc: dcInstance} = validateArgs(connectorConfig, dc, undefined);
   dcInstance._useGeneratedSdk();
   return queryRef(dcInstance, 'GetMeta');
 }

packages/react/src/data-connect/index.ts

@@ -1,4 +1,3 @@
-import { ReservedQueryKeys } from "./types";
 
 export {
   DataConnectQueryClient,
@@ -12,4 +11,4 @@ export {
   useDataConnectMutation,
   type useDataConnectMutationOptions,
 } from "./useDataConnectMutation";
-export type { FlattenedQueryResult, FlattenedMutationResult } from "./types";
+export type { QueryResultRequiredRef, UseDataConnectMutationResult, UseDataConnectQueryResult } from "./types";

packages/react/src/data-connect/query-client.ts

@@ -9,13 +9,12 @@ import {
   type QueryResult,
   executeQuery,
 } from "firebase/data-connect";
-import type { FlattenedQueryResult } from "./types";
 
 export type DataConnectQueryOptions<Data, Variables> = Omit<
   FetchQueryOptions<
-    FlattenedQueryResult<Data, Variables>,
+    Data,
     FirebaseError,
-    FlattenedQueryResult<Data, Variables>,
+    Data,
     QueryKey
   >,
   "queryFn" | "queryKey"
@@ -30,7 +29,7 @@ export class DataConnectQueryClient extends QueryClient {
     options?: DataConnectQueryOptions<Data, Variables>,
   ) {
     let queryRef: QueryRef<Data, Variables>;
-    let initialData: FlattenedQueryResult<Data, Variables> | undefined;
+    let initialData: Data | undefined;
 
     if ("ref" in refOrResult) {
       queryRef = refOrResult.ref;
@@ -45,9 +44,9 @@ export class DataConnectQueryClient extends QueryClient {
     }
 
     return this.prefetchQuery<
-      FlattenedQueryResult<Data, Variables>,
+      Data,
       FirebaseError,
-      FlattenedQueryResult<Data, Variables>,
+      Data,
       QueryKey
     >({
       ...options,

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 QueryRef,
@@ -10,7 +10,7 @@ import {
 import type { PartialBy } from "../../utils";
 import {
   QueryResultRequiredRef,
-  UseDataConnectQuery,
+  UseDataConnectQueryResult,
 } from "./types";
 import { useState } from "react";
 
@@ -26,15 +26,18 @@ export function useDataConnectQuery<Data = unknown, Variables = unknown>(
     FirebaseError
   >,
   _callerSdkType: CallerSdkType = CallerSdkTypeEnum.TanstackReactCore
-): UseDataConnectQuery<Data, Variables> {
+): UseDataConnectQueryResult<Data, Variables> {
   const [dataConnectResult, setDataConnectResult] = useState<QueryResultRequiredRef<Data, Variables>>('ref' in refOrResult ? refOrResult : { ref: refOrResult });
-  let initialData: Data | undefined;
+  // 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`.