React を��������て Firebase Data Connect を使ってみる

このクイックスタートでは、小さなサンプル データベースを作成してデプロイし、 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 の定義例を確認する

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

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. ウェブアプリを設定する

次のコマンドを実行して、新しいウェブアプリを 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. ウェブアプリを試す

開発用サーバーを起動して、サンプルアプリの動作を確認します。

 
npm run dev

次のステップ

Data Connect VS Code 拡張機能を試す

Data Connect で開発する場合は、 Data Connect VS Code 拡張機能を使用することを強くおすすめします。 Visual Studio Code を主要な開発環境として使用していない場合でも、この拡張機能には、スキーマとオペレーションの開発をより便利にするいくつかの機能があります。

  • GraphQL 言語サーバー。 Data Connect 固有の構文チェックとオートコンプリート候補を提供します。Data Connect
  • コードに沿った CodeLens ボタン。スキーマ定義ファイルからデータの読み取りと書き込みを行い、オペレーション定義からクエリとミューテーションを実行できます。
  • 生成された SDK を GraphQL の定義と自動的に同期します。
  • ローカル エミュレータの設定を簡素化します。
  • 本番環境へのデプロイを簡素化します。

ローカル開発に Data Connect エミュレータを使用する

このチュートリアルでは、Data Connect スキーマとオペレーションを本番環境に直接デプロイする方法について説明しまし��が、アプリを積極的に開発している間は、本番環境データベースを変更しないことをおすすめします。代わりに、Data Connect エミュレータを設定し、本番環境ではなくエミュレータに対して開発作業を行います。エミュレータは、CloudSQL 上のライブ Postgres インスタンスと同様に動作するローカル PGlite インスタンスを設定します。

アプリのスキーマと オペレーションを作成する方法を学ぶ

Data Connect でアプリを開発する場合、スキーマとオペレーションの設計 は、最初に行う最も重要な開発タスクの 1 つです。