### Install Dependencies

Source: https://github.com/invertase/tanstack-query-firebase/blob/main/CONTRIBUTING.md

Install all project dependencies using pnpm.

```bash
pnpm install
```

--------------------------------

### Install Firebase

Source: https://github.com/invertase/tanstack-query-firebase/blob/main/README.md

Install the Firebase SDK as a peer dependency before installing framework-specific packages.

```bash
npm i --save firebase
```

--------------------------------

### Start Firebase Emulators

Source: https://github.com/invertase/tanstack-query-firebase/blob/main/CONTRIBUTING.md

Start the Firebase emulators, which are required for local development and testing.

```bash
pnpm emulator
```

--------------------------------

### Example Changeset File

Source: https://github.com/invertase/tanstack-query-firebase/blob/main/CONTRIBUTING.md

An example of a generated changeset file, detailing package version bumps and a description of the changes.

```markdown
---
"@tanstack-query-firebase/react": minor
"@tanstack-query-firebase/angular": patch
---

Added new authentication feature to React package and fixed bug in Angular package.
```

--------------------------------

### Run Development Server

Source: https://github.com/invertase/tanstack-query-firebase/blob/main/examples/react/react-data-connect/README.md

Use npm, yarn, pnpm, or bun to start the development server for a Next.js project.

```bash
npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev
```

--------------------------------

### Install React Packages

Source: https://github.com/invertase/tanstack-query-firebase/blob/main/README.md

Install the necessary TanStack Query and TanStack Query Firebase packages for React applications.

```bash
npm i --save @tanstack/react-query @tanstack-query-firebase/react
```

--------------------------------

### Install Dependencies

Source: https://github.com/invertase/tanstack-query-firebase/blob/main/packages/angular/README.md

Install the necessary AngularFire, Firebase, and TanStack Query Firebase Angular packages using npm.

```bash
npm i --save @angular/fire firebase @tanstack-query-firebase/angular
```

--------------------------------

### Install TanStack Query Firebase Packages

Source: https://github.com/invertase/tanstack-query-firebase/blob/main/docs/react/index.mdx

Install the necessary packages for TanStack Query Firebase integration with React. Ensure Firebase and TanStack Query are installed as they are peer dependencies.

```bash
npm i --save firebase @tanstack/react-query @tanstack-query-firebase/react
```

--------------------------------

### Install TanStack Query Firebase Packages

Source: https://github.com/invertase/tanstack-query-firebase/blob/main/docs/angular/index.mdx

Install the necessary packages for TanStack Query Firebase with Angular. Ensure @angular/fire and @tanstack/angular-query-experimental are installed as they are peer dependencies.

```bash
npm i --save firebase @tanstack/angular-query-experimental @tanstack-query-firebase/angular
```

--------------------------------

### Example Usage: Injecting and Displaying Movies

Source: https://github.com/invertase/tanstack-query-firebase/blob/main/docs/angular/index.mdx

Demonstrates how to inject a list of movies using `injectListMovies` and display them in an Angular template, including loading and error states.

```typescript
import { injectListMovies } from '@firebasegen/movies/angular'

// class
export class MovieListComponent {
  movies = injectListMovies();
}

// 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>
    }
}

```

--------------------------------

### Execute AddMeta using Action Shortcut

Source: https://github.com/invertase/tanstack-query-firebase/blob/main/dataconnect-sdk/js/default-connector/README.md

Shows how to execute the AddMeta mutation using its action shortcut function. Examples include direct execution and passing a DataConnect instance, with both async/await and Promise API usage.

```typescript
import { getDataConnect } from 'firebase/data-connect';
import { connectorConfig, addMeta } from '@dataconnect/default-connector';


// Call the `addMeta()` function to execute the mutation.
// You can use the `await` keyword to wait for the promise to resolve.
const { data } = await addMeta();

// You can also pass in a `DataConnect` instance to the action shortcut function.
const dataConnect = getDataConnect(connectorConfig);
const { data } = await addMeta(dataConnect);

console.log(data.ref);

// Or, you can use the `Promise` API.
addMeta().then((response) => {
  const data = response.data;
  console.log(data.ref);
});
```

--------------------------------

### Execute ListMovies Query using QueryRef

Source: https://github.com/invertase/tanstack-query-firebase/blob/main/dataconnect-sdk/js/default-connector/README.md

Demonstrates executing the `ListMovies` query by first getting a QueryRef and then calling `executeQuery()`, with and without a DataConnect instance, using async/await and Promise API.

```javascript
import { getDataConnect, executeQuery } from 'firebase/data-connect';
import { connectorConfig, listMoviesRef } from '@dataconnect/default-connector';


// Call the `listMoviesRef()` function to get a reference to the query.
const ref = listMoviesRef();

// You can also pass in a `DataConnect` instance to the `QueryRef` function.
const dataConnect = getDataConnect(connectorConfig);
const ref = listMoviesRef(dataConnect);

// Call `executeQuery()` on the reference to execute the query.
// You can use the `await` keyword to wait for the promise to resolve.
const { data } = await executeQuery(ref);

console.log(data.movies);

// Or, you can use the `Promise` API.
executeQuery(ref).then((response) => {
  const data = response.data;
  console.log(data.movies);
});
```

--------------------------------

### Initialize Firebase App and Database

Source: https://github.com/invertase/tanstack-query-firebase/blob/main/docs/react/database/index.mdx

Initialize your Firebase app and get the Realtime Database instance. This is a prerequisite for using the database hooks.

```typescript
import {
  initializeApp,
} from "firebase/app";
import {
  getDatabase,
} from "firebase/database";

// Initialize your Firebase app
initializeApp({ ... });

// Get the Realtime Database instance
const database = getDatabase(app);
```

--------------------------------

### Import and Initialize Default Connector SDK

Source: https://github.com/invertase/tanstack-query-firebase/blob/main/dataconnect-sdk/js/default-connector/README.md

Import the necessary functions from 'firebase/data-connect' and the connector configuration from '@dataconnect/default-connector' to initialize the Data Connect client. This is the basic setup for using the SDK.

```typescript
import { getDataConnect } from 'firebase/data-connect';
import { connectorConfig } from '@dataconnect/default-connector';

const dataConnect = getDataConnect(connectorConfig);
```

--------------------------------

