生成された 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 の設定に使用した情報(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 は常に新しい値を取得することを意味します。キャッシュされた値は、execute()subscribe() から返される最初の結果に CACHE_ONLY が指定されている場合にのみ使用されます。

  • 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