AngularFire Data Connect：在 Angular 应用中接入 Firebase SQL Connect 的完整指南

后端【免费下载链接】angularfireAngular Firebase ❤️项目地址https://gitcode.com/gh_mirrors/an/angularfire点击查看免费下载Firebase Data Connect在 Firebase 官方文档中现称为 Firebase SQL Connect是一个将 Cloud SQL for PostgreSQL 数据库与 GraphQL 配对的后端服务能够自动生成类型安全的 SDK用于查询query和变更mutation你的数据。本文基于 AngularFire 的官方文档 docs/data-connect.md 及其源码实现讲解如何在 Angular 应用中完成 Data Connect 的依赖注入、连接器配置、组件注入与类型安全 API 调用读完你将掌握从零接入 Firebase Data Connect 到 Angular 项目的完整实战方案。Firebase Data Connect 是什么Firebase Data Connect 的核心价值在于你不需要自己编写 REST 接口或手工维护数据访问层而是通过声明式的方式定义数据模型与操作queries、mutationsFirebase 会自动生成类型安全的 SDK。这些 SDK 与你的 GraphQL schema 强绑定编译期即可发现字段拼写错误、类型不匹配等问题。在 Angular 生态中AngularFire 对这一能力进行了封装使得 Data Connect 实例能够以 Angular 依赖注入DI的方式融入应用同时保持与 Firebase JS SDK 完全一致的 API 表面。前置条件安装 AngularFire使用 Data Connect 之前必须先确保 AngularFire 已通过 Angular CLI 的 schematic 添加进项目ng add angular/fire该命令会完成以下工作安装angular/fire及配套的 Firebase 依赖、生成或更新环境配置、并在项目中注册 AngularFire 的模块与 providers。完成安装后即可使用angular/fire/data-connect子包的各项导出。依赖注入提供 DataConnect 实例AngularFire 采用在应用根配置中提供实例、在组件中按需注入的架构。你需要在应用的app.config.ts中调用provideDataConnect并通过getDataConnect传入一个连接器配置connector config。这个连接器配置用来标识你的 service服务、connector连接器和 location部署区域。当你通过 Firebase 控制台或 CLI 搭建 Data Connect 时该配置会被自动生成并且也会从你生成的 SDK 中导出——也就是说实际项目中你通常直接导入 SDK 里现成的connectorConfig而无需手写。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)), ... ], ..., }三个关键字段的说明字段含义示例值connector连接器名称对应你在 Data Connect 中定义的 connectormy-connectorserviceData Connect 服务名用于定位对应后端服务my-servicelocation服务部署的区域GCP locationus-central1源码视角provideDataConnect 做了什么从 src/data-connect/data-connect.module.ts 可以看到provideDataConnect是一个返回EnvironmentProviders的函数。它做了三件事调用registerVersion(angularfire, VERSION.full, fdc)向 Firebase SDK 注册 AngularFire 的版本信息便于 Firebase 遥测与调试时识别封装层fdc即 Firebase Data Connect 的标识注册DEFAULT_DATA_CONNECT_INSTANCE_PROVIDER与DATA_CONNECT_INSTANCES_PROVIDER分别提供默认实例与全部实例集合将传入的工厂函数包装进PROVIDED_DATA_CONNECT_INSTANCES一个InjectionToken并标记为multi: true从而支持在应用中提供多个 Data Connect 实例。其中实例工厂被包在dataConnectInstanceFactory中核心逻辑是zone.runOutsideAngular(() fn(injector))见 src/data-connect/data-connect.module.ts——这是 AngularFire 所有模块的统一设计Firebase 实例的创建过程在 Angular Zone 之外执行避免不必要的变更检测触发而回调与结果再通过 src/zones.ts 中的调度器回到 Angular Zone 内确保变更检测与状态同步正确。在组件中注入 DataConnect实例提供完毕之后直接在组件中通过 Angular 的inject函数注入DataConnect即可使用import { Component, inject } from angular/core; import { DataConnect } from angular/fire/data-connect; Component({ ... }) export class MyComponent { private dataConnect inject(DataConnect); ... }这里注入的DataConnect是默认实例。从源码看AngularFire 通过ɵgetDefaultInstanceOf见 src/core.ts解析默认实例其解析规则是如果通过provideDataConnect只提供了一个实例直接返回该实例如果提供了多个实例则筛选出与默认 FirebaseApp 关联的那个如果仍未找到则回退到默认 FirebaseApp 内部注册的 provider 中获取。也就是说即便你为多个 FirebaseApp 分别配置了 Data ConnectAngular 应用也能稳定解析出与当前默认 App 对应的那个实例。多实例管理与实例流对于需要同时使用多个 Data Connect 实例例如对接多个服务或环境的场景AngularFire 额外提供了两个工具DataConnectInstances一个可注入的类构造时通过ɵgetAllInstancesOfDataConnect(data-connect)收集所有已注册实例见 src/data-connect/data-connect.tsdataConnectInstance$一个 RxJS Observable每 300ms 轮询一次全部实例并基于distinct()去重后发射适合在响应式数据流中动态跟踪实例变化见 src/data-connect/data-connect.ts。从源码结构看AngularFire 用一个命名常量DATA_CONNECT_PROVIDER_NAME data-connect作为 Firebase 组件容器内的注册标识见 src/data-connect/data-connect.ts多实例的查询正是基于该标识完成的。Firebase APIAngularFire 的透明包装AngularFire 对 Firebase JS SDK 的 Data Connect 模块做了零成本迁移式的封装API 完全一致仅需更换 import 来源。将原来的import { ... } from firebase/data-connect改为import { ... } from angular/fire/data-connect然后遵循 Firebase 官方文档Quickstart编写查询与变更逻辑即可。也就是说你在 Firebase 文档中学到的queryRef、mutationRef、executeQuery、executeMutation等用法在 Angular 项目中可以原样使用。实际可用的函数清单从 src/data-connect/firebase.ts 的导出可以看到AngularFire 对以下 Data Connect API 做了 Zone 包装ɵzoneWrap函数作用getDataConnect根据 connector config 获取 Data Connect 实例queryRef创建类型安全的查询引用mutationRef创建类型安全的变更引用executeQuery执行查询并返回结果executeMutation执行变更并返回结果subscribe订阅查询结果的实时更新toQueryRef将数据快照转换为可观察的查询引用connectDataConnectEmulator连接本地 Data Connect 模拟器开发调试用setLogLevel设置日志级别terminate终止当前 Data Connect 实例此外该文件会export * from firebase/data-connect因此类型定义、DataConnect类等原样透传。Zone 包装的底层原理包装的实质在 src/zones.ts 的ɵzoneWrap中调用被拆分为在 Zone 外执行 在 Zone 内回调。函数调用本身通过runOutsideAngular在 Angular Zone 之外执行避免 Firestore/Data Connect 的同步查询结果触发额外的变更检测传入的回调函数会被zoneWrapFn包装回到runInInjectionContextrun的上下文里执行保证回调内的状态更新能被 Angular 正确感知返回 Promise 的函数如executeQuery、executeMutation会通过PendingTasks跟踪确保异步操作完成前应用的稳定性这对 SSR 预渲染与 hydration 很重要返回 Observable 的函数则挂载outsideAngular/insideAngular两个调度器实现订阅在 Zone 外、发射在 Zone 内。如果这些 API 在 Injection 上下文之外被调用AngularFire 会输出警告日志提示可能引发变更检测与 hydration 问题详见 docs/zones.md。因此请务必在组件、服务等可注入环境中调用 Data Connect 相关 API。完整接入示例整合将以上内容整合一个典型的接入流程如下// app.config.ts —— 应用根配置 import { provideFirebaseApp, initializeApp } from angular/fire/app; import { provideDataConnect, getDataConnect } from angular/fire/data-connect; import { connectorConfig } from ./generated-data-connect; // 由 Data Connect 生成的 SDK 导出 export const appConfig: ApplicationConfig { providers: [ provideFirebaseApp(() initializeApp(environment.firebase)), provideDataConnect(() getDataConnect(connectorConfig)), provideRouter(appRoutes), ], };// 任意组件 import { Component, inject } from angular/core; import { DataConnect, queryRef, executeQuery } from angular/fire/data-connect; Component({ ... }) export class MovieListComponent { private dataConnect inject(DataConnect); async loadMovies() { const ref queryRef(this.dataConnect, listMovies); // 生成的类型安全查询 const result await executeQuery(ref); return result.data.movies; } }开发阶段还可以通过connectDataConnectEmulator将请求指向本地模拟器配合 Firebase Emulator Suite 进行无成本的本地联调。验证与测试仓库中的 src/data-connect/data-connect.spec.ts 展示了该模块的测试骨架通过TestBed配置provideFirebaseApp(() initializeApp(COMMON_CONFIG, appName))与provideDataConnect(() getDataConnect(getApp(appName)))然后断言TestBed.inject(DataConnect)与手动创建的实例相等。这印证了两点一是DataConnect令牌确实可注入二是注入解析到的就是你在provideDataConnect中提供的那份实例。小结Firebase Data ConnectSQL Connect将 Cloud SQL for PostgreSQL 与 GraphQL 结合自动生成类型安全 SDKAngularFire 通过provideDataConnect(() getDataConnect(connectorConfig))在应用根配置中提供实例连接器配置connector、service、location通常由 Data Connect 设置流程自动生成并从 SDK 导出组件中inject(DataConnect)即可拿到默认实例多实例场景可使用DataConnectInstances与dataConnectInstance$所有 API 与 Firebase JS SDK 一致仅需将 import 从firebase/data-connect切换到angular/fire/data-connectAngularFire 已通过 Zone 包装处理了变更检测、PendingTasks 与 SSR 稳定性问题。相关深入材料官方指南见 docs/data-connect.mdZone 机制详解见 docs/zones.md模块实现见 src/data-connect/data-connect.module.ts 与 src/data-connect/firebase.ts。赞分享后端【免费下载链接】angularfireAngular Firebase ❤️项目地址https://gitcode.com/gh_mirrors/an/angularfire点击查看免费下载相关推荐Faker 实战指南用 Faker::Movies::Departed 生成《无间道风云》演员、角色与经典台词Faker 实战指南用 Faker::Movies::Departed 生成《无间道风云》演员、角色与经典台词 导读 Faker::Movies::Depar后端AngularFire 集成指南在 Angular 应用中接入 Firebase Authentication 与 SSR 登录态同步AngularFire 集成指南在 Angular 应用中接入 Firebase Authentication 与 SSR 登录态同步 本指南围绕 Angul后端AngularFire Performance Monitoring 入门指南为 Angular 应用接入 Firebase 性能监控AngularFire Performance Monitoring 入门指南为 Angular 应用接入 Firebase 性能监控 本篇技术指南聚焦于 A后端上一篇构建交互式命令行工具Cleo 问答组件完全指南下一篇【亲测免费】 IBAN.js - 国际银行账号验证与格式化工具创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考