このクイックスタートでは、Firebase Data Connect をビルドする方法を学習します。 本番環境の SQL インスタンスを設定せずにローカルでアプリケーションを作成できます。
- Firebase プロジェクトに Firebase Data Connect を追加します。
- ローカル インスタンスで動作する Visual Studio Code 拡張機能を含む開発環境を設定します。
- 次に、次の方法を説明します。
- 映画アプリのスキーマを作成する
- アプリで使用されるクエリとミューテーションを定義する
- ローカル エミュレータに対するサンプルデータを使用してクエリとミューテーションをテストする
- 強力な型付けの SDK を生成し、アプリで使用する
- 最終的なスキーマ、クエリ、データをクラウドにデプロイします(省略可、Blaze プランが必要です)。
前提条件
このクイックスタートを使用するには、以下が必要です。
- Linux、macOS、Windows
- Visual Studio Code
- 次のコマンドを使用して Node.js をインストールします。 nvm-windows: Windows または nvm macOS または Linux 用です。
- まだ作成していない場合は、Firebase コンソールで Firebase プロジェクトを作成します。
開発環境を設定する
スキーマを管理し、アプリケーションで使用するクエリを定義するには Visual Studio Code が必要です。強力な型付けされた SDK が自動的に生成されます。
- ローカル プロジェクト用の新しいディレクトリを作成します。
- 新しいディレクトリで VS Code を開きます。
- Firebase Data Connect 拡張機能を Visual Studio Code Marketplace。
プロジェクト ディレクトリを設定する
ローカル プロジェクトを設定するには、プロジェクト ディレクトリを初期化します。VS Code 内 Firebase アイコンをクリックして Data Connect VS Code 拡張機能 UI:
- [Google でログイン] ボタンをクリックします。
- [Firebase プロジェクトを接続] ボタンをクリックし、コンソールで前に作成したプロジェクトを選択します。
- [Run firebase init] ボタンをクリックします。
[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
テーブルにレコードを追加するには:
schema.gql
で、Movie
型の上の [データを追加] ボタンをクリックします。 の宣言が必要です。
- 生成される
Movie_insert.gql
ファイルで、次の変数のデータのハードコードを行います。 3 つのフィールドがあります - [Run (Local)] ボタンをクリックします。
- 上記の手順を繰り返して、
MovieMetadata
テーブルにレコードを追加します。 [movie
] フィールドに映画のuid
を指定します。 生成されたMovieMetadata_insert
ミューテーション。
データが追加されたことをすばやく確認するには:
schema.gql
に戻り、[データを読み取る] ボタンをクリックします。- 表示された
Movie_read.gql
ファイルで、[Run (Local)] ボタンをクリックし、 クエリを実行します
クエリを定義する
次は興味深い部分です。アプリケーションに必要なクエリを定義しましょう。 デベロッパーは 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
}
}
}
SDK を生成し、アプリで使用する
VS Code の左側のパネルで Firebase アイコンをクリックして、Data Connect VS Code 拡張機能の UI を開きます。
- [Add SDK to app] ボタンをクリックします。
表示されたダイアログで、コードを含むディレクトリを選択します。 提供しますData Connect。SDK コードが生成され 保存します。
アプリ プラットフォームを選択すると、SDK コードがすぐに 生成されます。
生成された SDK を使用してクライアントからクエリとミューテーションを呼び出す方法を学習する アプリ(ウェブ、Android、 iOS、Flutter)。
スキーマとクエリを本番環境にデプロイする
アプリでローカル設定を完了したら、スキーマ、データ、クエリをクラウドにデプロイできます。Cloud SQL インスタンスを設定するには、Blaze プランが必要です。
Firebase コンソールの [Data Connect] セクションに移動して、 無料トライアルの Cloud SQL インスタンスです
VS Code に統合されたターミナルで、firebase init dataconnect を実行します。 コンソールで作成したリージョン/サービス ID を選択します。
[ファイル dataconnect/dataconnect.yaml はすでに存在します。上書きしますか?] というメッセージが表示されたら、[Y] を選択します。
Data Connect VS Code Extension UI で、[Deploy to production] をクリックします。 ] ボタンを離します。
デプロイしたら、Firebase コンソールに移動して、スキーマ、オペレーション、データがクラウドにアップロードされていることを確認します。マイページ スキーマを表示し、コンソール上で ありますCloud SQL for PostgreSQL インスタンスは、最終的にデプロイされた生成されたスキーマとデータで更新されます。
次のステップ
デプロイされたプロジェクトを確認し、その他のツールを確認する。
- データベースへのデータの追加、スキーマの検査と変更、 Firebase コンソールの Data Connect サービス。
詳しくはドキュメントをご覧ください。たとえば、クイックスタートを完了したので、次のようにします。
- 詳しくは、スキーマ、クエリ、ミューテーションの開発をご覧ください。
- クライアント SDK の生成と、クエリとミューテーションの呼び出しについて学習する クライアント コード(ウェブ、Android、 iOS、Flutter です。