docs(useConnectMutation): add useConnectMutation docs

docs.json

@@ -57,7 +57,7 @@
           "title": "useConnectQuery"
         },
         {
-          "href": "/react/hooks/data-connect/useConnectQuery",
+          "href": "/react/hooks/data-connect/useConnectMutation",
           "title": "useConnectMutation"
         }
       ]

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>creatt</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 "./useConnectQuery";
+import { listMoviesQuery } from "@/your-package-name/your-connector";
+
+function Component() {
+  const { mutate, isPending, isSuccess, isError, error } =
+    useConnectMutation(createMovieMutation);
+
+  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>
+  );
+}
+```