docs: add useConnectQuery and useConnectMutation

.gitignore

@@ -10,3 +10,6 @@ dist
 
 functions/lib/**/*.js
 functions/lib/**/*.js.map
+
+# Firebase cache
+.firebase/

docs.json

@@ -48,6 +48,20 @@
         }
       ]
     },
+    {
+      "tab": "react",
+      "group": "Data Connect",
+      "pages": [
+        {
+          "href": "/react/hooks/data-connect/useConnectQuery",
+          "title": "useConnectQuery"
+        },
+        {
+          "href": "/react/hooks/data-connect/useConnectMutation",
+          "title": "useConnectMutation"
+        }
+      ]
+    },
     {
       "tab": "react",
       "group": "Firestore",

docs/react/hooks/data-connect/useConnectMutation.mdx

@@ -0,0 +1,49 @@
+---
+title: useConnectMutation
+---
+
+`useConnectMutation` is a hook designed to simplify handling mutations (creating, updating, deleting) with Firebase Data Connect.
+This hook integrates with [Firebase Data Connect](https://firebase.google.com/docs/data-connect), which uses GraphQL to interact with a PostgreSQL database (via Cloud SQL) for secure, scalable data operations.
+The hook manages the mutation process and provides an easy-to-use interface to manage loading, success, and error states in your React application.
+
+## Features
+
+- Simplifies mutation handling for <b>create</b>, <b>update</b>, and <b>delete</b> operations using Firebase Data Connect.
+- Provides <b>type-safe</b> handling of mutations based on your Firebase Data Connect schema.
+- Automatically manages <b>loading</b>, <b>success</b>, and <b>error</b> states for mutations.
+- Supports <b>optimistic updates</b> and <b>caching</b> to improve user experience and performance.
+
+## Usage
+
+```jsx
+import { useConnectQuery } from "@tanstack-query-firebase/react";
+import { createMovieRef } from "@your-package-name/your-connector";
+
+function Component() {
+  const { mutate, isPending, isSuccess, isError, error } =
+    useConnectMutation(createMovieRef);
+
+  const handleSubmit = async (movieData) => {
+    try {
+      await mutate(movieData);
+    } catch (err) {
+      console.error("Failed to add movie:", err);
+    }
+  };
+
+  if (isPending) return <div>Adding movie...</div>;
+  if (isError) return <div>Error: {error.message}</div>;
+
+  return (
+    <div>
+      {isSuccess && <div>Movie added successfully!</div>}
+      <form onSubmit={(e) => handleSubmit(e.target)}>
+        {/* Form fields for movie data */}
+        <button type="submit" disabled={isPending}>
+          Add Movie
+        </button>
+      </form>
+    </div>
+  );
+}
+```

docs/react/hooks/data-connect/useConnectQuery.mdx

@@ -0,0 +1,42 @@
+---
+title: useConnectQuery
+---
+
+`useConnectQuery` is a hook designed to simplify data fetching and state management with Firebase Data Connect.
+This hook integrates with [Firebase Data Connect](https://firebase.google.com/docs/data-connect), which leverages GraphQL to interact with a PostgreSQL database (via Cloud SQL) for secure, scalable data operations.
+The hook simplifies the process of querying data from Firebase Data Connect and provides an easy-to-use interface to manage loading, success, and error states in your React application.
+
+## Features
+
+- Provides <b>type-safe</b> handling of queries based on the Firebase Data Connect schema.
+- Simplifies data fetching using Firebase Data Connect.
+- Automatically manages <b>loading</b>, <b>success</b>, and <b>error</b> states.
+- Supports <b>refetching data</b> with integrated <b>caching</b>.
+
+## Usage
+
+```jsx
+import { useConnectQuery } from "@tanstack-query-firebase/react";
+import { listMoviesQuery } from "@your-package-name/your-connector";
+
+function Component() {
+  const { data, isPending, isSuccess, isError, error } = useConnectQuery(
+    listMoviesQuery()
+  );
+
+  if (isPending) return <div>Loading...</div>;
+  if (isError) return <div>Error: {error.message}</div>;
+
+  return (
+    <div>
+      {isSuccess && (
+        <ul>
+          {data.movies.map((movie) => (
+            <li key={movie.id}>{movie.title}</li>
+          ))}
+        </ul>
+      )}
+    </div>
+  );
+}
+```