Merge pull request #137 from HassanBahati/rename-dc-hooks-upgrade-firebase

Ehesp · web-flow · commit 950213aa2bcf · 2024-12-25T06:48:34.000Z
diff --git a/dataconnect-sdk/js/default-connector/package.json b/dataconnect-sdk/js/default-connector/package.json
@@ -20,6 +20,6 @@
     "./package.json": "./package.json"
   },
   "peerDependencies": {
-    "firebase": "^10.14.0"
+    "firebase": "^10.14.0 || ^11.0.0"
   }
 }
diff --git a/docs.json b/docs.json
@@ -117,12 +117,12 @@
           "group": "Hooks",
           "pages": [
             {
-              "title": "useConnectQuery",
-              "href": "/react/data-connect/hooks/useConnectQuery"
+              "title": "useDataConnectQuery",
+              "href": "/react/data-connect/hooks/useDataConnectQuery"
             },
             {
-              "title": "useConnectMutation",
-              "href": "/react/data-connect/hooks/useConnectMutation"
+              "title": "useDataConnectMutation",
+              "href": "/react/data-connect/hooks/useDataConnectMutation"
             }
           ]
         }
diff --git a/docs/react/data-connect/hooks/useDataConnectMutation.mdx b/docs/react/data-connect/hooks/useDataConnectMutation.mdx
@@ -1,8 +1,8 @@
 ---
-title: useConnectMutation
+title: useDataConnectMutation
 ---
 
-`useConnectMutation` is a hook designed to simplify handling mutations (creating, updating, deleting) with Firebase Data Connect.
+`useDataConnectMutation` is a hook designed to simplify handling mutations (creating, updating, deleting) with Firebase Data Connect.
 
 See [mutations](/react/data-connect/mutations) for more information.
 
@@ -16,12 +16,12 @@ See [mutations](/react/data-connect/mutations) for more information.
 ## Usage
 
 ```jsx
-import { useConnectQuery } from "@tanstack-query-firebase/react/data-connect";
+import { useDataConnectQuery } from "@tanstack-query-firebase/react/data-connect";
 import { createMovieRef } from "@your-package-name/your-connector";
 
 function Component() {
   const { mutate, isPending, isSuccess, isError, error } =
-    useConnectMutation(createMovieRef);
+    useDataConnectMutation(createMovieRef);
 
   const handleFormSubmit = (e: React.FormEvent) => {
     e.preventDefault();
diff --git a/docs/react/data-connect/hooks/useDataConnectQuery.mdx b/docs/react/data-connect/hooks/useDataConnectQuery.mdx
@@ -1,8 +1,8 @@
 ---
-title: useConnectQuery
+title: useDataConnectQuery
 ---
 
-`useConnectQuery` is a hook designed to simplify data fetching and state management with Firebase Data Connect.
+`useDataConnectQuery` is a hook designed to simplify data fetching and state management with Firebase Data Connect.
 
 See [querying](/react/data-connect/querying) for more information.
 
@@ -16,11 +16,11 @@ See [querying](/react/data-connect/querying) for more information.
 ## Usage
 
 ```jsx