### Initialize Firebase and Firestore

Source: https://github.com/invertase/tanstack-query-firebase/blob/main/docs/react/firestore/index.mdx

Initialize your Firebase app and get the Firestore instance. This is a prerequisite for using Firestore hooks.

```typescript
import {
  initializeApp
} from "firebase/app";
import {
  getFirestore
} from "firebase/firestore";

// Initialize your Firebase app
initializeApp({ ... });

// Get the Firestore instance
const firestore = getFirestore(app);
```

--------------------------------

### Automatic AngularFire Setup

Source: https://github.com/invertase/tanstack-query-firebase/blob/main/docs/angular/index.mdx

Use the Angular CLI to automatically add and configure @angular/fire in your project.

```shell
ng add @angular/fire
```

--------------------------------

### Inject and Use DataConnectMutation for Adding Movies

Source: https://github.com/invertase/tanstack-query-firebase/blob/main/packages/angular/README.md

Demonstrates how to inject and use `injectDataConnectMutation` to add a new movie. Includes an example of triggering the mutation with data.

```typescript
import {
    Component,
    inject
} from '@angular/core';
import {
    injectDataConnectQuery,
    injectDataConnectMutation
} from '@tanstack-query-firebase/angular';
import { addMovieRef, listMoviesRef } from '@myorg/movies/angular';

@Component({
    selector: 'movie-list-mutation',
    standalone: true,
    imports: [
        // ... other imports
    ],
    template: `
    <button
        style="margin: auto; display: block"
        mat-raised-button
        (click)="addGeneratedMovie()"
      >
        Add Random Movie
    </button>
    `
})
export class MovieListComponent {
    public query = injectDataConnectQuery(listMoviesRef());
    public mutation = injectDataConnectMutation(addMovieRef());

    addGeneratedMovie() {
        this.mutation.mutate({
            name: 'Random Movie ' + this.query.data()?.length,
            genre: 'Some Genre',
            synopsis: 'Random Synopsis',
        });
    }
}
```

--------------------------------

### Server Side Rendering with Next.js

Source: https://github.com/invertase/tanstack-query-firebase/blob/main/docs/react/data-connect/server-side-rendering.mdx

Prefetch data for server-side rendering in a Next.js application using DataConnectQueryClient. Ensure initial setup steps are followed.

```tsx
import type { InferGetStaticPropsType } from "next";
import { dehydrate, HydrationBoundary } from "@tanstack/react-query";
import { listMoviesRef } from "@dataconnect/default-connector";
import { DataConnectQueryClient } from "@tanstack-query-firebase/react/data-connect";

export async function getStaticProps() {
  const queryClient = new DataConnectQueryClient();

  // Prefetch the list of movies
  await queryClient.prefetchDataConnectQuery(listMoviesRef());

  return {
    props: {
      dehydratedState: dehydrate(queryClient),
    },
  };
}

export default function MoviesRoute({
  dehydratedState,
}: InferGetStaticPropsType<typeof getStaticProps>) {
  return (
    <HydrationBoundary state={dehydratedState}>
      <Movies />
    </HydrationBoundary>
  );
}

function Movies() {
  const movies = useDataConnectQuery(listMoviesRef());

  if (movies.isLoading) {
    return <div>Loading...</div>;
  }

  if (movies.isError) {
    return <div>Error: {movies.error.message}</div>;
  }

  return (
    <div>
      <h1>Movies</h1>
      <ul>
        {movies.data!.movies.map((movie) => (
          <li key={movie.id}>{movie.title}</li>
        ))}
      </ul>
    </div>
  );
}
```

--------------------------------

### Initialize Firebase and Data Connect

Source: https://github.com/invertase/tanstack-query-firebase/blob/main/docs/react/data-connect/index.mdx

Configure your application with the Data Connect connector and initialize the Firebase app. This setup is required before using Tanstack Query Firebase hooks for Data Connect. You can optionally connect to the Data Connect Emulator.

```typescript
import { connectorConfig } from "../../dataconnect/default-connector";
import { initializeApp } from "firebase/app";
import { getDataConnect } from "firebase/data-connect";

// Initialize your Firebase app
initializeApp({ ... });

// Get the Data Connect instance
const dataConnect = getDataConnect(connectorConfig);

// Optionally, connect to the Data Connect Emulator
connectDataConnectEmulator(dataConnect, "localhost", 9399);
```

--------------------------------

### UpsertMovie Mutation

Source: https://github.com/invertase/tanstack-query-firebase/blob/main/dataconnect-sdk/js/default-connector/README.md

This section details the UpsertMovie mutation, its variables, return type, and provides examples for using the action shortcut function.

```APIDOC
## UpsertMovie Mutation

### Description
Executes the `UpsertMovie` mutation to create or update a movie record.

### Method
POST (implied by mutation)

### Endpoint
Not explicitly defined, but invoked via SDK functions.

### Variables
`UpsertMovieVariables` object with the following fields:
- **id** (UUIDString) - Required - The unique identifier for the movie.
- **title** (string) - Required - The title of the movie.
- **imageUrl** (string) - Required - The URL of the movie's image.

### Return Type
Returns a `MutationPromise` that resolves to an object with a `data` property of type `UpsertMovieData`.

`UpsertMovieData` object has the following fields:
- **movie_upsert** (Movie_Key) - The result of the upsert operation.

### Using `UpsertMovie`'s action shortcut function

```typescript
import { getDataConnect } from 'firebase/data-connect';
import { connectorConfig, upsertMovie, UpsertMovieVariables } from '@dataconnect/default-connector';

// Define variables for the mutation
const upsertMovieVars: UpsertMovieVariables = {
  id: '...', 
  title: '...', 
  imageUrl: '...', 
};

// Execute the mutation using the action shortcut
const { data } = await upsertMovie(upsertMovieVars);

// Alternatively, define variables inline
const { data } = await upsertMovie({ id: '...', title: '...', imageUrl: '...' });

// Using with a DataConnect instance
const dataConnect = getDataConnect(connectorConfig);
const { data } = await upsertMovie(dataConnect, upsertMovieVars);

console.log(data.movie_upsert);

// Using the Promise API
upsertMovie(upsertMovieVars).then((response) => {
  const data = response.data;
  console.log(data.movie_upsert);
});
```
```

