Firebase Data Connect を使ってみる

このクイックスタートの学習内容は次のとおりです。

  • Firebase プロジェクトに Firebase Data Connect を追加します。
  • Visual Studio を含む開発環境をセットアップする 本番環境インスタンスで動作するコード拡張。
  • その後、次の方法を紹介します。 <ph type="x-smartling-placeholder">
      </ph>
    • メールアプリのスキーマを作成し、本番環境にデプロイします。
    • スキーマのクエリとミューテーションを定義します。
    • 最終的なスキーマ、クエリ、データを本番環境にデプロイします。

前提条件

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

Firebase プロジェクトに接続する

  1. Firebase プロジェクトをまだ作成していない場合は作成します。
    1. Firebase コンソールで [プロジェクトを追加] をクリックし、画面上の手順に沿って操作します。

  2. プロジェクトを Blaze プランにアップグレードします。これにより、Cloud SQL インスタンスを 使用します。

  3. Firebase コンソールの Data Connect セクションに移動します。 製品設定ワークフローに従います

  4. Cloud SQL for PostgreSQL データベースのロケーションを選択します。

  5. プロジェクト、サービス、データベースの名前と ID をメモして、後で確認できるようにします。

  6. 残りのセットアップ フローに沿って操作し、[完了] をクリックします。

開発環境を選択して設定する

Data Connect は、プロトタイピング用に次の 2 つの開発エクスペリエンスをサポートしています。

  • Kotlin Android、iOS、ウェブのデベロッパーの方は、 VS Code 開発を使用して、ローカルでスキーマとオペレーションを設計し、テストし、 Cloud SQL for PostgreSQL インスタンスに接続します
  • ウェブ デベロッパーは、IDX 開発を使用して、事前構成された IDX テンプレート（PostgreSQL を含む）、Data Connect エミュレータを含む VS Code 拡張機能、クイックスタート コードを使用して IDX ワークスペースで開発できます。詳しくは、 プロジェクト IDX のサイト。

このクイックスタートでは、VS Code 拡張機能の開発フローに焦点を当てます。続行するには:

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

  3. VSIX パッケージとしてバンドルされた拡張機能を Firebase Storage からダウンロードします。

  4. VS Code の [表示] メニューで、[拡張機能] を選択します。

  5. [拡張機能] パネルのタイトルバーで、メニュー アイコンをクリックします。 more_horiz を選択してから、 VSIX からのインストール...

必要に応じて、ローカル開発用にローカル PostgreSQL データベースをインストールできます。 Data Connect エミュレータを使用します。この設定についてはこのモジュールの ご覧ください。

ローカル プロジェクトを設定する

通常の手順に沿って CLI をインストールします。npm がすでにインストールされている場合は、次のコマンドを実行します。

npm install -g firebase-tools

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

ローカル プロジェクトを設定するには、プロジェクト ディレクトリを初期化します。

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

Firebase Extensions の UI で、次の操作を行います。

  1. ログインしていることを確認します。
  2. [Run firebase init] ボタンをクリックします。
  3. VS Code の下部パネルの [Terminal] タブでプロンプトを確認します。
  4. このディレクトリで使用する機能として Data Connect を選択します。
  5. プロンプトが表示されたら、プロジェクトのプロジェクト ID、サービス ID、データベース ID を 前にコンソールで作成した Data Connect プロジェクト。

スキーマの作成

Firebase プロジェクト ディレクトリの /dataconnect/schema/schema.gql ファイルで、ユーザーとメールアドレスを含む GraphQL スキーマの定義を開始します。

ユーザー

Data Connect では、GraphQL フィールドは列にマッピングされます。ユーザーには uid さん、name さん、address さんにメールを送信してください。Data Connect は複数の連絡先を認識します プリミティブ データ型: String と Date。

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

# File `/dataconnect/schema/schema.gql`

type User @table(key: "uid") {
   uid: String!
   name: String!
   address: String!
}

デフォルトでは、Firebase Data Connect は UUID id キーを追加します（指定されていない場合）。ただし、今回は uid を主キーにする必要があります。 @table(key: "uid") ディレクティブで実行できます。

メール

ユーザーが揃ったので、次はメールのモデル化を行います。ここでは、一般的な フィールド（または列）です。今回は、Data Connect を使用して管理できるため、主キーの追加は省略します。

# File `/dataconnect/schema/schema.gql`

type Email @table {
   subject: String!
   sent: Date!
   text: String!
   from: User!
}

from フィールドは User の型にマッピングされていることに注意してください。 Data Connect は、これが Email の関係であることを理解しています および User がこの関係を管理します。

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

