Generierte Web-SDKs verwenden

Hinweis: Firebase Data Connect befindet sich in der öffentlichen Vorschau. Data Connect unterliegt den „Nutzungsbedingungen für Pre-GA-Angebote“ im Abschnitt dienstspezifische Nutzungsbedingungen der Nutzungsbedingungen der Google Cloud Platform. Pre-GA-Funktionen stehen in der vorliegenden Form zur Verfügung und bieten möglicherweise nur eingeschränkten Support. Weitere Informationen finden Sie unter Beschreibungen der Startphase.

Mit Firebase Data Connect-Client-SDKs können Sie Ihre serverseitigen Abfragen und Mutationen direkt über eine Firebase-App aufrufen. Sie generieren ein benutzerdefiniertes Client-SDK parallel, während Sie die Schemas, Abfragen und Mutationen entwerfen, die Sie in Ihrem Data Connect-Dienst bereitstellen. Anschließend integrieren Sie Methoden aus diesem SDK in Ihre Clientlogik.

Wie an anderer Stelle erwähnt, ist zu beachten, dass Data Connect-Abfragen und -Mutationen nicht von Clientcode gesendet und auf dem Server ausgeführt werden. Stattdessen werden Data Connect-Vorgänge bei der Bereitstellung wie Cloud Functions auf dem Server gespeichert. Sie müssen also entsprechende clientseitige Änderungen vornehmen, um Probleme für bestehende Nutzer zu vermeiden (z. B. bei älteren App-Versionen).

Deshalb bietet Data Connect eine Entwicklerumgebung und Tools, mit denen Sie serverseitig bereitgestellte Schemas, Abfragen und Mutationen prototypisieren können. Außerdem werden clientseitige SDKs automatisch generiert, während Sie den Prototyp erstellen.

Wenn Sie Updates für Ihre Dienst- und Client-Apps iteriert haben, können sowohl server- als auch clientseitige Updates bereitgestellt werden.

Web-SDK generieren

Wie bei den meisten Firebase-Projekten erfolgt die Arbeit am Firebase Data Connect-Clientcode in einem lokalen Projektverzeichnis. Sowohl die VS Code-Erweiterung von Data Connect als auch die Firebase-Befehlszeile sind wichtige lokale Tools zum Generieren und Verwalten von Clientcode.

Die Optionen zur SDK-Generierung sind mit mehreren Einträgen in der dataconnect.yaml-Datei verknüpft, die beim Initialisieren Ihres Projekts generiert wurde.

SDK-Generierung initialisieren

Fügen Sie in Ihrer connector.yaml Ihre outputDir, package und (für das Web SDK) packageJsonDir hinzu.

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

outputDir gibt an, wo das generierte SDK ausgegeben werden soll.

package gibt den Paketnamen an.

packageJsonDir gibt an, wo das Paket installiert werden soll.

Hinweis: Für die Generierung fügen wir "firebase": "^10.14.0" als peerDependency hinzu. Je nach Abhängigkeitsmanager (z. B. pnpm) werden diese Abhängigkeiten möglicherweise nicht automatisch installiert.

Installieren Sie in diesem Fall firebase@latest, damit diese Peer-Abhängigkeit erfüllt ist.

Pfade relativ zu node_modules konfigurieren

Da Data Connect für die Installation des SDK npm link verwendet, muss das generierte SDK für das Web SDK in einem Verzeichnis auf derselben Ebene wie der node_modules-Pfad oder in einem untergeordneten Verzeichnis ausgegeben werden, das auf node_modules zugreifen kann.

Mit anderen Worten: Ihr generiertes SDK muss Zugriff auf das firebase-Knotenmodul haben, um richtig zu funktionieren.

Wenn sich node_modules beispielsweise in my-app/ befindet, sollte das Ausgabeverzeichnis my-app/js-email-generated sein, damit js-email-generated aus dem übergeordneten Ordner node_modules importieren kann.

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"

Wenn Sie ein Monorepo haben, in dem Ihre Module im Stammverzeichnis gehostet werden, können Sie das Ausgabeverzeichnis in einem beliebigen Ordner in Ihrem Monorepo platzieren.

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