--------------------------------

### Basic useSetMutation Example

Source: https://github.com/invertase/tanstack-query-firebase/blob/main/docs/react/database/hooks/useSetMutation.mdx

Demonstrates how to use the useSetMutation hook to set data at a Firebase Realtime Database reference. Ensure you have initialized Firebase and imported necessary functions.

```tsx
import { ref } from "firebase/database";
import { useSetMutation } from "@tanstack/react-query-firebase/database";

const userRef = ref(database, `users/${uid}`);
const { mutate } = useSetMutation(userRef);
mutate({ name: "Ada", score: 1 });
```

--------------------------------

### Get GetMeta Query Reference (Async/Await)

Source: https://github.com/invertase/tanstack-query-firebase/blob/main/dataconnect-sdk/js/default-connector/README.md

Obtains a reference to the GetMeta query using the getMetaRef function and executes it with executeQuery using async/await. Imports required modules.

```typescript
import { getDataConnect, executeQuery } from 'firebase/data-connect';
import { connectorConfig, getMetaRef } from '@dataconnect/default-connector';


// Call the `getMetaRef()` function to get a reference to the query.
const ref = getMetaRef();

// You can also pass in a `DataConnect` instance to the `QueryRef` function.
const dataConnect = getDataConnect(connectorConfig);
const ref = getMetaRef(dataConnect);

// Call `executeQuery()` on the reference to execute the query.
// You can use the `await` keyword to wait for the promise to resolve.
const { data } = await executeQuery(ref);

console.log(data.ref);
```

--------------------------------

### Sending a Sign-In Link to Email

Source: https://github.com/invertase/tanstack-query-firebase/blob/main/docs/react/auth/hooks/useSendSignInLinkToEmailMutation.mdx

Demonstrates how to use the useSendSignInLinkToEmailMutation hook to send a sign-in link. It includes basic setup with Firebase auth and handles success callbacks.

```jsx
import { useSendSignInLinkToEmailMutation } from "@tanstack-query-firebase/react/auth";
import { auth } from "../firebase";

function Component() {
  const mutation = useSendSignInLinkToEmailMutation(auth, {
    onSuccess: () => {
      console.log("Sign-in link sent successfully!");
    },
  });

  return (
    <button
      disabled={mutation.isPending}
      onClick={() => mutation.mutate({ email: '...', actionCodeSettings: { ... } })}
    >
      Send Sign In Link
    </button>
  );
}
```

--------------------------------

### Get GetMeta Query Reference (Promise API)

Source: https://github.com/invertase/tanstack-query-firebase/blob/main/dataconnect-sdk/js/default-connector/README.md

Obtains a reference to the GetMeta query using the getMetaRef function and executes it with executeQuery using the Promise API. Imports required modules.

```typescript
import { getDataConnect, executeQuery } from 'firebase/data-connect';
import { connectorConfig, getMetaRef } from '@dataconnect/default-connector';


// Or, you can use the `Promise` API.
executeQuery(ref).then((response) => {
  const data = response.data;
  console.log(data.ref);
});
```

--------------------------------

### Inject Data Connect Mutation Example

Source: https://github.com/invertase/tanstack-query-firebase/blob/main/docs/angular/data-connect/functions/injectDataConnectMutation.mdx

Demonstrates how to use injectDataConnectMutation to create a new movie record. It handles pending, success, and error states automatically. Ensure you have defined your Firebase Data Connect schema and imported the necessary reference.

```typescript
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>
  );
}
```

--------------------------------

### Use `injectDataConnectQuery` Directly

Source: https://github.com/invertase/tanstack-query-firebase/blob/main/docs/angular/data-connect/index.mdx

Manually use the `injectDataConnectQuery` injector by providing the Response and Data generics. This offers more control over the query setup compared to using generated SDKs.

```typescript
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());
}
```

--------------------------------

### Execute CreateMovie using Action Shortcut

Source: https://github.com/invertase/tanstack-query-firebase/blob/main/dataconnect-sdk/js/default-connector/README.md

Shows how to execute the CreateMovie mutation using the action shortcut function with inline variables and a DataConnect instance. Includes Promise API usage.

```typescript
import { getDataConnect } from 'firebase/data-connect';
import { connectorConfig, createMovie, CreateMovieVariables } from '@dataconnect/default-connector';

// The `CreateMovie` mutation requires an argument of type `CreateMovieVariables`:
const createMovieVars: CreateMovieVariables = {
  title: ..., 
  genre: ..., 
  imageUrl: ..., 
};

// Call the `createMovie()` function to execute the mutation.
// You can use the `await` keyword to wait for the promise to resolve.
const { data } = await createMovie(createMovieVars);
// Variables can be defined inline as well.
const { data } = await createMovie({ title: ..., genre: ..., imageUrl: ..., });

// You can also pass in a `DataConnect` instance to the action shortcut function.
const dataConnect = getDataConnect(connectorConfig);
const { data } = await createMovie(dataConnect, createMovieVars);

console.log(data.movie_insert);

// Or, you can use the `Promise` API.
createMovie(createMovieVars).then((response) => {
  const data = response.data;
  console.log(data.movie_insert);
});
```

--------------------------------

### Execute ListMovies Query using Action Shortcut

Source: https://github.com/invertase/tanstack-query-firebase/blob/main/dataconnect-sdk/js/default-connector/README.md

Shows how to execute the `ListMovies` query using its action shortcut function, both with and without a DataConnect instance, using async/await and Promise API.

```javascript
import { getDataConnect } from 'firebase/data-connect';
import { connectorConfig, listMovies } from '@dataconnect/default-connector';


// Call the `listMovies()` function to execute the query.
// You can use the `await` keyword to wait for the promise to resolve.
const { data } = await listMovies();

// You can also pass in a `DataConnect` instance to the action shortcut function.
const dataConnect = getDataConnect(connectorConfig);
const { data } = await listMovies(dataConnect);

console.log(data.movies);

// Or, you can use the `Promise` API.
listMovies().then((response) => {
  const data = response.data;
  console.log(data.movies);
});
```

--------------------------------

### Get DeleteMeta Operation Name

Source: https://github.com/invertase/tanstack-query-firebase/blob/main/dataconnect-sdk/js/default-connector/README.md

