Fixed issue where updated variables weren't getting picked up

Author: maneesht

dataconnect-sdk/js/default-connector/README.md

@@ -28,7 +28,7 @@ A connector is a collection of Queries and Mutations. One SDK is generated for e
 You can find more information about connectors in the [Data Connect documentation](https://firebase.google.com/docs/data-connect#how-does).
 
 ```javascript
-import { getDataConnect, DataConnect } from 'firebase/data-connect';
+import { getDataConnect } from 'firebase/data-connect';
 import { connectorConfig } from '@dataconnect/default-connector';
 
 const dataConnect = getDataConnect(connectorConfig);
@@ -41,7 +41,7 @@ To connect to the emulator, you can use the following code.
 You can also follow the emulator instructions from the [Data Connect documentation](https://firebase.google.com/docs/data-connect/web-sdk#instrument-clients).
 
 ```javascript
-import { connectDataConnectEmulator, getDataConnect, DataConnect } from 'firebase/data-connect';
+import { connectDataConnectEmulator, getDataConnect } from 'firebase/data-connect';
 import { connectorConfig } from '@dataconnect/default-connector';
 
 const dataConnect = getDataConnect(connectorConfig);
@@ -98,7 +98,7 @@ export interface ListMoviesData {
 ### Using `ListMovies`'s action shortcut function
 
 ```javascript
-import { getDataConnect, DataConnect } from 'firebase/data-connect';
+import { getDataConnect } from 'firebase/data-connect';
 import { connectorConfig, listMovies } from '@dataconnect/default-connector';
 
 
@@ -122,7 +122,7 @@ listMovies().then((response) => {
 ### Using `ListMovies`'s `QueryRef` function
 
 ```javascript
-import { getDataConnect, DataConnect, executeQuery } from 'firebase/data-connect';
+import { getDataConnect, executeQuery } from 'firebase/data-connect';
 import { connectorConfig, listMoviesRef } from '@dataconnect/default-connector';
 
 
@@ -185,7 +185,7 @@ export interface GetMovieByIdData {
 ### Using `GetMovieById`'s action shortcut function
 
 ```javascript
-import { getDataConnect, DataConnect } from 'firebase/data-connect';
+import { getDataConnect } from 'firebase/data-connect';
 import { connectorConfig, getMovieById, GetMovieByIdVariables } from '@dataconnect/default-connector';
 
 // The `GetMovieById` query requires an argument of type `GetMovieByIdVariables`:
@@ -215,7 +215,7 @@ getMovieById(getMovieByIdVars).then((response) => {
 ### Using `GetMovieById`'s `QueryRef` function
 
 ```javascript
-import { getDataConnect, DataConnect, executeQuery } from 'firebase/data-connect';
+import { getDataConnect, executeQuery } from 'firebase/data-connect';
 import { connectorConfig, getMovieByIdRef, GetMovieByIdVariables } from '@dataconnect/default-connector';
 
 // The `GetMovieById` query requires an argument of type `GetMovieByIdVariables`:
@@ -275,7 +275,7 @@ export interface GetMetaData {
 ### Using `GetMeta`'s action shortcut function
 
 ```javascript
-import { getDataConnect, DataConnect } from 'firebase/data-connect';
+import { getDataConnect } from 'firebase/data-connect';
 import { connectorConfig, getMeta } from '@dataconnect/default-connector';
 
 
@@ -299,7 +299,7 @@ getMeta().then((response) => {
 ### Using `GetMeta`'s `QueryRef` function
 
 ```javascript
-import { getDataConnect, DataConnect, executeQuery } from 'firebase/data-connect';
+import { getDataConnect, executeQuery } from 'firebase/data-connect';
 import { connectorConfig, getMetaRef } from '@dataconnect/default-connector';
 
 
@@ -374,7 +374,7 @@ export interface CreateMovieData {
 ### Using `CreateMovie`'s action shortcut function
 
 ```javascript
-import { getDataConnect, DataConnect } from 'firebase/data-connect';
+import { getDataConnect } from 'firebase/data-connect';
 import { connectorConfig, createMovie, CreateMovieVariables } from '@dataconnect/default-connector';
 
 // The `CreateMovie` mutation requires an argument of type `CreateMovieVariables`:
@@ -406,7 +406,7 @@ createMovie(createMovieVars).then((response) => {
 ### Using `CreateMovie`'s `MutationRef` function
 
 ```javascript
-import { getDataConnect, DataConnect, executeMutation } from 'firebase/data-connect';
+import { getDataConnect, executeMutation } from 'firebase/data-connect';
 import { connectorConfig, createMovieRef, CreateMovieVariables } from '@dataconnect/default-connector';
 
 // The `CreateMovie` mutation requires an argument of type `CreateMovieVariables`:
@@ -474,7 +474,7 @@ export interface UpsertMovieData {
 ### Using `UpsertMovie`'s action shortcut function
 
 ```javascript
-import { getDataConnect, DataConnect } from 'firebase/data-connect';
+import { getDataConnect } from 'firebase/data-connect';
 import { connectorConfig, upsertMovie, UpsertMovieVariables } from '@dataconnect/default-connector';
 
 // The `UpsertMovie` mutation requires an argument of type `UpsertMovieVariables`:
@@ -506,7 +506,7 @@ upsertMovie(upsertMovieVars).then((response) => {
 ### Using `UpsertMovie`'s `MutationRef` function
 
 ```javascript
-import { getDataConnect, DataConnect, executeMutation } from 'firebase/data-connect';
+import { getDataConnect, executeMutation } from 'firebase/data-connect';
 import { connectorConfig, upsertMovieRef, UpsertMovieVariables } from '@dataconnect/default-connector';
 
 // The `UpsertMovie` mutation requires an argument of type `UpsertMovieVariables`:
@@ -572,7 +572,7 @@ export interface DeleteMovieData {
 ### Using `DeleteMovie`'s action shortcut function
 
 ```javascript
-import { getDataConnect, DataConnect } from 'firebase/data-connect';
+import { getDataConnect } from 'firebase/data-connect';
 import { connectorConfig, deleteMovie, DeleteMovieVariables } from '@dataconnect/default-connector';
 
 // The `DeleteMovie` mutation requires an argument of type `DeleteMovieVariables`:
@@ -602,7 +602,7 @@ deleteMovie(deleteMovieVars).then((response) => {
 ### Using `DeleteMovie`'s `MutationRef` function
 
 ```javascript
-import { getDataConnect, DataConnect, executeMutation } from 'firebase/data-connect';
+import { getDataConnect, executeMutation } from 'firebase/data-connect';
 import { connectorConfig, deleteMovieRef, DeleteMovieVariables } from '@dataconnect/default-connector';
 
 // The `DeleteMovie` mutation requires an argument of type `DeleteMovieVariables`:
@@ -660,7 +660,7 @@ export interface AddMetaData {
 ### Using `AddMeta`'s action shortcut function
 
 ```javascript
-import { getDataConnect, DataConnect } from 'firebase/data-connect';
+import { getDataConnect } from 'firebase/data-connect';
 import { connectorConfig, addMeta } from '@dataconnect/default-connector';
 
 
@@ -684,7 +684,7 @@ addMeta().then((response) => {
 ### Using `AddMeta`'s `MutationRef` function
 
 ```javascript
-import { getDataConnect, DataConnect, executeMutation } from 'firebase/data-connect';
+import { getDataConnect, executeMutation } from 'firebase/data-connect';
 import { connectorConfig, addMetaRef } from '@dataconnect/default-connector';
 
 
@@ -742,7 +742,7 @@ export interface DeleteMetaData {
 ### Using `DeleteMeta`'s action shortcut function
 
 ```javascript
-import { getDataConnect, DataConnect } from 'firebase/data-connect';
+import { getDataConnect } from 'firebase/data-connect';
 import { connectorConfig, deleteMeta, DeleteMetaVariables } from '@dataconnect/default-connector';
 
 // The `DeleteMeta` mutation requires an argument of type `DeleteMetaVariables`:
@@ -772,7 +772,7 @@ deleteMeta(deleteMetaVars).then((response) => {
 ### Using `DeleteMeta`'s `MutationRef` function
 
 ```javascript
-import { getDataConnect, DataConnect, executeMutation } from 'firebase/data-connect';
+import { getDataConnect, executeMutation } from 'firebase/data-connect';
 import { connectorConfig, deleteMetaRef, DeleteMetaVariables } from '@dataconnect/default-connector';
 
 // The `DeleteMeta` mutation requires an argument of type `DeleteMetaVariables`:

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

@@ -12,62 +12,77 @@ exports.createMovieRef = function createMovieRef(dcOrVars, vars) {
   dcInstance._useGeneratedSdk();
   return mutationRef(dcInstance, 'CreateMovie', inputVars);
 }
+
 exports.createMovie = function createMovie(dcOrVars, vars) {
   return executeMutation(createMovieRef(dcOrVars, vars));
 };
+
 exports.upsertMovieRef = function upsertMovieRef(dcOrVars, vars) {
   const { dc: dcInstance, vars: inputVars} = validateArgs(connectorConfig, dcOrVars, vars, true);
   dcInstance._useGeneratedSdk();
   return mutationRef(dcInstance, 'UpsertMovie', inputVars);
 }
+
 exports.upsertMovie = function upsertMovie(dcOrVars, vars) {
   return executeMutation(upsertMovieRef(dcOrVars, vars));
 };
+
 exports.deleteMovieRef = function deleteMovieRef(dcOrVars, vars) {
   const { dc: dcInstance, vars: inputVars} = validateArgs(connectorConfig, dcOrVars, vars, true);
   dcInstance._useGeneratedSdk();
   return mutationRef(dcInstance, 'DeleteMovie', inputVars);
 }
+
 exports.deleteMovie = function deleteMovie(dcOrVars, vars) {
   return executeMutation(deleteMovieRef(dcOrVars, vars));
 };
+
 exports.addMetaRef = function addMetaRef(dc) {
   const { dc: dcInstance} = validateArgs(connectorConfig, dc, undefined);
   dcInstance._useGeneratedSdk();
   return mutationRef(dcInstance, 'AddMeta');
 }
+
 exports.addMeta = function addMeta(dc) {
   return executeMutation(addMetaRef(dc));
 };
+
 exports.deleteMetaRef = function deleteMetaRef(dcOrVars, vars) {
   const { dc: dcInstance, vars: inputVars} = validateArgs(connectorConfig, dcOrVars, vars, true);
   dcInstance._useGeneratedSdk();
   return mutationRef(dcInstance, 'DeleteMeta', inputVars);
 }
+
 exports.deleteMeta = function deleteMeta(dcOrVars, vars) {
   return executeMutation(deleteMetaRef(dcOrVars, vars));
 };
+
 exports.listMoviesRef = function listMoviesRef(dc) {
   const { dc: dcInstance} = validateArgs(connectorConfig, dc, undefined);
   dcInstance._useGeneratedSdk();
   return queryRef(dcInstance, 'ListMovies');
 }
+
 exports.listMovies = function listMovies(dc) {
   return executeQuery(listMoviesRef(dc));
 };
+
 exports.getMovieByIdRef = function getMovieByIdRef(dcOrVars, vars) {
   const { dc: dcInstance, vars: inputVars} = validateArgs(connectorConfig, dcOrVars, vars, true);
   dcInstance._useGeneratedSdk();
   return queryRef(dcInstance, 'GetMovieById', inputVars);
 }
+
 exports.getMovieById = function getMovieById(dcOrVars, vars) {
   return executeQuery(getMovieByIdRef(dcOrVars, vars));
 };
+
 exports.getMetaRef = function getMetaRef(dc) {
   const { dc: dcInstance} = validateArgs(connectorConfig, dc, undefined);
   dcInstance._useGeneratedSdk();
   return queryRef(dcInstance, 'GetMeta');
 }
+
 exports.getMeta = function getMeta(dc) {
   return executeQuery(getMetaRef(dc));
 };

packages/react/package.json

@@ -46,5 +46,9 @@
 	"peerDependencies": {
 		"@tanstack/react-query": "^5",
 		"firebase": "^11.3.0"
+	},
+	"dependencies": {
+		"@types/deep-equal": "^1.0.4",
+		"deep-equal": "^2.2.3"
 	}
 }

packages/react/src/data-connect/useDataConnectQuery.test.tsx

@@ -269,4 +269,44 @@ describe("useDataConnectQuery", () => {
       { id: movieId },
     ]);
   });
+
+  test("fetches new data when variables change", async () => {
+    const movieData1 = {
+      title: "tanstack query firebase 1",
+      genre: "library 1",
+      imageUrl: "https://invertase.io/1",
+    };
+    const createdMovie = await createMovie(movieData1);
+    const movieData2 = {
+      title: "tanstack query firebase 2",
+      genre: "library 2",
+      imageUrl: "https://invertase.io/2",
+    };
+    const createdMovie2 = await createMovie(movieData2);
+
+    const movieId = createdMovie?.data?.movie_insert?.id;
+    const movieId2 = createdMovie2?.data?.movie_insert?.id;
+    getMovieByIdRef({ id: movieId2 });
+    const ref = getMovieByIdRef({ id: movieId });
+    const { result } = renderHook(() => useDataConnectQuery(ref), {
+      wrapper,
+    });
+
+    await waitFor(() => {
+      expect(result.current.isSuccess).toBe(true);
+      expect(result.current.data?.movie?.title).toBe(movieData1?.title);
+      expect(result.current.data?.movie?.genre).toBe(movieData1?.genre);
+      expect(result.current.data?.movie?.imageUrl).toBe(movieData1?.imageUrl);
+    });
+    await act(async () => {
+      ref.variables.id = createdMovie2.data.movie_insert.id;
+      result.current.refetch();
+    });
+    await waitFor(() => {
+      expect(result.current.isSuccess).toBe(true);
+      expect(result.current.data?.movie?.title).toBe(movieData2?.title);
+      expect(result.current.data?.movie?.genre).toBe(movieData2?.genre);
+      expect(result.current.data?.movie?.imageUrl).toBe(movieData2?.imageUrl);
+    });
+  });
 });

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

@@ -3,6 +3,7 @@ import {
   type UseQueryOptions,
   useQuery,
 } from "@tanstack/react-query";
+import deepEqual from "deep-equal";
 import type { FirebaseError } from "firebase/app";
 import {
   type CallerSdkType,
@@ -11,7 +12,7 @@ import {
   type QueryResult,
   executeQuery,
 } from "firebase/data-connect";
-import { useState } from "react";
+import { useEffect, useMemo, useState } from "react";
 import type { PartialBy } from "../../utils";
 import type {
   QueryResultRequiredRef,
@@ -22,6 +23,11 @@ export type useDataConnectQueryOptions<
   TData = object,
   TError = FirebaseError,
 > = PartialBy<Omit<UseQueryOptions<TData, TError>, "queryFn">, "queryKey">;
+function getRef<Data, Variables>(
+  refOrResult: QueryRef<Data, Variables> | QueryResult<Data, Variables>,
+): QueryRef<Data, Variables> {
+  return "ref" in refOrResult ? refOrResult.ref : refOrResult;
+}
 
 export function useDataConnectQuery<Data = unknown, Variables = unknown>(
   refOrResult: QueryRef<Data, Variables> | QueryResult<Data, Variables>,
@@ -31,17 +37,24 @@ export function useDataConnectQuery<Data = unknown, Variables = unknown>(
   const [dataConnectResult, setDataConnectResult] = useState<
     QueryResultRequiredRef<Data, Variables>
   >("ref" in refOrResult ? refOrResult : { ref: refOrResult });
+  const [ref, setRef] = useState(dataConnectResult.ref);
   // 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;
+  const [initialData] = useState(
+    dataConnectResult.data || options?.initialData,
+  );
 
-  if ("ref" in refOrResult) {
-    initialData = {
-      ...refOrResult.data,
-    };
-  } else {
-    initialData = options?.initialData;
-  }
+  useEffect(() => {
+    setRef((oldRef) => {
+      const newRef = getRef(refOrResult);
+      if (
+        newRef.name !== oldRef.name ||
+        !deepEqual(oldRef, newRef, { strict: true })
+      ) {
+        return newRef;
+      }
+      return oldRef;
+    });
+  }, [refOrResult]);
 
   // @ts-expect-error function is hidden under `DataConnect`.
   ref.dataConnect._setCallerSdkType(_callerSdkType);