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

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

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

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

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

クライアント開発ワークフローとは

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

概要を説明すると、生成された Flutter SDK をクライアント アプリで使用するには、次の前提条件を満たす必要があります。

  1. Flutter アプリに Firebase を追加する。
  2. flutterfire CLI dart pub global activate flutterfire_cli をインストールする。
  3. flutterfire configure を実行する。

その後の操作は次のとおりです。

  1. アプリのスキーマを開発する。
  2. SDK の生成を設定する。

  3. クライアント コードを初期化してライブラリをインポートする

  4. クエリミューテーションの呼び出しを実装する。

  5. エミュレータ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 インスタンスを初期化します。この情報は、 [Databases & Storage] > [SQL Connect] ページ コンソールにあります。Firebase

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

クライアント コードを初期化するには、一般的な 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_ONLYexecute()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 string
Int64 int
浮動小数点数 double
ブール値 bool
すべて firebase_data_connect.AnyValue