Retrieves the operation name for the deleteMetaRef without creating a reference.

```typescript
const name = deleteMetaRef.operationName;
console.log(name);
```

--------------------------------

### useGetQuery

Source: https://github.com/invertase/tanstack-query-firebase/blob/main/docs/react/database/hooks/useGetQuery.mdx

Reads data once from a Realtime Database location. It takes a database reference and an options object (including queryKey) and returns the snapshot and loading state.

```APIDOC
## useGetQuery

### Description
Reads data once from a Realtime Database location.

### Usage
```tsx
import { ref } from "firebase/database";
import { useGetQuery } from "@tanstack-query-firebase/react/database";

const userRef = ref(database, `users/${uid}`);
const { data: snapshot, isLoading } = useGetQuery(userRef, {
  queryKey: ["database", "users", uid],
});
const value = snapshot?.val();
```

### Parameters
#### Arguments
1. **`query`** (DatabaseReference): A Firebase Realtime Database reference.
2. **`options`** (UseQueryOptions):
   - **`queryKey`** (QueryKey): A unique key for the query.

### Returns
- **`data`**: The snapshot of the data from the database.
- **`isLoading`**: A boolean indicating if the data is currently being loaded.
```

--------------------------------

### Run with Emulators

Source: https://github.com/invertase/tanstack-query-firebase/blob/main/examples/react/useGetIdTokenQuery/README.md

Run the Vite development server with Firebase emulators. This is the recommended approach for local development.

```bash
pnpm dev:emulator
```

--------------------------------

### Retrieve Operation Name

Source: https://github.com/invertase/tanstack-query-firebase/blob/main/dataconnect-sdk/js/default-connector/README.md

Demonstrates how to get the operation name from the createMovieRef without creating a ref.

```typescript
const name = createMovieRef.operationName;
console.log(name);
```

--------------------------------

### Retrieve Operation Name

Source: https://github.com/invertase/tanstack-query-firebase/blob/main/dataconnect-sdk/js/default-connector/README.md

Demonstrates how to get the operation name from the `listMoviesRef` by accessing its `operationName` property.

```typescript
const name = listMoviesRef.operationName;
console.log(name);
```

--------------------------------

### Connect Default Connector SDK to Local Emulator

Source: https://github.com/invertase/tanstack-query-firebase/blob/main/dataconnect-sdk/js/default-connector/README.md

Initialize the Data Connect client and then use 'connectDataConnectEmulator' to direct the connector to the local emulator. This is useful for development and testing purposes.

```typescript
import { connectDataConnectEmulator, getDataConnect } from 'firebase/data-connect';
import { connectorConfig } from '@dataconnect/default-connector';

const dataConnect = getDataConnect(connectorConfig);
connectDataConnectEmulator(dataConnect, 'localhost', 9399);
```

--------------------------------

### Get DeleteMovie Operation Name

Source: https://github.com/invertase/tanstack-query-firebase/blob/main/dataconnect-sdk/js/default-connector/README.md

Retrieves the operation name for the DeleteMovie mutation without creating a ref.

```typescript
const name = deleteMovieRef.operationName;
console.log(name);
```

--------------------------------

### Clone Repository and Navigate

Source: https://github.com/invertase/tanstack-query-firebase/blob/main/CONTRIBUTING.md

Clone the TanStack Query Firebase repository and change into the project directory.

```bash
git clone https://github.com/invertase/tanstack-query-firebase.git
cd tanstack-query-firebase
```

--------------------------------

### Retrieve Operation Name

Source: https://github.com/invertase/tanstack-query-firebase/blob/main/dataconnect-sdk/js/default-connector/README.md

Shows how to get the operation name for the GetMovieById query without creating a reference.

```typescript
const name = getMovieByIdRef.operationName;
console.log(name);

```

--------------------------------

### Execute GetMeta Query using Action Shortcut (Async/Await)

Source: https://github.com/invertase/tanstack-query-firebase/blob/main/dataconnect-sdk/js/default-connector/README.md

Executes the GetMeta query using the action shortcut function and awaits the result with async/await. Imports required modules.

```typescript
import { getDataConnect } from 'firebase/data-connect';
import { connectorConfig, getMeta } from '@dataconnect/default-connector';


// Call the `getMeta()` function to execute the query.
// You can use the `await` keyword to wait for the promise to resolve.
const { data } = await getMeta();

// You can also pass in a `DataConnect` instance to the action shortcut function.
const dataConnect = getDataConnect(connectorConfig);
const { data } = await getMeta(dataConnect);

console.log(data.ref);
```

--------------------------------

### Get UpsertMovie Operation Name

Source: https://github.com/invertase/tanstack-query-firebase/blob/main/dataconnect-sdk/js/default-connector/README.md

Retrieves the operation name for the upsertMovie mutation by accessing the 'operationName' property on the upsertMovieRef.

```typescript
const name = upsertMovieRef.operationName;
console.log(name);
```

--------------------------------

### Execute UpsertMovie using Action Shortcut

Source: https://github.com/invertase/tanstack-query-firebase/blob/main/dataconnect-sdk/js/default-connector/README.md

Demonstrates how to execute the UpsertMovie mutation using the action shortcut function, with and without an explicit DataConnect instance. Includes both async/await and Promise API usage.

```typescript
import { getDataConnect } from 'firebase/data-connect';
import { connectorConfig, upsertMovie, UpsertMovieVariables } from '@dataconnect/default-connector';

// The `UpsertMovie` mutation requires an argument of type `UpsertMovieVariables`:
const upsertMovieVars: UpsertMovieVariables = {
  id: ..., 
  title: ..., 
  imageUrl: ..., 
};

// Call the `upsertMovie()` function to execute the mutation.
// You can use the `await` keyword to wait for the promise to resolve.
const { data } = await upsertMovie(upsertMovieVars);
// Variables can be defined inline as well.
const { data } = await upsertMovie({ id: ..., title: ..., imageUrl: ..., });

// You can also pass in a `DataConnect` instance to the action shortcut function.
const dataConnect = getDataConnect(connectorConfig);
const { data } = await upsertMovie(dataConnect, upsertMovieVars);

console.log(data.movie_upsert);

// Or, you can use the `Promise` API.
upsertMovie(upsertMovieVars).then((response) => {
  const data = response.data;
  console.log(data.movie_upsert);
});
```

