このページは 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 の設定に使用した情報を使用して 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';

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

生成されたコードには、事前定義されたクエリ参照がすでに含まれています。インポートして 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();

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 で次のように表されます。

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