-import { useConnectQuery } from "@tanstack-query-firebase/react/data-connect";
+import { useDataConnectQuery } from "@tanstack-query-firebase/react/data-connect";
 import { listMoviesQuery } from "@your-package-name/your-connector";
 
 function Component() {
-  const { data, isPending, isSuccess, isError, error } = useConnectQuery(
+  const { data, isPending, isSuccess, isError, error } = useDataConnectQuery(
     listMoviesQuery()
   );
 
diff --git a/docs/react/data-connect/index.mdx b/docs/react/data-connect/index.mdx
@@ -31,19 +31,19 @@ connectDataConnectEmulator(dataConnect, "localhost", 9399);
 The package exports are available via the `@tanstack-query-firebase/react` package under the `data-connect` namespace:
 
 ```ts
-import { useConnectQuery } from "@tanstack-query-firebase/react/data-connect";
+import { useDataConnectQuery } from "@tanstack-query-firebase/react/data-connect";
 ```
 
 ## Basic Usage
 
-To use the Tanstack Query Firebase hooks for Data Connect, you can use the `useConnectQuery` hook to fetch data from the database:
+To use the Tanstack Query Firebase hooks for Data Connect, you can use the `useDataConnectQuery` hook to fetch data from the database:
 
 ```tsx
-import { useConnectQuery } from "@tanstack-query-firebase/react/data-connect";
+import { useDataConnectQuery } from "@tanstack-query-firebase/react/data-connect";
 import { listMoviesRef } from "../../dataconnect/default-connector";
 
 function Component() {
-  const { data, isPending, isSuccess, isError, error } = useConnectQuery(
+  const { data, isPending, isSuccess, isError, error } = useDataConnectQuery(
     listMoviesRef()
   );
 
diff --git a/docs/react/data-connect/mutations.mdx b/docs/react/data-connect/mutations.mdx
@@ -5,14 +5,14 @@ description: Learn how to mutate data in Firebase Data Connect using the Tanstac
 
 ## Mutating Data
 
-To mutate data in Firebase Data Connect, you can use the `useConnectMutation` hook. 
+To mutate data in Firebase Data Connect, you can use the `useDataConnectMutation` hook. 
 
 ```tsx
-import { useConnectMutation } from "@tanstack-query-firebase/react/data-connect";
+import { useDataConnectMutation } from "@tanstack-query-firebase/react/data-connect";
 import { createMovieRef } from "@dataconnect/default-connector";
 
 function Component() {
-  const createMovie = useConnectMutation(
+  const createMovie = useDataConnectMutation(
     createMovieRef
   );
 
@@ -38,7 +38,7 @@ function Component() {
 The hook provides an additional [mutation option](https://tanstack.com/query/latest/docs/framework/react/reference/useMutation) called `invalidate`. This option accepts a list of query references which will be automatically invalidated when the mutation is successful.
 
 ```tsx
-const createMovie = useConnectMutation(createMovieRef, {
+const createMovie = useDataConnectMutation(createMovieRef, {
   invalidate: [getMovieRef],
 });
 ```
@@ -57,7 +57,7 @@ getMovieRef({ id: "2"});
 You can also provide explicit references to the invalidate array, for example:
 
 ```tsx
-const createMovie = useConnectMutation(createMovieRef, {
+const createMovie = useDataConnectMutation(createMovieRef, {
   invalidate: [getMovieRef({ id: "1" })],
 });
 ```
@@ -71,7 +71,7 @@ In this case only the query reference `getMovieRef({ id: "1" })` will be invalid
 Along with the data, the hook will also return the `ref`, `source`, and `fetchTime` metadata from the mutation.
 
 ```tsx
-const createMovie = useConnectMutation(createMovieRef);
+const createMovie = useDataConnectMutation(createMovieRef);
 
 const data = await createMovie.mutateAsync({
   title: 'John Wick',
diff --git a/docs/react/data-connect/querying.mdx b/docs/react/data-connect/querying.mdx
@@ -5,25 +5,25 @@ description: Learn how to query data from Firebase Data Connect using the Tansta
 
 ## Querying Data
 
-To query data from Firebase Data Connect, you can use the `useConnectQuery` hook. This hook will automatically infer the data type from the connector and the query and automtically create a [query key](https://tanstack.com/query/latest/docs/framework/react/guides/query-keys) for the query.
+To query data from Firebase Data Connect, you can use the `useDataConnectQuery` hook. This hook will automatically infer the data type from the connector and the query and automtically create a [query key](https://tanstack.com/query/latest/docs/framework/react/guides/query-keys) for the query.
 
 ```tsx
-import { useConnectQuery } from "@tanstack-query-firebase/react/data-connect";
+import { useDataConnectQuery } from "@tanstack-query-firebase/react/data-connect";
 import { listMoviesRef } from "@dataconnect/default-connector";
 
 function Component() {
-  const { data, isPending, isSuccess, isError, error } = useConnectQuery(
+  const { data, isPending, isSuccess, isError, error } = useDataConnectQuery(
     listMoviesRef()
   );
 }
 ```
 
 ### Query options
 
-To leverage the full power of Tanstack Query, you can pass in query options to the `useConnectQuery` hook, for example to refetch the query on a interval:
+To leverage the full power of Tanstack Query, you can pass in query options to the `useDataConnectQuery` hook, for example to refetch the query on a interval:
 
 ```tsx
-const { data, isPending, isSuccess, isError, error } = useConnectQuery(
+const { data, isPending, isSuccess, isError, error } = useDataConnectQuery(
   listMoviesRef(),
   {
     refetchInterval: 1000,
@@ -35,10 +35,10 @@ The hook extends the [`useQuery`](https://tanstack.com/query/latest/docs/framewo
 
 ### Overriding the query key
 
-To override the query key, you can pass in a custom query key to the `useConnectQuery` hook:
+To override the query key, you can pass in a custom query key to the `useDataConnectQuery` hook:
 
 ```tsx
-const { data, isPending, isSuccess, isError, error } = useConnectQuery(
+const { data, isPending, isSuccess, isError, error } = useDataConnectQuery(
   getMovieRef({ id: "1" }),
   {
     queryKey: ["movies", "1"],
@@ -59,7 +59,7 @@ const movies = await executeQuery(listMoviesRef());
 // ...
 
 function Component(props: { movies: QueryResult<ListMoviesData, unknown> }) {
-  const { data, isPending, isSuccess, isError, error } = useConnectQuery(
+  const { data, isPending, isSuccess, isError, error } = useDataConnectQuery(
     props.movies
   );
 }
@@ -72,7 +72,7 @@ The hook will immediately have data available, and immediately refetch the data
 Along with the data, the hook will also return the `ref`, `source`, and `fetchTime` metadata from the query.
 
 ```tsx
-const { data } = useConnectQuery(listMoviesRef());
+const { data } = useDataConnectQuery(listMoviesRef());
 
 console.log(data?.ref);
 console.log(data?.source);
diff --git a/docs/react/data-connect/server-side-rendering.mdx b/docs/react/data-connect/server-side-rendering.mdx
@@ -45,7 +45,7 @@ export default function MoviesRoute({
 }
 
 function Movies() {
-  const movies = useConnectQuery(listMoviesRef());
+  const movies = useDataConnectQuery(listMoviesRef());
 
   if (movies.isLoading) {
     return <div>Loading...</div>;
@@ -94,13 +94,13 @@ export default async function PostsPage() {
 }
 
 function Movies() {
-  const movies = useConnectQuery(listMoviesRef());
+  const movies = useDataConnectQuery(listMoviesRef());
   
   // ... 
 }
 ```
 
 ### Gotchas
 
-- If you opt-in to providing a custom `queryKey` to either the prefetched data or the `useConnectQuery` hook, you must ensure that the `queryKey` is the same for both.
+- If you opt-in to providing a custom `queryKey` to either the prefetched data or the `useDataConnectQuery` hook, you must ensure that the `queryKey` is the same for both.
 - By default, the client will always refetch data in the background. If this behaviour is not desired, you can set the `staleTime` option in your Query Client or hook options.
diff --git a/examples/react-example/package.json b/examples/react-example/package.json
@@ -12,7 +12,7 @@
     "@tanstack/react-query": "^5.55.4",
     "@tanstack-query-firebase/react": "link:../../packages/react",
     "@dataconnect/default-connector": "workspace:*",
-    "firebase": "^10.14.1",
+    "firebase": "^11.0.0",
     "next": "15.1.0",
     "react": "^19.0.0",
     "react-dom": "^19.0.0"
diff --git a/examples/react-example/src/examples/data-connect.tsx b/examples/react-example/src/examples/data-connect.tsx
@@ -2,16 +2,16 @@
 
 import { createMovieRef, listMoviesRef } from "@dataconnect/default-connector";
 import {
-	useConnectMutation,
-	useConnectQuery,
+	useDataConnectMutation,
+	useDataConnectQuery,
 } from "@tanstack-query-firebase/react/data-connect";
 
 import "@/firebase";
 
 export function Movies() {
-	const movies = useConnectQuery(listMoviesRef());
+	const movies = useDataConnectQuery(listMoviesRef());
 
-	const addMovie = useConnectMutation(createMovieRef, {
+	const addMovie = useDataConnectMutation(createMovieRef, {
 		invalidate: [listMoviesRef],
 	});
 
diff --git a/package.json b/package.json
@@ -4,15 +4,15 @@
   "scripts": {
     "test": "vitest --dom --coverage",
     "serve:coverage": "npx serve coverage",
-    "emulator": "firebase emulators:start --project test-project",
+    "emulator": "firebase emulators:start --project demo-projectc",
     "emulator:kill": "lsof -t -i:4001 -i:8080 -i:9000 -i:9099 -i:9199 -i:8085 | xargs kill -9"
   },
   "devDependencies": {
     "@biomejs/biome": "1.9.4",
     "@tanstack/react-query": "^5.55.4",
     "@types/jsonwebtoken": "^9.0.7",
     "@vitest/coverage-istanbul": "^2.0.5",
-    "firebase": "^10.14.1",
+    "firebase": "^11.1.0",
     "happy-dom": "^15.7.3",
     "jsonwebtoken": "^9.0.2",
     "react": "^19.0.0",
diff --git a/packages/react/package.json b/packages/react/package.json
@@ -37,7 +37,7 @@
 		"@dataconnect/default-connector": "workspace:*"
 	},
 	"peerDependencies": {
-		"firebase": "^10.14.0",
+		"firebase": "^11.1.0",
 		"@tanstack/react-query": "^5.55.4"
 	}
 }
diff --git a/packages/react/src/auth/useDeleteUserMutation.test.tsx b/packages/react/src/auth/useDeleteUserMutation.test.tsx
@@ -1,7 +1,7 @@
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { act, renderHook, waitFor } from "@testing-library/react";
 import { type User, createUserWithEmailAndPassword } from "firebase/auth";
-import type React from "react";
+import React from "react";
 import { afterEach, beforeEach, describe, expect, test, vi } from "vitest";
 import { auth, wipeAuth } from "~/testing-utils";
 import { useDeleteUserMutation } from "./useDeleteUserMutation";
diff --git a/packages/react/src/auth/useReloadMutation.test.tsx b/packages/react/src/auth/useReloadMutation.test.tsx
@@ -5,7 +5,7 @@ import {
 	createUserWithEmailAndPassword,
 	signInWithEmailAndPassword,
 } from "firebase/auth";
-import type React from "react";
+import React from "react";
 import { afterEach, beforeEach, describe, expect, test, vi } from "vitest";
 import { auth, wipeAuth } from "~/testing-utils";
 import { useReloadMutation } from "./useReloadMutation";
diff --git a/packages/react/src/auth/useSendSignInLinkToEmailMutation.test.tsx b/packages/react/src/auth/useSendSignInLinkToEmailMutation.test.tsx
@@ -1,6 +1,6 @@
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { act, renderHook, waitFor } from "@testing-library/react";
-import type React from "react";
+import React from "react";
 import { beforeEach, describe, expect, test } from "vitest";
 import { auth, wipeAuth } from "~/testing-utils";
 import { useSendSignInLinkToEmailMutation } from "./useSendSignInLinkToEmailMutation";
diff --git a/packages/react/src/auth/useSignInAnonymouslyMutation.test.tsx b/packages/react/src/auth/useSignInAnonymouslyMutation.test.tsx
@@ -1,6 +1,6 @@
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { act, renderHook, waitFor } from "@testing-library/react";
-import type React from "react";
+import React from "react";
 import {
 	type MockInstance,
 	afterEach,
diff --git a/packages/react/src/auth/useSignInWithCredentialMutation.test.tsx b/packages/react/src/auth/useSignInWithCredentialMutation.test.tsx
@@ -2,7 +2,7 @@ import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { act, renderHook, waitFor } from "@testing-library/react";
 import { GoogleAuthProvider } from "firebase/auth";
 import jwt from "jsonwebtoken";
-import type React from "react";
+import React from "react";
 import { afterEach, beforeEach, describe, expect, test, vi } from "vitest";
 import { auth, expectFirebaseError, wipeAuth } from "~/testing-utils";
 import { useSignInWithCredentialMutation } from "./useSignInWithCredentialMutation";
diff --git a/packages/react/src/auth/useSignInWithEmailAndPasswordMutation.test.tsx b/packages/react/src/auth/useSignInWithEmailAndPasswordMutation.test.tsx
@@ -1,7 +1,7 @@
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { act, renderHook, waitFor } from "@testing-library/react";
 import { createUserWithEmailAndPassword } from "firebase/auth";
-import type React from "react";
+import React from "react";
 import { afterEach, beforeEach, describe, expect, test, vi } from "vitest";
 import { auth, wipeAuth } from "~/testing-utils";
 import { useSignInWithEmailAndPasswordMutation } from "./useSignInWithEmailAndPasswordMutation";
diff --git a/packages/react/src/auth/useSignOutMutation.test.tsx b/packages/react/src/auth/useSignOutMutation.test.tsx
@@ -4,7 +4,7 @@ import {
 	createUserWithEmailAndPassword,
 	signInWithEmailAndPassword,
 } from "firebase/auth";
-import type React from "react";
+import React from "react";
 import { beforeEach, describe, expect, test, vi } from "vitest";
 import { auth, wipeAuth } from "~/testing-utils";
 import { useSignOutMutation } from "./useSignOutMutation";
diff --git a/packages/react/src/auth/useUpdateCurrentUserMutation.test.tsx b/packages/react/src/auth/useUpdateCurrentUserMutation.test.tsx
@@ -5,7 +5,7 @@ import {
 	createUserWithEmailAndPassword,
 	signInWithEmailAndPassword,
 } from "firebase/auth";
-import type React from "react";
+import React from "react";
 import { afterEach, beforeEach, describe, expect, test, vi } from "vitest";
 import { auth, wipeAuth } from "~/testing-utils";
 import { useUpdateCurrentUserMutation } from "./useUpdateCurrentUserMutation";
diff --git a/packages/react/src/auth/useVerifyPasswordResetCodeMutation.test.tsx b/packages/react/src/auth/useVerifyPasswordResetCodeMutation.test.tsx
@@ -4,7 +4,7 @@ import {
 	createUserWithEmailAndPassword,
 	sendPasswordResetEmail,
 } from "firebase/auth";
-import type React from "react";
+import React from "react";
 import { afterEach, beforeEach, describe, expect, test, vi } from "vitest";
 import { auth, wipeAuth } from "~/testing-utils";
 import { useVerifyPasswordResetCodeMutation } from "./useVerifyPasswordResetCodeMutation";
diff --git a/packages/react/src/data-connect/index.ts b/packages/react/src/data-connect/index.ts
@@ -1,12 +1,12 @@
 export {
-	DataConnectQueryClient,
-	type DataConnectQueryOptions,
+  DataConnectQueryClient,
+  type DataConnectQueryOptions,
 } from "./query-client";
 export {
-	useConnectQuery,
-	type UseConnectQueryOptions,
-} from "./useConnectQuery";
+  useDataConnectQuery,
+  type useDataConnectQueryOptions,
+} from "./useDataConnectQuery";
 export {
-	useConnectMutation,
-	type UseConnectMutationOptions,
-} from "./useConnectMutation";
+  useDataConnectMutation,
+  type useDataConnectMutationOptions,
+} from "./useDataConnectMutation";
diff --git a/packages/react/src/data-connect/useDataConnectMutation.test.tsx b/packages/react/src/data-connect/useDataConnectMutation.test.tsx
diff --git a/packages/react/src/data-connect/useDataConnectMutation.ts b/packages/react/src/data-connect/useDataConnectMutation.ts
diff --git a/packages/react/src/data-connect/useDataConnectQuery.test.tsx b/packages/react/src/data-connect/useDataConnectQuery.test.tsx
diff --git a/packages/react/src/data-connect/useDataConnectQuery.ts b/packages/react/src/data-connect/useDataConnectQuery.ts
diff --git a/packages/react/src/firestore/useClearIndexedDbPersistenceMutation.test.tsx b/packages/react/src/firestore/useClearIndexedDbPersistenceMutation.test.tsx
diff --git a/packages/react/src/firestore/useDisableNetworkMutation.test.tsx b/packages/react/src/firestore/useDisableNetworkMutation.test.tsx
diff --git a/packages/react/src/firestore/useRunTransactionMutation.test.tsx b/packages/react/src/firestore/useRunTransactionMutation.test.tsx
diff --git a/packages/react/src/firestore/useWaitForPendingWritesQuery.test.tsx b/packages/react/src/firestore/useWaitForPendingWritesQuery.test.tsx
diff --git a/packages/react/src/firestore/useWriteBatchCommitMutation.test.tsx b/packages/react/src/firestore/useWriteBatchCommitMutation.test.tsx
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/vitest/utils.ts b/vitest/utils.ts

Original file line number	Diff line number	Diff line change
`@@ -20,6 +20,6 @@`
`20`	`20`	`"./package.json": "./package.json"`
`21`	`21`	`},`
`22`	`22`	`"peerDependencies": {`
`23`		`- "firebase": "^10.14.0"`
	`23`	`+ "firebase": "^10.14.0 \|\| ^11.0.0"`
`24`	`24`	`}`
`25`	`25`	`}`
Original file line number	Diff line number	Diff line change
`@@ -117,12 +117,12 @@`
`117`	`117`	`"group": "Hooks",`
`118`	`118`	`"pages": [`
`119`	`119`	`{`
`120`		`- "title": "useConnectQuery",`
`121`		`- "href": "/react/data-connect/hooks/useConnectQuery"`
	`120`	`+ "title": "useDataConnectQuery",`
	`121`	`+ "href": "/react/data-connect/hooks/useDataConnectQuery"`
`122`	`122`	`},`
`123`	`123`	`{`
`124`		`- "title": "useConnectMutation",`
`125`		`- "href": "/react/data-connect/hooks/useConnectMutation"`
	`124`	`+ "title": "useDataConnectMutation",`
	`125`	`+ "href": "/react/data-connect/hooks/useDataConnectMutation"`
`126`	`126`	`}`
`127`	`127`	`]`
`128`	`128`	`}`
Original file line number	Diff line number	Diff line change
`@@ -45,7 +45,7 @@ export default function MoviesRoute({`
`45`	`45`	`}`
`46`	`46`
`47`	`47`	`function Movies() {`
`48`		`- const movies = useConnectQuery(listMoviesRef());`
	`48`	`+ const movies = useDataConnectQuery(listMoviesRef());`
`49`	`49`
`50`	`50`	`if (movies.isLoading) {`
`51`	`51`	`return <div>Loading...</div>;`
`@@ -94,13 +94,13 @@ export default async function PostsPage() {`
`94`	`94`	`}`
`95`	`95`
`96`	`96`	`function Movies() {`
`97`		`- const movies = useConnectQuery(listMoviesRef());`
	`97`	`+ const movies = useDataConnectQuery(listMoviesRef());`
`98`	`98`
`99`	`99`	`// ...`
`100`	`100`	`}`
`101`	`101`	```
`102`	`102`
`103`	`103`	`### Gotchas`
`104`	`104`
`105`		-- If you opt-in to providing a custom `queryKey` to either the prefetched data or the `useConnectQuery` hook, you must ensure that the `queryKey` is the same for both.
	`105`	+- If you opt-in to providing a custom `queryKey` to either the prefetched data or the `useDataConnectQuery` hook, you must ensure that the `queryKey` is the same for both.
`106`	`106`	- By default, the client will always refetch data in the background. If this behaviour is not desired, you can set the `staleTime` option in your Query Client or hook options.