--------------------------------

### Retrieve AddMeta Operation Name

Source: https://github.com/invertase/tanstack-query-firebase/blob/main/dataconnect-sdk/js/default-connector/README.md

Demonstrates how to get the operation name for the AddMeta mutation without creating a mutation reference.

```typescript
const name = addMetaRef.operationName;
console.log(name);
```

--------------------------------

### Retrieve GetMeta Operation Name

Source: https://github.com/invertase/tanstack-query-firebase/blob/main/dataconnect-sdk/js/default-connector/README.md

Demonstrates how to get the operation name for the GetMeta query without creating a query reference.

```typescript
const name = getMetaRef.operationName;
console.log(name);
```

--------------------------------

### Run All Tests

Source: https://github.com/invertase/tanstack-query-firebase/blob/main/CONTRIBUTING.md

Execute all test suites across all packages in the project.

```bash
pnpm test
```

--------------------------------

### Basic Usage of useClearIndexedDbPersistenceMutation

Source: https://github.com/invertase/tanstack-query-firebase/blob/main/docs/react/firestore/hooks/useClearIndexedDbPersistenceMutation.mdx

Demonstrates how to use the `useClearIndexedDbPersistenceMutation` hook to create a mutation for clearing IndexedDB persistence. It shows the necessary imports and how to trigger the mutation from a button click.

```jsx
import { getFirestore } from 'firebase/firestore';
import { clearIndexedDbPersistence } from '@tanstack-query-firebase/react/firestore';

// Get a Firestore instance using the initialized Firebase app instance
const firestore = getFirestore(app);

function Component() {
  const mutation = useClearIndexedDbPersistenceMutation(firestore);

  return (
    <button disabled={mutation.isPending} onClick={() => mutation.mutate()}>
      Clear IndexedDB Persistence
    </button>
  );
}
```

--------------------------------

### Execute CreateMovie using MutationRef

Source: https://github.com/invertase/tanstack-query-firebase/blob/main/dataconnect-sdk/js/default-connector/README.md

Demonstrates executing the CreateMovie mutation via MutationRef, including inline variables and passing a DataConnect instance. Includes Promise API usage.

```typescript
import { getDataConnect, executeMutation } from 'firebase/data-connect';
import { connectorConfig, createMovieRef, CreateMovieVariables } from '@dataconnect/default-connector';

// The `CreateMovie` mutation requires an argument of type `CreateMovieVariables`:
const createMovieVars: CreateMovieVariables = {
  title: ..., 
  genre: ..., 
  imageUrl: ..., 
};

// Call the `createMovieRef()` function to get a reference to the mutation.
const ref = createMovieRef(createMovieVars);
// Variables can be defined inline as well.
const ref = createMovieRef({ title: ..., genre: ..., imageUrl: ..., });

// You can also pass in a `DataConnect` instance to the `MutationRef` function.
const dataConnect = getDataConnect(connectorConfig);
const ref = createMovieRef(dataConnect, createMovieVars);

// Call `executeMutation()` on the reference to execute the mutation.
// You can use the `await` keyword to wait for the promise to resolve.
const { data } = await executeMutation(ref);

console.log(data.movie_insert);

// Or, you can use the `Promise` API.
executeMutation(ref).then((response) => {
  const data = response.data;
  console.log(data.movie_insert);
});
```

--------------------------------

### Execute GetMeta Query using Action Shortcut (Promise API)

Source: https://github.com/invertase/tanstack-query-firebase/blob/main/dataconnect-sdk/js/default-connector/README.md

Executes the GetMeta query using the action shortcut function and handles the result using the Promise API. Imports required modules.

```typescript
import { getDataConnect } from 'firebase/data-connect';
import { connectorConfig, getMeta } from '@dataconnect/default-connector';


// Or, you can use the `Promise` API.
getMeta().then((response) => {
  const data = response.data;
  console.log(data.ref);
});
```

--------------------------------

### Turborepo Build Command

Source: https://github.com/invertase/tanstack-query-firebase/blob/main/CONTRIBUTING.md

Build all packages within the monorepo using Turborepo.

```bash
pnpm turbo build
```

--------------------------------

### Execute AddMeta using MutationRef

Source: https://github.com/invertase/tanstack-query-firebase/blob/main/dataconnect-sdk/js/default-connector/README.md

Illustrates how to execute the AddMeta mutation by first obtaining a reference using addMetaRef and then calling executeMutation. Covers both direct reference creation and with a DataConnect instance, using async/await and Promise API.

```typescript
import { getDataConnect, executeMutation } from 'firebase/data-connect';
import { connectorConfig, addMetaRef } from '@dataconnect/default-connector';


// Call the `addMetaRef()` function to get a reference to the mutation.
const ref = addMetaRef();

// You can also pass in a `DataConnect` instance to the `MutationRef` function.
const dataConnect = getDataConnect(connectorConfig);
const ref = addMetaRef(dataConnect);

// Call `executeMutation()` on the reference to execute the mutation.
// You can use the `await` keyword to wait for the promise to resolve.
const { data } = await executeMutation(ref);

console.log(data.ref);

// Or, you can use the `Promise` API.
executeMutation(ref).then((response) => {
  const data = response.data;
  console.log(data.ref);
});
```

--------------------------------

### Create Changeset

Source: https://github.com/invertase/tanstack-query-firebase/blob/main/CONTRIBUTING.md

Create a new changeset file for versioning and publishing packages. This command should be run during development when changes are ready for release.

```bash
pnpm changeset
```

--------------------------------

### Basic Usage of useDataConnectQuery

Source: https://github.com/invertase/tanstack-query-firebase/blob/main/docs/react/data-connect/hooks/useDataConnectQuery.mdx

Demonstrates how to use the useDataConnectQuery hook to fetch and display a list of movies. Ensure you have imported the hook and your Data Connect query definition.

```jsx
import { useDataConnectQuery } from "@tanstack-query-firebase/react/data-connect";
import { listMoviesQuery } from "@your-package-name/your-connector";

function Component() {
  const { data, isPending, isSuccess, isError, error } = useDataConnectQuery(
    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>
  );
}
```

--------------------------------

### One-time Read with useGetQuery

Source: https://github.com/invertase/tanstack-query-firebase/blob/main/docs/react/database/index.mdx

