生成されたウェブ SDK を使用する

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

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

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

サービスとクライアント アプリの更新を反復処理したら、サーバーサイドとクライアントサイドの両方の更新をデプロイする準備が整います。

ウェブ SDK を生成する

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

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

SDK 生成を初期化する

generate:
  javascriptSdk:
    outputDir: "../movies-generated"
    package: "@movie-app/movies"
    packageJsonDir: "../../"

outputDir には、生成された SDK の出力先を指定します。

package にはパッケージ名を指定します。

packageJsonDir は、パッケージをインストールする場所を指定します。

この場合は、firebase@latest をインストールして、このピア依存関係を確実に満たします。

node_modules を基準とするパスを構成する

ウェブ SDK の場合、Data Connect は npm link を使用して SDK をインストールするため、生成された SDK は node_modules パスと同じレベルのディレクトリまたは node_modules にアクセスできる子ディレクトリに出力する必要があります。

つまり、生成された SDK が正しく機能するには、firebase ノード モジュールにアクセスできる必要があります。

たとえば、node_modules が my-app/ にある場合、js-email-generated が親の node_modules フォルダからインポートできるように、出力ディレクトリは my-app/js-email-generated にする必要があります。

my-app/
  dataconnect/
    connector/
        connector.yaml
  node_modules/
    firebase/
  js-email-generated/

// connector.yaml
connectorId: "my-connector"
generate:
  javascriptSdk:
    outputDir: "../../js-email-generated"
    package: "@myapp/my-connector"

モジュールがルートでホストされている monorepo がある場合は、出力ディレクトリを monorepo 内の任意のフォルダに配置できます。

my-monorepo/
  dataconnect/
    connector/
        connector.yaml
  node_modules/
    firebase/
  my-app/
    js-email-generated/
  package.json

// connector.yaml
connectorId: "my-connector"
generate:
  javascriptSdk:
    outputDir: "../../my-app/js-email-generated" # You can also output to ../../js-email-generated

プロトタイプ作成中に SDK を更新する

Data Connect VS Code 拡張機能とその Data Connect エミュレータを使用してインタラクティブにプロトタイピングする場合、スキーマ、クエリ、ミューテーションを定義する .gql ファイルを変更すると、SDK ソースファイルが自動的に生成および更新されます。これは、ホット（再）読み込みワークフローで便利な機能です。

または、.gql ファイルが変更されるたびに CLI を使用して SDK を再生成することもできます。

firebase dataconnect:sdk:generate --watch

統合と本番環境リリース用の SDK を生成する

CI テストに送信するプロジェクト ソースを準備する場合など、Firebase CLI を呼び出してバッチ更新を行うことができます。

このような場合は、firebase dataconnect:sdk:generate を使用します。

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

Data Connect アプリを初期化する

まず、標準の Firebase シーケンスを使用してアプリを初期化します。

initializeApp({...});

Data Connect ウェブ SDK を初期化する

Data Connect の設定に使用した情報を使用して Data Connect インスタンスを初期化します（すべて Firebase コンソールの [Data Connect] タブで確認できます）。

ConnectorConfig オブジェクト

SDK にはコネクタ構成オブジェクトが必要です。

このオブジェクトは、dataconnect.yaml の serviceId と location、connector.yaml の connectorId から自動的に生成されます。

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

クライアント コードを初期化するには、一般的な Data Connect インポートと特定の生成 SDK インポートの 2 つのインポート セットが必要です。

// general imports
import { ConnectorConfig, DataConnect, getDataConnect, QueryRef, MutationRef, QueryPromise, MutationPromise } from 'firebase/data-connect';

// generated queries and mutations from SDK
import { listMovies, ListMoviesResponse, createMovie, connectorConfig } from '@myorg/myconnector';

ウェブ クライアントのプロトタイプを作成してテストする

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

Data Connect エミュレータは、Data Connect VS Code 拡張機能または CLI から使用できます。

エミュレータに接続するようにアプリを計測する手順は、どちらのシナリオでも同じです。

import { connectDataConnectEmulator } from 'firebase/data-connect';
import { connectorConfig } from '@myorg/myconnector'; // Replace with your package name
const dataConnect = getDataConnect(connectorConfig);

connectDataConnectEmulator(dataConnect, 'localhost', 9399);`

// Make calls from your app

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

インスタンスの取得

getDataConnect の呼び出しは、Data Connect エミュレータに接続する場合にのみ必要です。それ以外の場合は、生成された SDK によって DataConnect オブジェクトのインスタンスが自動的に作成されます。

クライアント側でのクエリの使用

生成されたコードには、事前定義されたクエリ参照がすでに含まれています。インポートして execute を呼び出すだけで使用できます。

import { executeQuery } from 'firebase/data-connect';
import { listMoviesRef } from '@movie-app/movies';

const ref = listMoviesRef();
const { data } = await executeQuery(ref);
console.log(data.movies);

SDK のクエリメソッドを呼び出す

これらのアクション ショートカット関数を使用した例を次に示します。

import { listMovies } from '@movie-app/movies';
function onBtnClick() {
// This will call the generated JS from the CLI and then make an HTTP request out // to the server.
listMovies().then(data => showInUI(data)); // == executeQuery(listMoviesRef);
}

変更の通知を受け取る

変更をサブスクライブできます（クエリを実行するたびに更新されます）。

const listRef = listAllMoviesRef();

// subscribe will immediately invoke the query if no execute was called on it previously.
subscribe(listRef, ({ data }) => {
 updateUIWithMovies(data.movies);
});

await createMovie({ title: 'Empire Strikes Back', releaseYear: 1980, genre: "Sci-Fi", rating: 5 });\
await listMovies(); // will update the subscription above`

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

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

import { executeMutation } from 'firebase/data-connect';
import { createMovieRef } from '@movie-app/movies';

const { data } = await executeMutation(createMovieRef({ movie: 'Empire Strikes Back' }));

ウェブ SDK のデータ型

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

フレームワークに関する考慮事項

Angular

コードを生成する場合、Angular CLI は依存関係の最適化コードが原因で新しい変更を検出しません。この問題を解決するには、angular.json を変更する必要があります。

  "projects": {
      "myproject": {
         "architect": {
                 "serve:": {
                            "prebundle": {
                                         "exclude": ["@movie-app/movies"]
                              }
                   }
            }
     }
  }