or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

ai.mdanalytics.mdapp-check.mdauth-guard.mdauthentication.mddata-connect.mddatabase.mdfirebase-app.mdfirestore.mdfunctions.mdindex.mdmessaging.mdperformance.mdremote-config.mdstorage.mdvertexai.md
tile.json

data-connect.mddocs/

Data Connect

Firebase Data Connect provides relational database integration and GraphQL-like queries for Angular applications.

Capabilities

Standalone Provider

export function provideDataConnect(fn: () => DataConnect): EnvironmentProviders;
export function getDataConnect(app?: FirebaseApp): DataConnect;

Angular Services

export class DataConnect extends DataConnect {}
export class DataConnectInstances extends Array<DataConnect> {}
export const dataConnectInstance$: Observable<DataConnect>;

Data Connect Functions

/**
 * Get Firebase Data Connect instance
 * @param app - Optional Firebase app instance
 * @returns Firebase Data Connect instance
 */
export function getDataConnect(app?: FirebaseApp): DataConnect;

/**
 * Execute a GraphQL query
 * @param queryRef - Query reference
 * @returns Promise resolving to query result
 */
export function executeQuery<Data, Variables>(
  queryRef: QueryRef<Data, Variables>
): Promise<QueryResult<Data>>;

/**
 * Execute a GraphQL mutation
 * @param mutationRef - Mutation reference
 * @returns Promise resolving to mutation result
 */
export function executeMutation<Data, Variables>(
  mutationRef: MutationRef<Data, Variables>
): Promise<MutationResult<Data>>;

/**
 * Create a query reference
 * @param dataConnect - Data Connect instance
 * @param queryName - Name of the query
 * @param variables - Query variables
 * @returns Query reference
 */
export function queryRef<Data, Variables>(
  dataConnect: DataConnect,
  queryName: string,
  variables?: Variables
): QueryRef<Data, Variables>;

/**
 * Create a mutation reference
 * @param dataConnect - Data Connect instance
 * @param mutationName - Name of the mutation
 * @param variables - Mutation variables
 * @returns Mutation reference
 */
export function mutationRef<Data, Variables>(
  dataConnect: DataConnect,
  mutationName: string,
  variables?: Variables
): MutationRef<Data, Variables>;

/**
 * Subscribe to real-time query updates
 * @param queryRef - Query reference
 * @param callback - Callback function for updates
 * @returns Unsubscribe function
 */
export function subscribe<Data, Variables>(
  queryRef: QueryRef<Data, Variables>,
  callback: (result: QueryResult<Data>) => void
): () => void;

/**
 * Connect to Data Connect emulator
 * @param dataConnect - Data Connect instance
 * @param host - Emulator host
 * @param port - Emulator port
 * @param sslEnabled - Whether SSL is enabled
 */
export function connectDataConnectEmulator(
  dataConnect: DataConnect,
  host: string,
  port: number,
  sslEnabled?: boolean
): void;

/**
 * Terminate Data Connect instance
 * @param dataConnect - Data Connect instance to terminate
 * @returns Promise that resolves when terminated
 */
export function terminate(dataConnect: DataConnect): Promise<void>;

Types

interface QueryRef<Data, Variables> {
  readonly dataConnect: DataConnect;
  readonly queryName: string;
  readonly variables?: Variables;
}

interface MutationRef<Data, Variables> {
  readonly dataConnect: DataConnect;
  readonly mutationName: string;
  readonly variables?: Variables;
}

interface QueryResult<Data> {
  data: Data;
  errors?: GraphQLError[];
}

interface MutationResult<Data> {
  data: Data;
  errors?: GraphQLError[];
}

interface GraphQLError {
  message: string;
  locations?: ReadonlyArray<SourceLocation>;
  path?: ReadonlyArray<string | number>;
  extensions?: any;
}

interface SourceLocation {
  line: number;
  column: number;
}

Usage Examples

import { Component, inject } from '@angular/core';
import {
  DataConnect,
  queryRef,
  mutationRef,
  executeQuery,
  executeMutation,
  subscribe
} from '@angular/fire/data-connect';

interface User {
  id: string;
  name: string;
  email: string;
}

interface CreateUserVariables {
  name: string;
  email: string;
}

@Component({
  selector: 'app-data-connect',
  template: `
    <div>
      <h3>Users</h3>
      <ul>
        <li *ngFor="let user of users">{{ user.name }} - {{ user.email }}</li>
      </ul>
      <button (click)="createUser()">Create User</button>
    </div>
  `,
})
export class DataConnectComponent {
  private dataConnect = inject(DataConnect);
  users: User[] = [];

  ngOnInit() {
    this.loadUsers();
    this.subscribeToUsers();
  }

  async loadUsers() {
    try {
      const usersQuery = queryRef<User[], {}>(this.dataConnect, 'GetUsers');
      const result = await executeQuery(usersQuery);
      this.users = result.data;
    } catch (error) {
      console.error('Error loading users:', error);
    }
  }

  subscribeToUsers() {
    const usersQuery = queryRef<User[], {}>(this.dataConnect, 'GetUsers');
    subscribe(usersQuery, (result) => {
      if (result.data) {
        this.users = result.data;
      }
    });
  }

  async createUser() {
    try {
      const createUserMutation = mutationRef<User, CreateUserVariables>(
        this.dataConnect,
        'CreateUser',
        {
          name: 'John Doe',
          email: 'john@example.com'
        }
      );
      
      const result = await executeMutation(createUserMutation);
      console.log('User created:', result.data);
    } catch (error) {
      console.error('Error creating user:', error);
    }
  }
}