Use `useGetQuery` for a single read operation without setting up a realtime listener. Ensure a stable and unique `queryKey` is provided.

```tsx
import { ref } from "firebase/database";
import { useGetQuery } from "@tanstack-query-firebase/react/database";

function UserProfile({ uid }: { uid: string }) {
  const userRef = ref(database, `users/${uid}`);
  const { data: snapshot, isLoading, isError, error } = useGetQuery(userRef, {
    queryKey: ["database", "users", uid],
  });

  if (isLoading) return <p>Loading...</p>;
  if (isError) return <p>Error: {error.message}</p>;

  return <p>{snapshot?.val()?.name}</p>;
}
```

--------------------------------

### Manual Token Refresh with useGetIdTokenQuery

Source: https://github.com/invertase/tanstack-query-firebase/blob/main/docs/react/auth/hooks/useGetIdTokenQuery.mdx

Demonstrates how to manually trigger a token refresh using the `refetch` function returned by the hook. Includes a button to initiate the refresh and shows a loading state.

```jsx
import { useGetIdTokenQuery } from "@tan-stack-query-firebase/react/auth";

function TokenManager({ user }) {
  const { data: token, refetch, isFetching } = useGetIdTokenQuery(user);

  const handleRefresh = () => {
    refetch();
  };

  return (
    <div>
      <p>Current token: {token}</p>
      <button onClick={handleRefresh} disabled={isFetching}>
        {isFetching ? "Refreshing..." : "Refresh Token"}
      </button>
    </div>
  );
}
```

--------------------------------

### Biome Formatting Check

Source: https://github.com/invertase/tanstack-query-firebase/blob/main/CONTRIBUTING.md

Check code formatting across the project using Biome without making any changes.

```bash
pnpm format
```

--------------------------------

### Execute GetMovieById using Action Shortcut

Source: https://github.com/invertase/tanstack-query-firebase/blob/main/dataconnect-sdk/js/default-connector/README.md

Demonstrates how to execute the GetMovieById query using its action shortcut function, with and without an explicit DataConnect instance. Supports both async/await and Promise API.

```typescript
import { getDataConnect } from 'firebase/data-connect';
import { connectorConfig, getMovieById, GetMovieByIdVariables } from '@dataconnect/default-connector';

// The `GetMovieById` query requires an argument of type `GetMovieByIdVariables`:
const getMovieByIdVars: GetMovieByIdVariables = {
  id: ..., 
};

// Call the `getMovieById()` function to execute the query.
// You can use the `await` keyword to wait for the promise to resolve.
const { data } = await getMovieById(getMovieByIdVars);
// Variables can be defined inline as well.
const { data } = await getMovieById({ id: ..., });

// You can also pass in a `DataConnect` instance to the action shortcut function.
const dataConnect = getDataConnect(connectorConfig);
const { data } = await getMovieById(dataConnect, getMovieByIdVars);

console.log(data.movie);

// Or, you can use the `Promise` API.
getMovieById(getMovieByIdVars).then((response) => {
  const data = response.data;
  console.log(data.movie);
});

```

--------------------------------

### Querying Data with Generated Injectors

Source: https://github.com/invertase/tanstack-query-firebase/blob/main/docs/angular/data-connect/querying.mdx

Use generated injectors to automatically create query keys and infer data types for querying Firebase Data Connect. This example shows how to display a list of movies, handling loading, error, and data states.

```typescript
import { injectListMyPosts } from '@firebasegen/posts/angular'

@Component({
  ...
  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>
        }
    }
  `,
})
export class PostListComponent {
  movies = injectListMyMovies();
}
```

--------------------------------

### Execute UpsertMovie using MutationRef

Source: https://github.com/invertase/tanstack-query-firebase/blob/main/dataconnect-sdk/js/default-connector/README.md

Demonstrates how to execute the UpsertMovie mutation using a MutationRef, with and without an explicit DataConnect instance. Includes both async/await and Promise API usage.

```typescript
import { getDataConnect, executeMutation } from 'firebase/data-connect';
import { connectorConfig, upsertMovieRef, UpsertMovieVariables } from '@dataconnect/default-connector';

// The `UpsertMovie` mutation requires an argument of type `UpsertMovieVariables`:
const upsertMovieVars: UpsertMovieVariables = {
  id: ..., 
  title: ..., 
  imageUrl: ..., 
};

// Call the `upsertMovieRef()` function to get a reference to the mutation.
const ref = upsertMovieRef(upsertMovieVars);
// Variables can be defined inline as well.
const ref = upsertMovieRef({ id: ..., title: ..., imageUrl: ..., });

// You can also pass in a `DataConnect` instance to the `MutationRef` function.
const dataConnect = getDataConnect(connectorConfig);
const ref = upsertMovieRef(dataConnect, upsertMovieVars);

// Call `executeMutation()` on the reference to execute the mutation.
// You can use the `await` keyword to wait for the promise to resolve.
const { data } = await executeMutation(ref);

console.log(data.movie_upsert);

// Or, you can use the `Promise` API.
executeMutation(ref).then((response) => {
  const data = response.data;
  console.log(data.movie_upsert);
});
```

--------------------------------

### Execute DeleteMeta Mutation using Action Shortcut

Source: https://github.com/invertase/tanstack-query-firebase/blob/main/dataconnect-sdk/js/default-connector/README.md

Demonstrates how to execute the DeleteMeta mutation using the action shortcut function with different variable definition styles and with a DataConnect instance. Includes Promise API usage.

```typescript
import { getDataConnect } from 'firebase/data-connect';
import { connectorConfig, deleteMeta, DeleteMetaVariables } from '@dataconnect/default-connector';

// The `DeleteMeta` mutation requires an argument of type `DeleteMetaVariables`:
const deleteMetaVars: DeleteMetaVariables = {
  id: ..., 
};

// Call the `deleteMeta()` function to execute the mutation.
// You can use the `await` keyword to wait for the promise to resolve.
const { data } = await deleteMeta(deleteMetaVars);
// Variables can be defined inline as well.
const { data } = await deleteMeta({ id: ..., });

// You can also pass in a `DataConnect` instance to the action shortcut function.
const dataConnect = getDataConnect(connectorConfig);
const { data } = await deleteMeta(dataConnect, deleteMetaVars);

