开始使用 React 搭配 Firebase Data Connect

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

前提条件

如需完成本快速入门，您需要具备以下条件：

  • 具有 NPM 的 Node.js 环境。
  • 一个谷歌账号。

教程

教程

1. 创建新的 Firebase 项目

首先在 Firebase 控制台 中创建一个新的 Firebase 项目。然后，将项目升级到 Blaze 方案。

2. 初始化您的项目

创建一个新目录，并在其中初始化 Firebase 项目。出现提示时，请选择以下选项：

  • 选择您在上一步中创建的项目。
  • 请勿使用 Gemini 创建架构（在本教程中，您将使用预构建的示例架构）。
  • 创建新的 Cloud SQL 实例。
  • 创建 React 模板。
 
npx -y firebase-tools@latest login --reauth
npx -y firebase-tools@latest init dataconnect

3. 请查看示例 GraphQL 定义

在 Data 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
  }
}

4. 部署您的模式和操作

无论何时对数据库架构、查询或突变进行更改，您都必须部署这些更改，才能使它们在数据库中生效。

 
npx -y firebase-tools@latest \
    deploy --only dataconnect

5. 使用示例数据初始化数据库

此初始数据将为您提供在测试示例应用时可供查看的内容。请注意，在此步骤中，您正在执行任意 GraphQL，这对于管理任务是允许的。

 
npx -y firebase-tools@latest \
    dataconnect:execute dataconnect/seed_data.gql

6. 生成 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>;

7. 搭建一个 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 ; cd ..

8. 编写一个 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;

9. 试试这个网页应用

启动开发服务器，查看示例应用的实际效果。

 
npm run dev

后续步骤

试用 Visual Studio Code 扩展程序

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

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

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

虽然本教程演示了如何将 Data Connect 模式和操作直接部署到生产环境，但在积极开发应用程序的过程中，您可能不希望更改生产数据库。因此，请设置 Data Connect 模拟器，并在其上进行开发工作，而不是直接在生产环境中进行开发。该模拟器会设置一个本地 PGlite 实例，其行为类似于 CloudSQL 上的实时 Postgres 实例。

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

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

  • Firebase 控制台中的 Gemini是一款可以生成信息的 AI 工具Data Connect根据您的应用程序的自然语言描述生成模式。如果您之前从未接触过关系型数据库，这个工具可以帮助您快速入门。
  • 或者，您也可以直接使用 GraphQL 编写数据库架构、查询和变更。 首先，请参阅设计 Data Connect 架构页面，然后继续参阅后续页面，了解如何编写操作。