生成された Flutter SDK を使用する

Firebase Data Connect クライアント SDK を使用すると、Firebase アプリからサーバー側のクエリとミューテーションを直接呼び出すことができます。Data Connect サービスにデプロイするスキーマ、クエリ、ミューテーションを設計する際に、カスタム クライアント SDK を並行して生成します。次に、この SDK のメソッドをクライアント ロジックに統合します。

他の場所でも説明したように、Data Connect クエリとミューテーションはクライアント コードによって送信されず、サーバーで実行されることに注意してください。代わりに、デプロイ時に Data Connect オペレーションは Cloud Functions のようにサーバーに保存されます。つまり、既存のユーザー(古いアプリ バージョンなど)に影響しないように、対応するクライアントサイドの変更をデプロイする必要があります。

そのため、Data Connect には、サーバー デプロイされたスキーマ、クエリ、ミューテーションのプロトタイプを作成できるデベロッパー環境とツールが用意されています。また、プロトタイプ作成中にクライアントサイド SDK を自動的に生成します。

サービスとクライアント アプリのアップデートを繰り返せば、サーバーサイドとクライアントの両方のアップデートをデプロイできます。

Flutter SDK を生成する

ほとんどの Firebase プロジェクトと同様に、Firebase Data Connect クライアント コードの作業はローカル プロジェクト ディレクトリで行われます。Data Connect VS Code 拡張機能と Firebase CLI はどちらも、クライアント コードの生成と管理に重要なローカル ツールです。

SDK 生成オプションは、プロジェクトの初期化時に生成された dataconnect.yaml ファイル内の複数のエントリにキーされています。

SDK 生成を初期化する

connector.yaml に、outputDirpackage、(ウェブ SDK の場合)packageJsonDir を追加します。
connectorId: movies
generate:
  dartSdk:
    outputDir: ../../lib/generated # Feel free to change this to a different path
    package: movies

outputDir は、生成された SDK の出力先を指定します。このパスは、connector.yaml ファイル自体を含むディレクトリからの相対パスです。必要に応じて、outputDir への絶対パスを指定できます。

package にはパッケージ名を指定します。

プロトタイプ作成中に SDK を更新する

Data Connect VS Code 拡張機能とその Data Connect エミュレータを使用してインタラクティブにプロトタイピングする場合、スキーマ、クエリ、ミューテーションを定義する .gql ファイルを変更すると、SDK ソースファイルが自動的に生成および更新されます。これは、ホット(再)読み込みワークフローで便利な機能です。

その他のシナリオでは、Firebase CLI から Data Connect エミュレータを使用している場合は、.gql の更新時にウォッチを設定し、SDK ソースを自動的に更新することもできます。

または、.gql ファイルが変更されるたびに CLI を使用して SDK を再生成することもできます。

firebase dataconnect:sdk:generate --watch

統合と本番環境リリース用の SDK を生成する

CI テストに送信するプロジェクト ソースを準備する場合など、Firebase CLI を呼び出してバッチ更新を行うことができます。

このような場合は、firebase dataconnect:sdk:generate を使用します。

クライアント コードを設定する

Data Connect アプリの初期化

まず、標準の Firebase 設定手順に沿ってアプリを初期化します。

次に、Data Connect プラグインをインストールします。

flutter pub add firebase_data_connect

Data Connect Flutter SDK を初期化する

Data Connect の設定に使用した情報を使用して Data Connect インスタンスを初期化します(すべて Firebase コンソールの [Data Connect] タブで確認できます)。

ライブラリをインポートする

クライアント コードを初期化するには、一般的な Data Connect インポートと、生成された特定の SDK インポートの 2 つのインポート セットが必要です。

// general imports
import 'package:firebase_data_connect/firebase_data_connect.dart';

// generated queries and mutations from SDK
import 'generated/movies.dart';

Flutter アプリのプロトタイプを作成してテストする

ローカル エミュレータを使用するようにクライアントを計測する

Data Connect エミュレータは、Data Connect VS Code 拡張機能または CLI から使用できます。

アプリをインストルメント化してエミュレータに接続する方法は、どちらのシナリオでも同じです。

import 'package:firebase_data_connect/firebase_data_connect.dart';
import 'generated/movies.dart';

MoviesConnector.instance.dataConnect
          .useDataConnectEmulator('127.0.0.1', 9399);

// Make calls from your app
QueryRef<ListMoviesData, void> ref = MoviesConnector.instance.listMovies.ref();

本番環境リソースに切り替えるには、エミュレータに接続する行をコメント化します。

クライアントサイドでクエリを使用する

生成されたコードには、事前定義されたクエリ参照がすでに含まれています。インポートして execute を呼び出すだけで使用できます。

import 'generated/movies.dart';

await MoviesConnector.instance.listMovies().execute();

SDK のクエリメソッドを呼び出す

これらのアクション ショートカット関数を使用した例を次に示します。

import 'generated/movies.dart';

function onBtnClick() {
  // This will call the generated Dart from the CLI and then make an HTTP request to the server.
  MoviesConnector.instance.listMovies().execute().then(data => showInUI(data)); // == MoviesConnector.instance.listMovies().ref().execute();
}

省略可能なフィールド

一部のクエリには省略可能なフィールドが含まれている場合があります。このような場合、Flutter SDK はビルダー メソッドを公開し、別途設定する必要があります。

たとえば、createMovie の呼び出し時に rating フィールドは省略可能であるため、ビルダー関数で指定する必要があります。

await MoviesConnector.instance.createMovie({ title: 'Empire Strikes Back', releaseYear: 1980, genre: "Sci-Fi"}).rating(5).execute();

変更を受け取る

変更をサブスクライブできます(クエリを実行するたびに更新されます)。

QueryRef<ListMoviesData, void> listRef = MoviesConnector.instance.listMovies().ref();

// subscribe will immediately invoke the query if no execute was called on it previously.
listRef.subscribe().listen((data) {
  updateUIWithMovies(data.movies);
});

await MoviesConnector.instance.createMovie({ title: 'Empire Strikes Back', releaseYear: 1980, genre: "Sci-Fi" }).rating(5).execute();
await listRef.execute(); // will update the subscription above`

クライアントサイドでミューテーションを使用する

ミューテーションには、クエリと同じ方法でアクセスできます。

await MoviesConnector.instance.createMovie({ title: 'Empire Strikes Back', releaseYear: 1980, genre: "Sci-Fi" }).rating(5).execute();

Dart SDK のデータ型

Data Connect サーバーは、一般的な GraphQL データ型を表します。これらは SDK で次のように表されます。

データ接続タイプ Dart
タイムスタンプ firebase_data_connect.Timestamp
Int(32 ビット) 整数
日付 DateTime
UUID 文字列
Int64 整数
浮動小数点数 double
ブール値 bool
すべて firebase_data_connect.AnyValue