このページは Cloud Translation API によって翻訳されました。

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

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

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

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

サービスアプリとクライアントアプリの更新を繰り返すと、サーバーサイドとクライアントサイドの両方の更新をデプロイできるようになります。

クライアント開発のワークフローとは何ですか？

スタートガイドに沿って、Data Connect の開発フロー全体について説明しました。このガイドでは、スキーマから Flutter SDK を生成し、クライアントクエリとミューテーションを操作する方法について詳しく説明します。

要約すると、生成された Flutter SDK をクライアントアプリで使用するには、次の前提条件の手順を行います。

Flutter アプリに Firebase を追加します。
flutterfire CLI dart pub global activate flutterfire_cli をインストールします。
flutterfire configure を実行します。

次に、以下のリソースをご覧ください。

アプリのスキーマを開発します。
SDK の生成を設定します。
- Data Connect VS Code 拡張機能の [アプリに SDK を追加] ボタンを使用する
- connector.yaml を更新する。
クライアントコードを初期化してライブラリをインポートします。
クエリの呼び出しとミューテーションを実装します。
Data Connect エミュレータを設定して使用し、反復処理を行います。

Flutter SDK を生成する

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

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

SDK の生成を初期化する

connector.yaml に、outputDir、package、（ウェブ 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 ソースを自動的に更新することもできます。

または、CLI を使用して、.gql ファイルが変更されるたびに 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 の設定に使用した情報（Firebase コンソールの [Data Connect] タブで確認可能）を使用して、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';

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

生成されたコードには、事前定義されたクエリ参照がすでに含まれています。必要なのは、それらをインポートして 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`

列挙型フィールドの変更を処理する

アプリのスキーマには列挙型を含めることができ、GraphQL クエリでアクセスできます。

アプリの設計が変更されたら、サポートされている新しい列挙値を追加できます。たとえば、アプリのライフサイクルの後半で、AspectRatio 列挙型に FULLSCREEN 値を追加するとします。

Data Connect ワークフローでは、ローカル開発ツールを使用してクエリと SDK を更新できます。

ただし、クライアントの更新バージョンをリリースする前に、以前にデプロイされたクライアントが破損する可能性があります。

復元力のある実装の例

生成された SDK では、不明な値の処理が強制されます。つまり、クライアントコードは EnumValue オブジェクトを Known または Unknown にアンラップする必要があります。

final result = await MoviesConnector.instance.listMovies().execute();

if (result.data != null && result.data!.isNotEmpty) {
  handleEnumValue(result.data![0].aspectratio);
}

void handleEnumValue(EnumValue<AspectRatio> aspectValue) {
  if (aspectValue.value != null) {
    switch(aspectValue.value!) {
      case AspectRatio.ACADEMY:
        print("This movie is in Academy aspect");
        break;
      case AspectRatio.WIDESCREEN:
        print("This movie is in Widescreen aspect");
        break;
      case AspectRatio.ANAMORPHIC:
        print("This movie is in Anamorphic aspect");
        break;
      case AspectRatio.IMAX:
        print("This movie is in IMAX aspect");
    }
  } else {
    print("Unknown aspect ratio detected: ${aspectValue.stringValue}");
  }
}

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

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

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

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();

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

Dart SDK のデータ型

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

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