Firebase Data Connect provides relational database integration and GraphQL-like queries for Angular applications.
export function provideDataConnect(fn: () => DataConnect): EnvironmentProviders;
export function getDataConnect(app?: FirebaseApp): DataConnect;export class DataConnect extends DataConnect {}
export class DataConnectInstances extends Array<DataConnect> {}
export const dataConnectInstance$: Observable<DataConnect>;/**
* 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>;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;
}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);
}
}
}