From aa81c41d8cdf72b2374fc4a8a438fb5a0cc6b40f Mon Sep 17 00:00:00 2001
From: Armando Navarro <adnavarro@google.com>
Date: Sun, 26 Jul 2026 04:52:04 -0700
Subject: [PATCH] docs: add a Data Connect guide and link it from the README

Add docs/data-connect.md describing the Data Connect secondary entry
point, following the same shape as the other product guides: a short
intro, the dependency-injection setup (provideDataConnect/getDataConnect
with a connector config, then inject(DataConnect)), and the wrap-the-SDK
note.

Add the Data Connect entry to the README feature table in its
alphabetical slot after Cloud Storage, and re-flow the table into even
two-column rows, which also fixes the previously lopsided final row.

This supersedes #3673, which added the README entry but linked it to a
docs/data-connect.md that did not exist (a dead link) and placed the row
out of alphabetical order. Credit to @maneesht for adding the entry and
flagging the gap.

Firebase now brands this product "Firebase SQL Connect"; the guide keeps
"Data Connect" as the primary name to match the @angular/fire/data-connect
entry point and notes the new branding.
---
 README.md            | 16 ++++++++----
 docs/data-connect.md | 59 ++++++++++++++++++++++++++++++++++++++++++++
 2 files changed, 70 insertions(+), 5 deletions(-)
 create mode 100644 docs/data-connect.md

diff --git a/README.md b/README.md
index eb3dd47fb..8a26dc38c 100644
--- a/README.md
+++ b/README.md
@@ -144,11 +144,20 @@ import { } from '@angular/fire/storage';
   <tr>
     <td>
 
+#### [Data Connect](docs/data-connect.md#data-connect)
+```ts
+import { } from '@angular/fire/data-connect';
+```
+</td>
+    <td>
+
 #### [Performance Monitoring](docs/performance.md#performance-monitoring)
 ```ts
 import { } from '@angular/fire/performance';
 ```
 </td>
+  </tr>
+  <tr>
     <td>
 
 #### [Realtime Database](docs/database.md#realtime-database)
@@ -156,8 +165,6 @@ import { } from '@angular/fire/performance';
 import { } from '@angular/fire/database';
 ```
 </td>
-  </tr>
-  <tr>
     <td>
 
 #### [Remote Config](docs/remote-config.md#remote-config)
@@ -165,6 +172,8 @@ import { } from '@angular/fire/database';
 import { } from '@angular/fire/remote-config';
 ```
 </td>
+  </tr>
+  <tr>
     <td>
 
 #### [App Check](docs/app-check.md#app-check)
@@ -172,8 +181,6 @@ import { } from '@angular/fire/remote-config';
 import { } from '@angular/fire/app-check';
 ```
 </td>
-  </tr>
-  <tr>
     <td>
 
 #### [Vertex AI](docs/vertexai.md#vertex-ai)
@@ -181,6 +188,5 @@ import { } from '@angular/fire/app-check';
 import { } from '@angular/fire/vertexai';
 ```
 </td>
-
   </tr>
 </table>
diff --git a/docs/data-connect.md b/docs/data-connect.md
new file mode 100644
index 000000000..88f2e1205
--- /dev/null
+++ b/docs/data-connect.md
@@ -0,0 +1,59 @@
+<small>
+<a href="https://github.com/angular/angularfire">AngularFire</a> &#10097; <a href="../README.md#developer-guide">Developer Guide</a> &#10097; Data Connect
+</small>
+
+# Data Connect
+
+Firebase Data Connect (now known as "Firebase SQL Connect" in the Firebase documentation) is a backend service that pairs a Cloud SQL for PostgreSQL database with GraphQL, generating type-safe SDKs to query and mutate your data.
+
+[Learn more](https://firebase.google.com/docs/data-connect)
+
+## Dependency Injection
+
+As a prerequisite, ensure that `AngularFire` has been added to your project via
+```bash
+ng add @angular/fire
+```
+
+Provide a Data Connect instance in the application's `app.config.ts`. `getDataConnect` takes a connector config that identifies your service, connector, and location; this is generated for you when you set up Data Connect and is also exported from your generated SDK:
+
+```ts
+import { provideFirebaseApp, initializeApp } from '@angular/fire/app';
+import { provideDataConnect, getDataConnect } from '@angular/fire/data-connect';
+
+const connectorConfig = {
+  connector: 'my-connector',
+  service: 'my-service',
+  location: 'us-central1',
+};
+
+export const appConfig: ApplicationConfig = {
+  providers: [
+    provideFirebaseApp(() => initializeApp({ ... })),
+    provideDataConnect(() => getDataConnect(connectorConfig)),
+    ...
+  ],
+  ...,
+}
+```
+
+Next inject `DataConnect` into your component:
+
+```typescript
+import { Component, inject } from '@angular/core';
+import { DataConnect } from '@angular/fire/data-connect';
+
+@Component({ ... })
+export class MyComponent {
+    private dataConnect = inject(DataConnect);
+    ...
+}
+```
+
+## Firebase API
+
+AngularFire wraps the Firebase JS SDK to ensure proper functionality in Angular, while providing the same API.
+
+Update the imports from `import { ... } from 'firebase/data-connect'` to `import { ... } from '@angular/fire/data-connect'` and follow the official documentation.
+
+[Getting Started](https://firebase.google.com/docs/data-connect/quickstart)