console.log(data.ref);

// Or, you can use the `Promise` API.
deleteMeta(deleteMetaVars).then((response) => {
  const data = response.data;
  console.log(data.ref);
});
```

--------------------------------

### Run without Emulators

Source: https://github.com/invertase/tanstack-query-firebase/blob/main/examples/react/useGetIdTokenQuery/README.md

Run the Vite development server without Firebase emulators.

```bash
pnpm dev
```

--------------------------------

### Execute DeleteMovie Mutation using Action Shortcut

Source: https://github.com/invertase/tanstack-query-firebase/blob/main/dataconnect-sdk/js/default-connector/README.md

Demonstrates how to execute the DeleteMovie mutation using the action shortcut function with and without an explicit DataConnect instance. Includes both async/await and Promise API usage.

```typescript
import { getDataConnect } from 'firebase/data-connect';
import { connectorConfig, deleteMovie, DeleteMovieVariables } from '@dataconnect/default-connector';

// The `DeleteMovie` mutation requires an argument of type `DeleteMovieVariables`:
const deleteMovieVars: DeleteMovieVariables = {
  id: ..., 
};

// Call the `deleteMovie()` function to execute the mutation.
// You can use the `await` keyword to wait for the promise to resolve.
const { data } = await deleteMovie(deleteMovieVars);
// Variables can be defined inline as well.
const { data } = await deleteMovie({ id: ..., });

// You can also pass in a `DataConnect` instance to the action shortcut function.
const dataConnect = getDataConnect(connectorConfig);
const { data } = await deleteMovie(dataConnect, deleteMovieVars);

console.log(data.movie_delete);

// Or, you can use the `Promise` API.
deleteMovie(deleteMovieVars).then((response) => {
  const data = response.data;
  console.log(data.movie_delete);
});
```

--------------------------------

### Initialize Firebase and TanStack Query in React

Source: https://github.com/invertase/tanstack-query-firebase/blob/main/docs/react/index.mdx

Set up your Firebase project and configure TanStack Query within your React application. This involves initializing Firebase and creating a QueryClient instance.

```jsx
import { initializeApp } from 'firebase/app';
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";

// TODO: Replace the following with your app's Firebase project configuration
const firebaseConfig = {
  //...
};

// Initialize Firebase
const app = initializeApp(firebaseConfig);

// Create a TanStack Query client instance
const queryClient = new QueryClient()

function App() {
  return (
    // Provide the client to your App
    <QueryClientProvider client={queryClient}>
      <MyApplication />
    </QueryClientProvider>
  )
}

render(<App />, document.getElementById('root'))
```

--------------------------------

### Basic Data Mutation

Source: https://github.com/invertase/tanstack-query-firebase/blob/main/docs/angular/data-connect/mutations.mdx

Demonstrates how to use the `injectCreateMovie` injector to mutate data. This injector is a convenience wrapper around `injectDataConnectMutation`.

```APIDOC
## Mutating Data

To mutate data in Firebase Data Connect, you can either use the generated injectors, or use the `injectDataConnectMutation` injector.

```ts
import { injectCreateMovie } from "@firebasegen/movies/angular";

@Component({
  ...
  template: `
  <button
    disabled={createMovie.isPending()}
    (click)="addMovie()"
  >
    {{createMovie.isPending() ? "Creating..." : "Create Movie"}}
  </button>
  `
})
class AddMovieComponent() {
  // Calls `injectDataConnectMutation` with the respective types.
  // Alternatively:
  // import { injectDataConnectMutation } from '@tanstack-query-firebase/angular/data-connect';
  // ...
  // createMovie = injectDataConnectMutation(createMovieRef);
  createMovie = injectCreateMovie();
  addMovie() {
    createMovie.mutate({
      title: 'John Wick',
      genre: "Action",
      imageUrl: "https://example.com/image.jpg",
    });
  }
}
```
```

--------------------------------

### Run Tests with Firebase Emulator

Source: https://github.com/invertase/tanstack-query-firebase/blob/main/CONTRIBUTING.md

Execute tests using the Firebase emulator, which is recommended for CI environments. This command automatically manages the emulator's lifecycle.

```bash
pnpm test:emulator
```

--------------------------------

### Using Initial Data

Source: https://github.com/invertase/tanstack-query-firebase/blob/main/docs/react/data-connect/querying.mdx

Pass a pre-fetched `QueryResult` instance to `useDataConnectQuery` to set `initialData`. The hook will immediately have data and refetch on mount, which can be controlled with `staleTime`.

```tsx
// Elsewhere in your application
const movies = await executeQuery(listMoviesRef());

// ...

function Component(props: { movies: QueryResult<ListMoviesData, unknown> }) {
  const { data, isPending, isSuccess, isError, error } = useDataConnectQuery(
    props.movies
  );
}
```

--------------------------------

### Connector Configuration for Angular

Source: https://github.com/invertase/tanstack-query-firebase/blob/main/docs/angular/index.mdx

Ensure 'angular: true' is set in your connector.yaml file to enable Angular SDK generation.

```yaml
generate:
  javascriptSdk:
    angular: true
    outputDir: "../movies-generated"
    package: "@movie-app/movies"
    packageJsonDir: "../../"

```

--------------------------------

### useGoOnlineMutation

Source: https://github.com/invertase/tanstack-query-firebase/blob/main/docs/react/database/hooks/useGoOnlineMutation.mdx

Reconnects the Realtime Database client to the server. This hook is used to manually bring the client online.

```APIDOC
## useGoOnlineMutation

### Description
Reconnects the Realtime Database client to the server. This hook is used to manually bring the client online.

### Usage

```tsx
import { useGoOnlineMutation } from "@tanstack-query-firebase/react/database";

const { mutate } = useGoOnlineMutation(database);
mutate();
```

### Parameters

#### Path Parameters
None

#### Query Parameters
None

#### Request Body
None

### Request Example
None

### Response
#### Success Response
None explicitly documented.

