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 生成を初期化する
connector.yaml
に、outputDir
、package
、(ウェブ SDK の場合)packageJsonDir
を追加します。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
の更新にウォッチを設定し、SDK ソースを自動的に更新することもできます。
または、CLI を使用して、.gql ファイルが変更されるたびに SDK を再生成することもできます。
firebase dataconnect:sdk:generate --watch
統合と本番環境リリース用の SDK を生成する
CI テストに送信するプロジェクト ソースを準備する場合など、Firebase CLI を呼び出してバッチ更新を行うことができます。
このような場合は、firebase dataconnect:sdk:generate
を使用します。
クライアント コードを設定する
Data Connect アプリを初期化する
まず、標準の Firebase シーケンスを使用してアプリを初期化します。
initializeApp({...});
Data Connect ウェブ SDK を初期化する
Data Connect の設定に使用した情報(すべて Firebase コンソールの [Data Connect] タブにあります)を使用して、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
オブジェクトのインスタンスが自動的に作成されます。
クライアントサイドでクエリを使用する
生成されたコードには、事前定義されたクエリ参照がすでに含まれています。必要な作業は、これらをインポートして実行を呼び出すことだけです。
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 で次のように表されます。
データ接続タイプ | TypeScript |
---|---|
タイムスタンプ | 文字列 |
日付 | 文字列 |
UUID | 文字列 |
Int64 | 文字列 |
Double | 数値 |
浮動小数点数 | 数値 |
フレームワークに関する考慮事項
Angular
コードを生成する場合、Angular CLI
は依存関係の最適化コードが原因で新しい変更を検出しません。これを修正するには、angular.json
を変更する必要があります。
"projects": {
"myproject": {
"architect": {
"serve:": {
"prebundle": {
"exclude": ["@movie-app/movies"]
}
}
}
}
}