Firebase Data Connect をローカルで使ってみる

このクイックスタートでは、本番環境の SQL インスタンスを設定せずに、アプリケーションで Firebase Data Connect をローカルにビルドする方法について説明します。

• Firebase プロジェクトに Firebase Data Connect を追加します。
• ローカル インスタンスで動作する Visual Studio Code 拡張機能を含む開発環境を設定します。
• 次に、次のことを行う方法を説明します。
  • 映画アプリのスキーマを作成する
  • アプリで使用するクエリとミューテーションを定義する
  • ローカル エミュレータに対してサンプルデータを使用してクエリとミューテーションをテストする
  • 強力な型付けの SDK を生成し、アプリで使用する
  • 最終的なスキーマ、クエリ、データをクラウドにデプロイします（省略可、Blaze プランが必要です）。

前提条件

このクイックスタートを使用するには、以下が必要です。

• Linux、macOS、Windows
• Visual Studio Code
• Windows の場合は nvm-windows、macOS または Linux の場合は nvm を使用して Node.js をインストールします。
• まだ作成していない場合は、Firebase コンソールで Firebase プロジェクトを作成します。

開発環境を設定する

スキーマを管理し、アプリケーションで使用するクエリを定義するには Visual Studio Code が必要です。強力な型付けされた SDK が自動的に生成されます。

1. ローカル プロジェクト用の新しいディレクトリを作成します。
2. 新しいディレクトリで VS Code を開きます。
3. Visual Studio Code Marketplace から Firebase Data Connect 拡張機能をインストールします。

プロジェクト ディレクトリを設定する

ローカル プロジェクトを設定するには、プロジェクト ディレクトリを初期化します。VS Code の左側のパネルで Firebase アイコンをクリックして、Data Connect VS Code 拡張機能の UI を開きます。

1. [Google でログイン] ボタンをクリックします。
2. [Firebase プロジェクトを接続] ボタンをクリックし、コンソールで前に作成したプロジェクトを選択します。
3. [Run firebase init] ボタンをクリックします。

4. [Start emulators] ボタンをクリックします。

スキーマの作成

Firebase プロジェクト ディレクトリの /dataconnect/schema/schema.gql ファイルで、映画に関する GraphQL スキーマの定義を開始します。

映画

Data Connect では、GraphQL フィールドは列にマッピングされます。映画には id、title、imageUrl、genre があります。Data Connect は、プリミティブ データ型 String と UUID を認識します。

次のスニペットをコピーするか、ファイル内の対応する行のコメント化を解除します。

# By default, a UUID id key will be created by default as primary key.
# If you want to specify a primary key, say title, which you can do through
# the @table(key: "title") directive
type Movie @table {
  id: UUID! @default(expr: "uuidV4()")
  title: String!
  imageUrl: String!
  genre: String
}

MovieMetadata

次のスニペットをコピーするか、ファイル内の対応する行のコメント化を解除します。

# Movie - MovieMetadata is a one-to-one relationship
type MovieMetadata @table {
  # This time, we omit adding a primary key because
  # you can rely on Data Connect to manage it.

  # @unique indicates a 1-1 relationship
  movie: Movie! @unique
  # movieId: UUID <- this is created by the above reference
  rating: Float
  releaseYear: Int
  description: String
}

movie フィールドは Movie 型にマッピングされています。Data Connect は、これが Movie と MovieMetadata の関係であることを理解し、この関係を管理します。

Data Connect スキーマの詳細については、ドキュメントをご覧ください

テーブルにデータを追加する

VS Code エディタ パネルに、/dataconnect/schema/schema.gql の GraphQL 型の上に CodeLens ボタンが表示されます。[データを追加] ボタンと [実行（ローカル）] ボタンを使用して、ローカル データベースにデータを追加できます。

Movie テーブルと MovieMetadata テーブルにレコードを追加するには:

1. schema.gql で、Movie 型宣言の上にある [データを追加] ボタンをクリックします。
   
2. 生成された Movie_insert.gql ファイルで、3 つのフィールドのデータをハードコードします。
3. [Run (Local)] ボタンをクリックします。
   
4. 前の手順を繰り返して MovieMetadata テーブルにレコードを追加し、生成された MovieMetadata_insert ミューテーションのプロンプトが表示されたら、movieId フィールドに Movie の id を指定します。

データが追加されたことをすばやく確認するには:

1. schema.gql に戻り、Movie 型宣言の上にある [データの読み取り] ボタンをクリックします。
2. 生成された Movie_read.gql ファイルで、[Run (Local)] ボタンをクリックしてクエリを実行します。

Data Connect ミューテーションの詳細については、ドキュメントをご覧ください

クエリを定義する

次に、アプリケーションで必要となるクエリを定義します。デベロッパーは GraphQL クエリではなく SQL クエリの作成に慣れているため、最初は少し違和感があるかもしれません。ただし、GraphQL は、未加工の SQL よりもはるかに簡潔で型安全です。また、VS Code 拡張機能により、開発が容易になります。

/dataconnect/connector/queries.gql ファイルを編集します。すべての映画を取得する場合は、次のようなクエリを使用します。

# File `/dataconnect/connector/queries.gql`

# @auth() directives control who can call each operation.
# Anyone should be able to list all movies, so the auth level is set to PUBLIC
query ListMovies @auth(level: PUBLIC) {
  movies {
    id
    title
    imageUrl
    genre
  }
}

近くの CodeLens ボタンを使用してクエリを実行します。

データベースのリレーションシップをグラフのように扱える点は、非常に魅力的な機能です。MovieMetadata には映画を参照する movie フィールドがあるため、このフィールドにネストして映画情報に関する情報を取得できます。生成された型 movieMetadata_on_movie を ListMovies クエリに追加してみます。

query ListMovies @auth(level: PUBLIC) {
  movies {
    id
    title
    imageUrl
    genre
    movieMetadata_on_movie {
        rating
    }
  }
}

Data Connect クエリの詳細については、ドキュメントをご覧ください

SDK を生成し、アプリで使用する

VS Code の左側のパネルで Firebase アイコンをクリックして、Data Connect VS Code 拡張機能の UI を開きます。

1. [Add SDK to app] ボタンをクリックします。

2. 表示されたダイアログで、アプリのコードを含むディレクトリを選択します。Data ConnectSDK コードが生成され、そこに保存されます。

3. アプリ プラットフォームを選択し、選択したディレクトリに SDK コードがすぐに生成されることを確認します。

生成された SDK を使用して、クライアント アプリ（ウェブ、Android、iOS、Flutter）からクエリとミューテーションを呼び出す方法を学びます。

スキーマとクエリを本番環境にデプロイする

アプリでローカル設定を完了したら、スキーマ、データ、クエリをクラウドにデプロイできます。Cloud SQL インスタンスを設定するには、Blaze プランが必要です。

1. Firebase コンソールの [データ接続] セクションに移動し、無料試用版の Cloud SQL インスタンスを作成します。

2. VS Code に統合されたターミナルで firebase init dataconnect を実行し、コンソールで作成したリージョン/サービス ID を選択します。

3. [ファイル dataconnect/dataconnect.yaml はすでに存在します。上書きしますか？] というメッセージが表示されたら、[Y] を選択します。

4. Data Connect VS Code 拡張機能の UI で、[本番環境にデプロイ] ボタンをクリックします。

5. デプロイしたら、Firebase コンソールに移動して、スキーマ、オペレーション、データがクラウドにアップロードされていることを確認します。スキーマを表示し、コンソールでオペレーションを実行できるはずです。Cloud SQL for PostgreSQL インスタンスは、最終的にデプロイされた生成されたスキーマとデータで更新されます。