Firebase VS Code 拡張機能を 使用する場合は、続行する前にスキーマをデプロイする必要があります。スキーマを本番環境データベースにデプロイすると、コンソールでスキーマを確認できるようになります。

  1. Firebase VS Code 拡張機能を使用してデプロイできます。
    • 拡張機能 UI で、Firebase Data Connect パネルの [ デプロイ。
  2. スキーマの変更を確認し、有害な可能性がある変更を承認する必要があるかもしれません あります。次の操作を行うよう求められます。 <ph type="x-smartling-placeholder">
      </ph>
    • firebase dataconnect:sql:diff を使用してスキーマの変更を確認する
    • 変更に問題がなければ、 firebase dataconnect:sql:migrate。

表にデータを追加する

VS Code エディタ パネルに、/dataconnect/schema/schema.gql の GraphQL 型の上に CodeLens ボタンが表示されます。Deployment は [Add data] と [Run (Production)] の ボタンをクリックすると、バックエンドのデータベースにデータを追加できます。

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

  1. schema.gql で、User 型宣言の上にある [データを追加] ボタンをクリックします。
    Firebase Data Connect の Code Lens データ追加ボタン
  2. 生成された User_insert.gql ファイルで、3 つのフィールドのデータをハードコードします。
  3. [実行（本番環境）] ボタンをクリックします。
    Firebase Data Connect の Code Lens 実行ボタン
  4. 前の手順を繰り返して Email テーブルにレコードを追加し、生成された Email_insert ミューテーションのプロンプトが表示されたら、fromUid フィールドにユーザーの uid を指定します。

クエリを定義する

次はクエリです開発者は SQL を記述することに慣れているはずです。 クエリよりも効率的です。 ただし、GraphQL は未加工の SQL よりもはるかに簡潔でタイプセーフです。VS Code は 拡張機能により開発が容易になります。

/dataconnect/connector/queries.gql ファイルの編集を開始します。目標 すべてのメールを取得するには、次のようなクエリを使用します。

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

query ListEmails @auth(level: NO_ACCESS) {
  emails {
    id, subject, text, sent
    from {
      name
    }
  }
}

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

データベースのリレーションシップをグラフのように扱える点は、非常に魅力的な機能です。Email には、メールアドレスを参照する from フィールドが User: フィールドにネストすると、ユーザーに関する情報を取得できます。

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

開発のイテレーションを完了しました。これで、スキーマの場合と同様に（#deploy-schema）、Firebase 拡張機能の UI または Firebase CLI を使用して、スキーマ、データ、クエリをサーバーにデプロイできます。

Firebase VS Code 拡張機能を使用してデプロイする場合は、[デプロイ] ボタンをクリックします。

デプロイすると、コンソールでオペレーションを表示して実行できるようになります。 できます。Data Connect サービスでオペレーションを処理できるようになります 許可します。Cloud SQL for PostgreSQL インスタンスは、Cloud SQL 最終的にデプロイされたスキーマとデータです。

（省略可）ローカルに PostgreSQL をインストールする

PostgreSQL をローカルにインストールしてエミュレータと統合すると、完全にローカルの開発環境でプロトタイプを作成できます。

PostgreSQL の新しいインスタンスをインストールするか、既存のインスタンスを使用できます。

PostgreSQL をインストールする

ご使用のプラットフォームの手順に沿って、PostgreSQL バージョン 15.x をインストールします。

認証中にホスト名、ポート、ユーザー名、パスワード、および関連パラメータの出力をメモしておきます。 確認します。

PostgreSQL インスタンスに接続するには、エミュレータに次のものが必要です。

  • これらの設定構成パラメータ
  • dataconnect.yaml のデータベース名とそれに対応する名前 ローカル インスタンスで初期化されます。

ローカル PostgreSQL インスタンスを使用する

既存のローカル PostgreSQL インスタンスを使用するには、Data Connect エミュレータの設定を更新します。

firebase setup:emulators:dataconnect

プロンプトが表示されたら、次の形式で PostgreSQL 接続文字列を入力します。 postgresql://postgresusername:postgrespassword@localhost:5432/postgresdatabase?sslmode=disable。

接続文字列の詳細については、PostgreSQL のドキュメントをご覧ください。

ローカル PostgreSQL インスタンスに接続する

この構成が完了したら、ローカル データベースに接続します。

  1. VS Code の左側のパネルで Firebase アイコンをクリックして、Firebase VS Code 拡張機能の UI を開きます。
  2. [ローカル PostgreSQL に接続] ボタンをクリックします。

次のステップ