回应

在此快速入门中，您将创建一个小型示例数据库并进行部署，然后从 React 前端访问该数据库。

前提条件

如需完成本快速入门，您需要以下各项：

  • 具有 NPM 的 Node.js 环境。
  • Google 账号。

教程

教程
1. 初始化您的项目 创建一个新目录并在其中初始化 Firebase 项目。出现提示时， 请选择以下选项： - 创建新的 Firebase 项目。 - 不使用 Gemini 创建架构（在本教程中，您将使用预构建的 示例架构）。 - 创建新的 Cloud SQL 实例。 - 创建 React 模板。 mkdir myproj ; cd myproj npx -y firebase-tools@latest login --reauth npx -y firebase-tools@latest init dataconnect
2. 查看示例 GraphQL 定义 在 SQL Connect 中，您可以使用 GraphQL 定义所有数据库架构和操作 。初始化项目时，Firebase CLI 会创建一些 示例定义，帮助您入门。 dataconnect/schema/schema.gql（摘录） type Movie @table { title: String! imageUrl: String! genre: String } type MovieMetadata @table { movie: Movie! @unique rating: Float releaseYear: Int description: String } dataconnect/example/queries.gql（摘录） query ListMovies @auth(level: PUBLIC) { movies { id title imageUrl genre } }
3. 部署架构和操作 每当您更改数据库架构、查询或变更时，都必须 部署它们，才能使更改在数据库中生效。 npx -y firebase-tools@latest deploy --only dataconnect
4. 使用示例数据为数据库植入种子数据 植入种子数据后，您在测试示例应用时可以查看这些数据。请注意 在此步骤中，您将执行任意 GraphQL，这对于管理任务是允许的 。 npx -y firebase-tools@latest \ dataconnect:execute dataconnect/seed_data.gql
5. 生成 JavaScript 客户端 SDK 此命令使用您的 GraphQL 定义来生成专门针对您的数据库的 JavaScript 库 ，其中包含类型定义。您可以在客户端应用中使用此库 来执行所有数据库操作。 您可以通过向 connector.yaml 添加定义来为多个平台生成库，包括适用于 Android 的 Kotlin、 适用于 iOS 的 Swift 和 Flutter。 npx -y firebase-tools@latest dataconnect:sdk:generate 自动生成的 React SDK（摘录） export interface ListMoviesData { movies: ({ id: UUIDString; title: string; imageUrl: string; genre?: string | null; } & Movie_Key)[]; } export function useListMovies( options?: useDataConnectQueryOptions&<ListMoviesData> ): UseDataConnectQueryResult&<ListMoviesData, undefined>;
6. 设置 Web 应用 运行以下命令，将新的 Web 应用添加到 Firebase 项目。 npx -y firebase-tools@latest \ apps:create web react-example npx -y firebase-tools@latest \ apps:sdkconfig web \ -o web-app/src/firebase-config.json cd web-app npm i firebase \ @tanstack/react-query \ @tanstack-query-firebase/react
7. 编写示例 React 客户端 将 web-app/src/App.jsx 的内容替换为此简单的 React 应用。 请注意，该应用使用生成的 SDK 中的函数完成必要的数据库访问。为 React 生成的 SDK 使用 TanStack Query 来处理状态 管理。 import { initializeApp } from 'firebase/app'; import firebaseConfig from './firebase-config.json'; import { QueryClient, QueryClientProvider } from '@tanstack/react-query'; import { useListMovies } from '@dataconnect/generated/react'; import './App.css'; const app = initializeApp(firebaseConfig); const queryClient = new QueryClient(); function App() { return ( <QueryClientProvider client={queryClient}> <Movies /> </QueryClientProvider> ); } function Movies() { const { isLoading, data } = useListMovies(); if (isLoading) { return <h1>...</h1> } return ( <> {data?.movies.map( movie => <h1 key={movie.id}>{movie.title}</h1> )} </> ); } export default App;
8. 试用 Web 应用 启动开发服务器，查看示例应用的实际运行情况。 npm run dev

后续步骤

试用 SQL Connect VS Code 扩展程序

使用 SQL Connect 进行开发时，我们强烈建议您使用 SQL Connect VS Code 扩展程序。 即使您不使用 Visual Studio Code 作为主要开发 环境，该扩展程序也提供多项功能，让架构和操作 开发更加便捷：

  • GraphQL 语言服务器，提供特定于 SQL Connect的语法检查和自动补全建议
  • 与代码内联的 CodeLens 按钮，可让您从架构 定义文件中读取和写入数据，并从操作定义中执行查询和变更。
  • 自动使生成的 SDK 与 GraphQL 定义保持同步。
  • 简化的本地模拟器设置。
  • 简化了向生产环境的部署。

使用 SQL Connect 模拟器进行 本地开发

虽然本教程介绍了如何将 SQL Connect 架构和操作直接部署到生产环境，但您可能不希望在积极开发 应用时更改生产数据库。相反，您应该设置 SQL Connect 模拟器 并针对该模拟器而不是生产环境执行开发工作。该模拟器 会设置一个本地 PGlite 实例，其行为与实时 PostgreSQL 实例在 Cloud SQL 上的行为类似。

了解如何为应用编写架构和 操作

使用 SQL Connect 开发应用时，架构和操作的设计 是您将完成的首要且最重要的开发任务之一。

  • 控制台中的 Firebase Gemini 是一种 AI 工具 ，可以根据应用的自然语言SQL Connect 描述生成架构。此工具可以帮助您快速入门 ，尤其是在您之前从未接触过关系型数据库的情况下。
  • 或者，您也可以直接使用 GraphQL 编写数据库架构、查询和变更 直接使用 GraphQL。首先阅读 设计 SQL Connect 架构中的指南，然后继续阅读后续页面，了解如何编写操作。

了解如何从 SQL Connect 获取实时更新

您可以使用 SQL Connect 编写可实时响应数据更改的客户端应用。请参阅从 SQL Connect 获取实时更新。