Completed docs site for angular

Author: maneesht

biome.json

@@ -18,6 +18,7 @@
 	},
 	"linter": {
 		"enabled": true,
+		"ignore": ["node_modules/**"],
 		"rules": {
 			"recommended": true,
 			"style": {

dataconnect-sdk/js/default-connector/index.cjs.js

@@ -7,81 +7,89 @@ const connectorConfig = {
 };
 exports.connectorConfig = connectorConfig;
 
-exports.createMovieRef = function createMovieRef(dcOrVars, vars) {
+function createMovieRef(dcOrVars, vars) {
   const { dc: dcInstance, vars: inputVars} = validateArgs(connectorConfig, dcOrVars, vars, true);
   dcInstance._useGeneratedSdk();
   return mutationRef(dcInstance, 'CreateMovie', inputVars);
 }
+exports.createMovieRef = createMovieRef;
 
 exports.createMovie = function createMovie(dcOrVars, vars) {
   return executeMutation(createMovieRef(dcOrVars, vars));
 };
 
-exports.upsertMovieRef = function upsertMovieRef(dcOrVars, vars) {
+function upsertMovieRef(dcOrVars, vars) {
   const { dc: dcInstance, vars: inputVars} = validateArgs(connectorConfig, dcOrVars, vars, true);
   dcInstance._useGeneratedSdk();
   return mutationRef(dcInstance, 'UpsertMovie', inputVars);
 }
+exports.upsertMovieRef = upsertMovieRef;
 
 exports.upsertMovie = function upsertMovie(dcOrVars, vars) {
   return executeMutation(upsertMovieRef(dcOrVars, vars));
 };
 
-exports.deleteMovieRef = function deleteMovieRef(dcOrVars, vars) {
+function deleteMovieRef(dcOrVars, vars) {
   const { dc: dcInstance, vars: inputVars} = validateArgs(connectorConfig, dcOrVars, vars, true);
   dcInstance._useGeneratedSdk();
   return mutationRef(dcInstance, 'DeleteMovie', inputVars);
 }
+exports.deleteMovieRef = deleteMovieRef;
 
 exports.deleteMovie = function deleteMovie(dcOrVars, vars) {
   return executeMutation(deleteMovieRef(dcOrVars, vars));
 };
 
-exports.addMetaRef = function addMetaRef(dc) {
+function addMetaRef(dc) {
   const { dc: dcInstance} = validateArgs(connectorConfig, dc, undefined);
   dcInstance._useGeneratedSdk();
   return mutationRef(dcInstance, 'AddMeta');
 }
+exports.addMetaRef = addMetaRef;
 
 exports.addMeta = function addMeta(dc) {
   return executeMutation(addMetaRef(dc));
 };
 
-exports.deleteMetaRef = function deleteMetaRef(dcOrVars, vars) {
+function deleteMetaRef(dcOrVars, vars) {
   const { dc: dcInstance, vars: inputVars} = validateArgs(connectorConfig, dcOrVars, vars, true);
   dcInstance._useGeneratedSdk();
   return mutationRef(dcInstance, 'DeleteMeta', inputVars);
 }
+exports.deleteMetaRef = deleteMetaRef;
 
 exports.deleteMeta = function deleteMeta(dcOrVars, vars) {
   return executeMutation(deleteMetaRef(dcOrVars, vars));
 };
 
-exports.listMoviesRef = function listMoviesRef(dc) {
+function listMoviesRef(dc) {
   const { dc: dcInstance} = validateArgs(connectorConfig, dc, undefined);
   dcInstance._useGeneratedSdk();
   return queryRef(dcInstance, 'ListMovies');
 }
+exports.listMoviesRef = listMoviesRef;
 
 exports.listMovies = function listMovies(dc) {
   return executeQuery(listMoviesRef(dc));
 };
 
-exports.getMovieByIdRef = function getMovieByIdRef(dcOrVars, vars) {
+function getMovieByIdRef(dcOrVars, vars) {
   const { dc: dcInstance, vars: inputVars} = validateArgs(connectorConfig, dcOrVars, vars, true);
   dcInstance._useGeneratedSdk();
   return queryRef(dcInstance, 'GetMovieById', inputVars);
 }
+exports.getMovieByIdRef = getMovieByIdRef;
 
 exports.getMovieById = function getMovieById(dcOrVars, vars) {
   return executeQuery(getMovieByIdRef(dcOrVars, vars));
 };
 
-exports.getMetaRef = function getMetaRef(dc) {
+function getMetaRef(dc) {
   const { dc: dcInstance} = validateArgs(connectorConfig, dc, undefined);
   dcInstance._useGeneratedSdk();
   return queryRef(dcInstance, 'GetMeta');
 }
+exports.getMetaRef = getMetaRef;
 
 exports.getMeta = function getMeta(dc) {
   return executeQuery(getMetaRef(dc));

docs.json

@@ -15,6 +15,11 @@
       "id": "react",
       "title": "React",
       "href": "/react"
+    },
+    {
+      "id": "angular",
+      "title": "Angular",
+      "href": "/angular"
     }
   ],
   "sidebar": [
@@ -42,6 +47,37 @@
         }
       ]
     },
+    {
+      "tab": "angular",
+      "group": "Data Connect",
+      "pages": [
+        {
+          "title": "Getting Started",
+          "href": "/angular/data-connect"
+        },
+        {
+          "title": "Querying",
+          "href": "/angular/data-connect/querying"
+        },
+        {
+          "title": "Mutations",
+          "href": "/angular/data-connect/mutations"
+        },
+        {
+          "group": "functions",
+          "pages": [
+            {
+              "title": "injectDataConnectQuery",
+              "href": "/angular/data-connect/functions/injectDataConnectQuery"
+            },
+            {
+              "title": "injectDataConnectMutation",
+              "href": "/angular/data-connect/functions/injectDataConnectMutation"
+            }
+          ]
+        }
+      ]
+    },
     {
       "tab": "react",
       "group": "Authentication",

docs/angular/data-connect/functions/injectDataConnectMutation.mdx

@@ -0,0 +1,42 @@
+---
+title: injectDataConnectMutation
+---
+
+`injectDataConnectMutation` is a hook designed to simplify handling mutations (creating, updating, deleting) with Firebase Data Connect.
+
+See [mutations](/react/data-connect/mutations) for more information.
+
+## 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>pending</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
+
+```ts
+import { injectDataConnectMutation } from "@tanstack-query-firebase/angular/data-connect";
+import { createMovieRef } from "@your-package-name/your-connector";
+
+class AddMovieComponent() {
+  createMovie = injectDataConnectMutation(
+    createMovieRef
+  );
+  addMovie() {
+    createMovie.mutate({
+      title: 'John Wick',
+      genre: "Action",
+      imageUrl: "https://example.com/image.jpg",
+    });
+  }
+  return (
+    <button
+      disabled={createMovie.isPending()}
+      (click)="addMovie()"
+    >
+      {{createMovie.isPending() ? "Creating..." : "Create Movie"}}
+    </button>
+  );
+}
+```

docs/angular/data-connect/functions/injectDataConnectQuery.mdx

@@ -0,0 +1,43 @@
+---
+title: injectDataConnectQuery
+---
+
+`injectDataConnectQuery` is a hook designed to simplify data fetching and state management with Firebase Data Connect.
+
+See [querying](/angular/data-connect/querying) for more information.
+
+## 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
+
+```ts
+import { injectDataConnectQuery } from '@tanstack-query-firebase/angular/data-connect';
+import { listMoviesRef } from "@your-package-name/your-connector";
+
+// class
+export class MovieListComponent {
+  movies = injectDataConnectQuery(listMoviesRef());
+}
+
+// template
+@if (movies.isPending()) {
+    Loading...
+}
+@if (movies.error()) {
+    An error has occurred: {{ movies.error() }}
+}
+@if (movies.data(); as data) {
+    @for (movie of data.movies; track movie.id) {
+    <mat-card appearance="outlined">
+        <mat-card-content>{{movie.description}}</mat-card-content>
+    </mat-card>
+    } @empty {
+        <h2>No items!</h2>
+    }
+}
+```

docs/angular/data-connect/index.mdx

@@ -0,0 +1,117 @@
+---
+title: Firebase Data Connect
+---
+
+Firebase Data Connect is a relational database service for mobile and web apps that lets you build and scale using a fully-managed PostgreSQL database powered by Cloud SQL. It provides secure schema, query and mutation management using GraphQL technology that integrates well with Firebase Authentication.
+
+To get started, ensure you have setup your Firebase project and have the Data Connect setup in your project. To learn more, 
+follow the [Firebase Data Connect documentation](https://firebase.google.com/docs/data-connect/quickstart).
+
+## Setup
+
+Before using the Tanstack Query Firebase hooks for Data Connect, ensure you have configured your application using your chosen connector:
+
+```ts
+// app.config.ts
+export const appConfig: ApplicationConfig = {
+  providers: [
+    ...
+    provideFirebaseApp(() =>
+      initializeApp(/*Replace with your firebase config*/)
+    ),
+    provideDataConnect(() => getDataConnect(connectorConfig)),
+    provideTanStackQuery(new QueryClient()),
+  ],
+};
+```
+
+## Importing
+
+The package exports are available via the `@tanstack-query-firebase/angular` package under the `data-connect` namespace:
+
+```ts
+import { injectDataConnectQuery } from "@tanstack-query-firebase/angular/data-connect";
+```
+
+## Basic Usage
+
+To use the Tanstack Query Firebase injectors, you can either use the generated SDKs, or the `injectDataConnectQuery` injector to fetch data from the database:
+
+### Using the Generated SDK
+
+The generated SDK reduces the boilerplate required to use Tanstack Query Firebase's injectors. Instead of having to provide a ref to `injectDataConnectQuery`, you simply need to call the generated
+injector function like so:
+
+```ts
+import { injectListMyPosts } from '@firebasegen/posts/angular'
+
+@Component({
+  ...
+  template: `
+    @if (posts.isPending()) {
+        Loading...
+    }
+    @if (posts.error()) {
+        An error has occurred: {{ posts.error() }}
+    }
+    @if (posts.data(); as data) {
+        @for (post of data.posts; track post.id) {
+        <mat-card appearance="outlined">
+            <mat-card-content>{{post.description}}</mat-card-content>
+        </mat-card>
+        } @empty {
+            <h2>No items!</h2>
+        }
+    }
+  `,
+})
+export class PostListComponent {
+  // Calls `injectDataConnectQuery` with the corresponding types.
+  posts = injectListMyPosts();
+}
+```
+
+### Using `injectDataConnectQuery`
+
+Alternatively, you can use the `injectDataConnectQuery` injector. To use this, you need to pass the Response and Data generics:
+
+```ts
+import { injectDataConnectQuery } from "@tanstack-query-firebase/angular";
+import { listMoviesRef } from "@firebasegen/posts";
+
+@Component({
+  ...
+  template: `
+    @if (posts.isPending()) {
+        Loading...
+    }
+    @if (posts.error()) {
+        An error has occurred: {{ posts.error() }}
+    }
+    @if (posts.data(); as data) {
+        @for (post of data.posts; track post.id) {
+        <mat-card appearance="outlined">
+            <mat-card-content>{{post.description}}</mat-card-content>
+        </mat-card>
+        } @empty {
+            <h2>No items!</h2>
+        }
+    }
+  `,
+})
+export class PostListComponent {
+  // Calls `injectDataConnectQuery` with the corresponding types.
+  // Alternatively:
+  // injectDataConnectQuery(queryRef<ListMoviesData, ListMoviesResponse>(dc, 'ListMovies'))
+  posts = injectDataConnectQuery(listMoviesRef());
+}
+```
+
+The hooks 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.
+
+## Learning more
+
+To learn more about the Data Connect hooks, check out the following pages:
+
+- [Querying](/angular/data-connect/querying)
+- [Mutations](/angular/data-connect/mutations)