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

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

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

前提条件

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

開発環境を設定する

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

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

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

ローカル プロジェクトを設定するには、プロジェクト ディレクトリを初期化します。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 型の上の [データを追加] ボタンをクリックします。 の宣言が必要です。
    Firebase Data Connect の Code Lens データ追加ボタン
  2. 生成される Movie_insert.gql ファイルで、次の変数のデータのハードコードを行います。 3 つのフィールドがあります
  3. [Run (Local)] ボタンをクリックします。
    Firebase Data Connect の [Code] レンズの実行ボタン
  4. 上記の手順を繰り返して、MovieMetadata テーブルにレコードを追加します。 [movie] フィールドに映画の uid を指定します。 生成された MovieMetadata_insert ミューテーション。

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

  1. schema.gql に戻り、[データを読み取る] ボタンをクリックします。
  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 Connect。SDK コードが生成され 保存します。

  3. アプリ プラットフォームを選択すると、SDK コードがすぐに 生成されます。

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

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

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

  1. Firebase コンソールの [Data Connect] セクションに移動して、 無料トライアルの Cloud SQL インスタンスです

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

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

  4. Data Connect VS Code Extension UI で、[Deploy to production] をクリックします。 ] ボタンを離します。

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

次のステップ

デプロイされたプロジェクトを確認し、その他のツールを確認する。

  • データベースへのデータの追加、スキーマの検査と変更、 Firebase コンソールの Data Connect サービス。

詳しくはドキュメントをご覧ください。たとえば、クイックスタートを完了したので、次のようにします。