#### Response Example
None explicitly documented.
```

--------------------------------

### useClearIndexedDbPersistenceMutation with Options

Source: https://github.com/invertase/tanstack-query-firebase/blob/main/docs/react/firestore/hooks/useClearIndexedDbPersistenceMutation.mdx

Illustrates how to pass mutation options, such as `onSuccess` and `onError` callbacks, to the `useClearIndexedDbPersistenceMutation` hook. This allows for handling the success or failure of the persistence clearing operation.

```tsx
const mutation = useClearIndexedDbPersistenceMutation(firestore, {
  onSuccess() {
    console.log('IndexedDB persistence cleared');
  },
  onError(error) {
    console.error('Failed to clear IndexedDB persistence', error);
  },
});
```

--------------------------------

### Execute DeleteMovie Mutation using MutationRef

Source: https://github.com/invertase/tanstack-query-firebase/blob/main/dataconnect-sdk/js/default-connector/README.md

Demonstrates how to execute the DeleteMovie mutation using the MutationRef function and executeMutation, with and without an explicit DataConnect instance. Includes both async/await and Promise API usage.

```typescript
import { getDataConnect, executeMutation } from 'firebase/data-connect';
import { connectorConfig, deleteMovieRef, DeleteMovieVariables } from '@dataconnect/default-connector';

// The `DeleteMovie` mutation requires an argument of type `DeleteMovieVariables`:
const deleteMovieVars: DeleteMovieVariables = {
  id: ..., 
};

// Call the `deleteMovieRef()` function to get a reference to the mutation.
const ref = deleteMovieRef(deleteMovieVars);
// Variables can be defined inline as well.
const ref = deleteMovieRef({ id: ..., });

// You can also pass in a `DataConnect` instance to the `MutationRef` function.
const dataConnect = getDataConnect(connectorConfig);
const ref = deleteMovieRef(dataConnect, deleteMovieVars);

// Call `executeMutation()` on the reference to execute the mutation.
// You can use the `await` keyword to wait for the promise to resolve.
const { data } = await executeMutation(ref);

console.log(data.movie_delete);

// Or, you can use the `Promise` API.
executeMutation(ref).then((response) => {
  const data = response.data;
  console.log(data.movie_delete);
});
```

--------------------------------

### Configure Query Options for DataConnectQuery

Source: https://github.com/invertase/tanstack-query-firebase/blob/main/packages/angular/README.md

Shows how to pass options to `injectDataConnectQuery`, such as disabling the query by default using the `enabled` option.

```typescript
import {
    injectDataConnectQuery
} from '@tanstack-query-firebase/angular';
import { listMoviesRef } from '@myorg/movies/angular';

// ... inside a component
public query = injectDataConnectQuery(listMoviesRef(), () => ({
    enabled: false
}));
```

--------------------------------

### Basic Usage of useDataConnectMutation

Source: https://github.com/invertase/tanstack-query-firebase/blob/main/docs/react/data-connect/hooks/useDataConnectMutation.mdx

Demonstrates how to use the useDataConnectMutation hook to add a new movie. It includes handling form submission, managing pending, success, and error states, and displaying feedback to the user.

```jsx
import { useDataConnectQuery } from "@tanstack-query-firebase/react/data-connect";
import { createMovieRef } from "@your-package-name/your-connector";

function Component() {
  const { mutate, isPending, isSuccess, isError, error } = 
    useDataConnectMutation(createMovieRef);

  const handleFormSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    const data = new FormData(e.target as HTMLFormElement);

    mutate({
      title: data.get("title") as string,
      imageUrl: data.get("imageUrl") as string,
      genre: data.get("genre") as string,
    });
  };

  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={handleFormSubmit}>
        <input type="text" name="title" placeholder="Title" />
        <input type="text" name="genre" placeholder="Genre" />
        <input type="text" name="imageUrl" placeholder="Image URL" />

        {/* Form fields for movie data */}
        <button type="submit" disabled={isPending}>
          Add Movie
        </button>
      </form>
    </div>
  );
}
```

--------------------------------

### Turborepo Test Command

Source: https://github.com/invertase/tanstack-query-firebase/blob/main/CONTRIBUTING.md

Run tests across all packages in the monorepo using Turborepo. Ensure the Firebase emulator is running before executing this command.

```bash
pnpm turbo test
```

--------------------------------

### Configuring Query Options

Source: https://github.com/invertase/tanstack-query-firebase/blob/main/docs/angular/data-connect/querying.mdx

Pass query options to the injector to customize query behavior, such as setting a refetch interval. This leverages the full power of Tanstack Query.

```typescript
movies = injectListMovies(
  {
    refetchInterval: 1000,
  }
);

```

--------------------------------

### Reconnect Realtime Database Client

Source: https://github.com/invertase/tanstack-query-firebase/blob/main/docs/react/database/hooks/useGoOnlineMutation.mdx

Import and use the `useGoOnlineMutation` hook to trigger a reconnection to the Realtime Database. Call the `mutate` function returned by the hook to initiate the reconnection process.

```tsx
import { useGoOnlineMutation } from "@tanstack-query-firebase/react/database";

const { mutate } = useGoOnlineMutation(database);
mutate();
```

--------------------------------

### Basic Data Query

Source: https://github.com/invertase/tanstack-query-firebase/blob/main/docs/react/data-connect/querying.mdx

Use `useDataConnectQuery` to fetch data. The hook infers the data type and creates a query key automatically.

```tsx
import { useDataConnectQuery } from "@tan-query-firebase/react/data-connect";
import { listMoviesRef } from "@dataconnect/default-connector";

function Component() {
  const { data, isPending, isSuccess, isError, error } = useDataConnectQuery(
    listMoviesRef()
  );
}
```

--------------------------------

### Accessing Mutation Metadata

Source: https://github.com/invertase/tanstack-query-firebase/blob/main/docs/angular/data-connect/mutations.mdx

Demonstrates how to access metadata returned by the mutation, including `ref`, `source`, and `fetchTime`, after executing `mutateAsync`.

```APIDOC
## Overriding the mutation key

### Metadata

Along with the data, the function will also return the `ref`, `source`, and `fetchTime` metadata from the mutation.

```ts
const createMovie = injectDataConnectMutation(createMovieRef);

await createMovie.mutateAsync({
  title: 'John Wick',
  genre: "Action",
  imageUrl: "https://example.com/image.jpg",
});

console.log(createMovie.dataConnectResult().ref);
console.log(createMovie.dataConnectResult().source);
console.log(createMovie.dataConnectResult().fetchTime);
```
```