Pakiety SDK klienta Firebase Data Connect umożliwiają wywoływanie zapytań i mutacji po stronie serwera bezpośrednio z aplikacji Firebase. Niestandardowy pakiet SDK klienta generujesz równolegle z projektowaniem schematów, zapytań i mutacji, które wdrażasz w usłudze Data Connect. Następnie integrujesz metody z tego pakietu SDK z logiką klienta.
Jak już wspomnieliśmy, ważne jest, aby pamiętać, że zapytania i mutacje Data Connectnie są przesyłane przez kod klienta i wykonywane na serwerze. Zamiast tego po wdrożeniu operacje Data Connect są przechowywane na serwerze, podobnie jak w przypadku Cloud Functions. Oznacza to, że musisz wdrożyć odpowiednie zmiany po stronie klienta, aby nie zakłócać działania aplikacji u dotychczasowych użytkowników (np. w starszych wersjach aplikacji).
Dlatego Data Connect udostępnia środowisko programistyczne i narzędzia, które umożliwiają tworzenie prototypów schematów, zapytań i mutacji wdrożonych na serwerze. Podczas tworzenia prototypu automatycznie generuje też zestawy SDK po stronie klienta.
Po iteracji aktualizacji usługi i aplikacji klienckich aktualizacje zarówno po stronie serwera, jak i klienta będą gotowe do wdrożenia.
Generowanie pakietu SDK dla klienta internetowego
Podobnie jak w przypadku większości projektów Firebase, praca nad kodem klienta Firebase Data Connect odbywa się w lokalnym katalogu projektu. Zarówno rozszerzenie Data Connect VS Code, jak i interfejs wiersza poleceń Firebase są ważnymi narzędziami lokalnymi do generowania kodu klienta i zarządzania nim.
Opcje generowania pakietu SDK są powiązane z kilkoma wpisami w pliku dataconnect.yaml, który został wygenerowany podczas inicjowania projektu.
Inicjowanie generowania pakietu SDK
W konfiguracjiconnector.yaml dodaj swoje outputDir, package i (w przypadku pakietu SDK na potrzeby internetu) packageJsonDir.
generate:
javascriptSdk:
outputDir: "../movies-generated"
package: "@movie-app/movies"
packageJsonDir: "../../"
outputDir określa, gdzie powinien trafiać wygenerowany pakiet SDK.
package określa nazwę pakietu.
packageJsonDir określa, gdzie zainstalować pakiet.
W takim przypadku zainstaluj firebase@latest, aby spełnić tę zależność od peera.
Konfigurowanie ścieżek względem node_modules
W przypadku pakietu SDK na potrzeby przeglądarki, ponieważ Data Connect używa npm link do instalowania pakietu SDK, wygenerowany pakiet SDK musi zostać zapisany w katalogu na tym samym poziomie co ścieżka node_modules lub w katalogu podrzędnym, który może uzyskać dostęp do node_modules.
Inaczej mówiąc, wygenerowany pakiet SDK musi mieć dostęp do modułu węzła firebase, aby działać prawidłowo.
Jeśli na przykład node_modules znajduje się w my-app/, katalog wyjściowy powinien mieć nazwę my-app/js-email-generated, aby js-email-generated mógł zaimportować dane z folderu nadrzędnego node_modules.
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"
Jeśli masz repozytorium mono, w którym moduły są hostowane w katalogu głównym, możesz umieścić katalog wyjściowy w dowolnym folderze w tym repozytorium.
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
Aktualizuj pakiety SDK podczas prototypowania
Jeśli tworzysz interaktywne prototypy za pomocą rozszerzenia Data Connect VS Code i jego emulatora Data Connect, pliki źródłowe pakietu SDK są generowane automatycznie i aktualizowane podczas modyfikowania plików .gql definiujących schematy, zapytania i mutacje. Może to być przydatna funkcja w przypadku procesów (ponownego) wczytywania na gorąco.
.gql, a także automatycznie aktualizować źródła pakietu SDK.
Możesz też użyć interfejsu wiersza poleceń, aby wygenerować pakiety SDK za każdym razem, gdy zmienisz pliki .gql:
firebase dataconnect:sdk:generate --watchGenerowanie pakietów SDK na potrzeby integracji i wersji produkcyjnych
W niektórych przypadkach, np. podczas przygotowywania źródeł projektu do przesłania na potrzeby testów CI, możesz wywołać interfejs wiersza poleceń Firebase w celu aktualizacji zbiorczej.
W takich przypadkach użyj firebase dataconnect:sdk:generate.
Konfigurowanie kodu klienta
Zainicjuj aplikację Data Connect
Najpierw zainicjuj aplikację za pomocą standardowej sekwencji Firebase.
initializeApp({...});
Inicjowanie pakietu SDK Data Connect dla klienta internetowego
Zainicjuj instancję Data Connect, korzystając z informacji użytych do skonfigurowania usługi Data Connect (wszystkie dostępne w konsoli Firebase na karcie Data Connect).
Obiekt ConnectorConfig
Pakiet SDK wymaga obiektu konfiguracji łącznika.
Ten obiekt jest generowany automatycznie na podstawie obiektów serviceId i location w dataconnect.yaml oraz connectorId w connector.yaml.
Importowanie bibliotek
Do zainicjowania kodu klienta potrzebne są 2 zbiory importów: ogólne importy Data Connect i konkretne, wygenerowane importy pakietu SDK.
// 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';
Twórz prototypy i testuj swoje klienty internetowe
Użyj klienta do korzystania z lokalnego emulatora
Możesz użyć emulatora Data Connect, korzystając z rozszerzenia Data Connect w VS Code lub z poziomu wiersza poleceń.
W obu przypadkach instrumentowanie aplikacji w celu połączenia z emulatorem jest takie samo.
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
Aby przełączyć się na zasoby produkcyjne, skomentuj wiersze służące do łączenia się z emulatorem.
Pobieranie instancji
Wywołanie funkcji getDataConnect jest wymagane tylko wtedy, gdy chcesz połączyć się z emulatorem Data Connect.
W przeciwnym razie wygenerowany pakiet SDK automatycznie utworzy dla Ciebie instancję obiektu DataConnect.
Używanie zapytań po stronie klienta
Wygenerowany kod będzie zawierać wstępnie zdefiniowane odwołania do zapytań. Wystarczy je zaimportować i wywołać na nich wykonanie.
import { executeQuery } from 'firebase/data-connect';
import { listMoviesRef } from '@movie-app/movies';
const ref = listMoviesRef();
const { data } = await executeQuery(ref);
console.log(data.movies);
Wywoływanie metod zapytań pakietu SDK
Oto przykład użycia tych funkcji skrótu działania:
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);
}
Subskrybowanie zmian
Możesz subskrybować zmiany (będą one aktualizowane za każdym razem, gdy wykonasz zapytanie).
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`
Używanie mutacji po stronie klienta
Mutacje są dostępne w taki sam sposób jak zapytania.
import { executeMutation } from 'firebase/data-connect';
import { createMovieRef } from '@movie-app/movies';
const { data } = await executeMutation(createMovieRef({ movie: 'Empire Strikes Back' }));
Typy danych w internetowym pakiecie SDK
Serwer Data Connect reprezentuje typowe typy danych GraphQL. W pakiecie SDK są one reprezentowane w ten sposób:
| Typ połączenia danych | TypeScript |
|---|---|
| Sygnatura czasowa | ciąg znaków |
| Data | ciąg znaków |
| UUID | ciąg znaków |
| Int64 | ciąg znaków |
| Podwójne | Liczba |
| Liczba zmiennoprzecinkowa | Liczba |
Informacje o ramówkach
Angular
Podczas generowania kodu Angular CLI nie uwzględni nowych zmian z powodu kodu optymalizacji zależności. Aby to naprawić, musisz zmodyfikować angular.json.
"projects": {
"myproject": {
"architect": {
"serve:": {
"prebundle": {
"exclude": ["@movie-app/movies"]
}
}
}
}
}