Google は AI 技術を使用して、コンテンツをご希望の言語に翻訳しています。AI 翻訳には誤りが含まれる場合があります。

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

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

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

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

サービスアプリとクライアントアプリの更新を繰り返すと、サーバーサイドとクライアントサイドの両方の更新をデプロイする準備が整います。

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

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

まとめると、生成された Flutter SDK をクライアントアプリで使用するには、次の前提条件の手順に沿って操作します。

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

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

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

Flutter SDK を生成する

Firebase CLI を使用して、SQL Connect で生成された SDK をアプリに設定します。init コマンドは、現在のフォルダ内のすべてのアプリを検出し、生成された SDK を自動的にインストールします。

firebase init dataconnect:sdk

プロトタイピング中に SDK を更新する

SQL Connect VS Code 拡張機能がインストールされている場合、生成された SDK は常に最新の状態に保たれます。

SQL Connect VS Code 拡張機能を使用しない場合は、Firebase CLI を使用して、生成された SDK を最新の状態に保つことができます。

firebase dataconnect:sdk:generate --watch

ビルドパイプラインで SDK を生成する

Firebase CLI を使用して、CI/CD ビルドプロセスで SQL Connect SDK を生成できます。

firebase dataconnect:sdk:generate

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

SQL Connect アプリを初期化する

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

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

flutter pub add firebase_data_connect

SQL Connect Flutter SDK を初期化する

SQL Connect の設定に使用した情報を使用して、SQL Connect インスタンスを初期化します。この情報は、Firebase コンソールの [データベースとストレージ] > [SQL Connect] ページで確認できます。

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

クライアントコードを初期化するには、一般的な SQL 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();

変更を検出できるようにする

SQL Connect からリアルタイムの更新を取得するをご覧ください。

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

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

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

SQL 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}');
  }
}

クライアントサイドキャッシュを有効にする

SQL Connect には、オプションのクライアントサイドキャッシュ機能があります。この機能は、connector.yaml ファイルを編集することで有効にできます。この機能を有効にすると、生成されたクライアント SDK はクエリレスポンスをローカルにキャッシュします。これにより、アプリが行うデータベースリクエストの数を減らし、ネットワークが中断されたときにアプリのデータベース依存部分を動作させることができます。

クライアントサイドキャッシュを有効にするには、コネクタ構成にクライアントキャッシュ構成を追加します。

generate:
  javascriptSdk:
    outputDir: ../dart/
    package: "dataconnect_generated"
    clientCache:
      maxAge: 5s
      storage: memory

この構成には 2 つのパラメータがあり、どちらも省略可能です。

maxAge: クライアント SDK が新しい値を取得するまでの、キャッシュに保存されたレスポンスの最大有効期間。例: 「0」、「30s」、「1h30m」。

maxAge のデフォルト値は 0 です。これは、レスポンスがキャッシュに保存されるものの、クライアント SDK は常に最新の値を取得することを意味します。キャッシュに保存された値は、CACHE_ONLY が execute() に指定され、subscribe() から初期結果が返された場合にのみ使用されます。
storage: クライアント SDK は、persistent ストレージまたは memory にレスポンスをキャッシュするように構成できます。persistent ストレージにキャッシュに保存された結果は、アプリの再起動後も保持されます。Android または iOS をターゲットとする場合、デフォルトは persistent です。ウェブブラウザをターゲットとする場合、memory ストレージのみがサポートされます。

コネクタのキャッシュ構成を更新したら、クライアント SDK を再生成してアプリを再ビルドします。これにより、execute() と subscribe() はレスポンスをキャッシュに保存し、構成したポリシーに従ってキャッシュに保存された値を使用します。これは通常、追加の手順なしで自動的に行われますが、次の点に注意してください。

execute() のデフォルトの動作は上記のとおりです。クエリの結果がキャッシュに保存され、キャッシュに保存された値が maxAge より古くない場合は、キャッシュに保存された値を使用します。このデフォルトの動作は PREFER_CACHE ポリシーと呼ばれます。

また、execute() の個々の呼び出しに対して、キャッシュに保存された値のみを処理する（CACHE_ONLY）か、サーバーから新しい値を無条件に取得する（SERVER_ONLY）かを指定することもできます。
```
await queryRef.execute(fetchPolicy: QueryFetchPolicy.cacheOnly);
```
```
await queryRef.execute(fetchPolicy: QueryFetchPolicy.serverOnly);
```
subscribe() を呼び出すと、maxAge の設定に関係なく、キャッシュに保存されたコンテンツが存在する場合は常にすぐに返されます。execute() の後続の呼び出しは、構成された maxAge に従ってリスナーに通知します。

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

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

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

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

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

SQL Connect エミュレータは、SQL 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 のデータ型

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

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

生成された Flutter SDK を使用する コレクションでコンテンツを整理 必要に応じて、コンテンツの保存と分類を行います。