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

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

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

ローカル開発フローを選択する

Data Connect には、開発ツールをインストールしてローカルで作業する方法が 2 つあります。

前提条件

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

• Firebase プロジェクト。まだ作成していない場合は、Firebase コンソールで作成します。

開発環境を設定する

1. ローカル プロジェクト用の新しいディレクトリを作成します。

2. 作成した新しいディレクトリで次のコマンドを実行します。

     curl -sL https://firebase.tools/dataconnect | bash

   このスクリプトは、開発環境をセットアップし、ブラウザベースの IDE を起動しようとします。この IDE には、事前バンドルの VS Code 拡張機能などのツールが用意されており、スキーマの管理、アプリケーションで使用するクエリとミューテーションの定義、強力な型付けの SDK の生成に役立ちます。

alias dataconnect='curl -sL https://firebase.tools/dataconnect | bash'

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

ローカル プロジェクトを設定するには、プロジェクト ディレクトリを初期化します。IDE ウィンドウの左側のパネルで 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 スキーマの詳細については、ドキュメントをご覧ください

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

IDE エディタパネルに、/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 ファイルで、[実行（ローカル）] ボタンをクリックしてクエリを実行します。

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 を生成し、アプリで使用する

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

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

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

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

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

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

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

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

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

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

4. IDE ウィンドウの VS Code 拡張機能 UI で、[Deploy to production] ボタンをクリックします。

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