docs(useConnectQuery): add useConnectQuery docs

docs.json

@@ -53,7 +53,7 @@
       "group": "Data Connect",
       "pages": [
         {
-          "href": "/react/hooks/auth/useSignInAnonymouslyMutation",
+          "href": "/react/hooks/data-connect/useConnectQuery",
           "title": "useConnectQuery"
         },
         {

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

@@ -0,0 +1,42 @@
+---
+title: useConnectQuery
+---
+
+`useConnectQuery` is a custom 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 type-safe handling of queries based on the Firebase Data Connect schema.
+- Simplifies data fetching using Firebase Data Connect.
+- Automatically manages loading, success, and error states.
+- Supports refetching data with integrated caching.
+
+## Usage
+
+```jsx
+import { useConnectQuery } from "./useConnectQuery";
+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>
+  );
+}
+```