Użyj wygenerowanych internetowych pakietów SDK

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, Data Connectzapytania i mutacje nie są przesyłane przez kod klienta ani 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.

Gdy wprowadzisz aktualizacje w aplikacjach usługi i klienta, będzie można wdrożyć aktualizacje zarówno po stronie serwera, jak i po stronie klienta.

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 w VS Code, jak i narzędzie 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

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

outputDir określa, gdzie ma zostać 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, aby wygenerowany pakiet SDK działał prawidłowo, musi mieć dostęp do węzła firebase.

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

Aktualizowanie pakietów SDK podczas prototypowania

Jeśli prototypowanie odbywa się interaktywnie za pomocą rozszerzenia Data Connect w VS Code i jego emulatora Data Connect, podczas modyfikowania plików .gql definiujących schematy, zapytania i mutacje pliki źródłowe pakietu SDK są automatycznie generowane i aktualizowane. Może to być przydatna funkcja w przypadku procesów (ponownego) wczytywania na gorąco.

Możesz też użyć interfejsu wiersza poleceń, aby wygenerować pakiety SDK za każdym razem, gdy zmienisz pliki .gql:

firebase dataconnect:sdk:generate --watch

Generowanie 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

Inicjalizacja aplikacji Data Connect

Najpierw zainicjuj aplikację za pomocą standardowej sekwencji Firebase.

initializeApp({...});

Zainicjuj pakiet 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 automatycznie generowany na podstawie elementów serviceId i location w dataconnect.yaml oraz elementu 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';

Tworzenie prototypów i testowanie klientów internetowych

Użyj klienta, aby użyć 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.

Korzystanie z zapytań po stronie klienta

Wygenerowany kod będzie zawierać wstępnie zdefiniowane odwołania do zapytań. Wystarczy je zaimportować i wykonać.

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`

Korzystanie z 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 pakiecie SDK dla klienta internetowego

Serwer Data Connect reprezentuje typowe typy danych GraphQL. W pakiecie SDK są one reprezentowane w ten sposób:

Uwagi na temat platform

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"]
                              }
                   }
            }
     }
  }