Hinweis: Sie können einen absoluten Pfad zu Verzeichnissen angeben, wenn Ihr Projekt in einer separaten Verzeichnisstruktur eingerichtet ist.

SDKs beim Prototyping aktualisieren

Wenn Sie mit der Data Connect-VS Code-Erweiterung und dem Data Connect-Emulator interaktiv Prototypen erstellen, werden SDK-Quelldateien automatisch generiert und aktualisiert, während Sie .gql-Dateien ändern, in denen Schemas, Abfragen und Mutationen definiert werden. Dies kann bei Hot-Loading-Workflows nützlich sein.

In anderen Szenarien, wenn Sie den Data Connect-Emulator über die Firebase-Befehlszeile verwenden, können Sie eine Überwachung auf .gql-Updates einrichten und SDK-Quellen automatisch aktualisieren lassen.

Alternativ können Sie die SDKs über die Befehlszeile neu generieren, wenn .gql-Dateien geändert werden:

firebase dataconnect:sdk:generate --watch

SDKs für die Integration und für Produktionsversionen generieren

In einigen Fällen, z. B. bei der Vorbereitung von Projektquellen für CI-Tests, können Sie die Firebase CLI für ein Batch-Update aufrufen.

Verwenden Sie in diesen Fällen firebase dataconnect:sdk:generate.

Clientcode einrichten

Data Connect App initialisieren

Initialisieren Sie zuerst Ihre App mit der standardmäßigen Firebase-Sequenz.

initializeApp({...});

Data Connect Web SDK initialisieren

Initialisieren Sie die Instanz Data Connect mit den Informationen, die Sie zur Einrichtung von Data Connect verwendet haben (alles verfügbar auf dem Tab „Data Connect“ der Firebase-Konsole).

Das ConnectorConfig-Objekt

Das SDK erfordert ein Connector-Konfigurationsobjekt.

Dieses Objekt wird automatisch aus serviceId und location in dataconnect.yaml und connectorId in connector.yaml generiert.

Bibliotheken importieren

Zum Initialisieren Ihres Clientcodes sind zwei Importsätze erforderlich: allgemeine Data Connect-Importe und spezifische, generierte SDK-Importe.

// 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';

Webclients prototypisieren und testen

Clients für die Verwendung eines lokalen Emulators instrumentieren

Sie können den Data Connect-Emulator über die VS Code-Erweiterung „Data Connect“ oder über die Befehlszeile verwenden.

Die Instrumentierung der App für die Verbindung zum Emulator ist für beide Szenarien identisch.

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

Kommentieren Sie Zeilen zum Herstellen einer Verbindung zum Emulator aus, um zu Produktionsressourcen zu wechseln.

Instanz abrufen

Das Aufrufen von getDataConnect ist nur erforderlich, wenn Sie eine Verbindung zum Data Connect-Emulator herstellen möchten. Andernfalls erstellt das generierte SDK automatisch eine Instanz des DataConnect-Objekts für Sie.

Abfragen auf der Clientseite verwenden

Der generierte Code enthält bereits vordefinierte Abfragereferenzen. Sie müssen sie nur importieren und „execute“ darauf anwenden.

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-Abfragemethoden aufrufen

Hier ein Beispiel für die Verwendung dieser Funktionen für Aktionskürzel:

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

Änderungen abonnieren

Sie können Änderungen abonnieren, die dann jedes Mal aktualisiert werden, wenn Sie eine Abfrage ausführen.

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`

Mutationen auf der Clientseite verwenden

Auf Mutationen kann auf die gleiche Weise wie auf Abfragen zugegriffen werden.

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

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

Datentypen im Web-SDK

Der Data Connect-Server stellt gängige GraphQL-Datentypen dar. Diese werden im SDK so dargestellt:

Data Connect-Typ	TypeScript
Zeitstempel	String
Datum	String
UUID	String
INT64	String
Doppelt	Zahl
Float	Zahl

Hinweise zu Frameworks

Angular

Beim Generieren von Code werden aufgrund des Code zur Abhängigkeitsoptimierung keine neuen Änderungen erkannt. Um dieses Problem zu beheben, müssen Sie angular.json ändern.

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