Utiliser les SDK Web générés

Remarque :Firebase Data Connect est en version Preview publique. Data Connect sera soumis aux "Conditions des offres de pré-DG" de la section Conditions spécifiques du service des conditions d'utilisation de Google Cloud Platform. Les fonctionnalités pré-DG sont disponibles "en l'état" et peuvent avoir une prise en charge limitée. Pour en savoir plus, consultez les descriptions des étapes de lancement.

Les SDK client Firebase Data Connect vous permettent d'appeler vos requêtes et mutations côté serveur directement à partir d'une application Firebase. Vous générez un SDK client personnalisé en parallèle lorsque vous concevez les schémas, les requêtes et les mutations que vous déployez sur votre service Data Connect. Vous intégrez ensuite les méthodes de ce SDK dans votre logique client.

Comme nous l'avons indiqué ailleurs, il est important de noter que les requêtes et les mutations Data Connect ne sont pas envoyées par le code client et exécutées sur le serveur. Au lieu de cela, lors du déploiement, les opérations Data Connect sont stockées sur le serveur, comme Cloud Functions. Cela signifie que vous devez déployer les modifications côté client correspondantes pour éviter de perturber les utilisateurs existants (par exemple, sur les anciennes versions de l'application).

C'est pourquoi Data Connect vous fournit un environnement de développement et des outils qui vous permettent de créer des prototypes de vos schémas, requêtes et mutations déployés sur le serveur. Il génère également automatiquement des SDK côté client pendant le prototypage.

Une fois que vous avez itéré les mises à jour de votre service et de vos applications clientes, les mises à jour côté serveur et côté client sont prêtes à être déployées.

Générer votre SDK Web

Comme pour la plupart des projets Firebase, le travail sur le code client Firebase Data Connect se déroule dans un répertoire de projet local. L'extension VS Code Data Connect et la CLI Firebase sont tous deux des outils locaux importants pour générer et gérer le code client.

Les options de génération de SDK sont associées à plusieurs entrées dans le fichier dataconnect.yaml généré lorsque vous avez initialisé votre projet.

Initialiser la génération du SDK

Dans votre connector.yaml, ajoutez vos outputDir, package et (pour le SDK Web) packageJsonDir.

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

outputDir spécifie l'emplacement où le SDK généré doit être généré.

package spécifie le nom du package.

packageJsonDir spécifie l'emplacement où installer le package.

Remarque :Pour la génération, nous ajoutons "firebase": "^10.14.0" en tant que peerDependency. Selon votre gestionnaire de dépendances (pnpm, par exemple), il est possible que ces dépendances ne soient pas installées automatiquement.

Dans ce cas, installez firebase@latest pour vous assurer que cette dépendance de paire est satisfaite.

Configurer des chemins d'accès relatifs à node_modules

Pour le SDK Web, comme Data Connect utilise npm link pour installer votre SDK, votre SDK généré doit être généré dans un répertoire au même niveau que votre chemin node_modules ou dans un répertoire enfant pouvant accéder à node_modules.

En d'autres termes, votre SDK généré doit avoir accès au module de nœud firebase pour fonctionner correctement.

Par exemple, si votre node_modules se trouve dans my-app/, votre répertoire de sortie doit être my-app/js-email-generated afin que js-email-generated puisse importer à partir de son dossier parent 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"

Si vous disposez d'un monorépertoire dans lequel vos modules sont hébergés à la racine, vous pouvez placer votre répertoire de sortie dans n'importe quel dossier de votre monorépertoire.

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

Remarque :Vous pouvez fournir un chemin d'accès absolu aux répertoires si votre projet est configuré dans une structure de répertoire distincte.

Mettre à jour les SDK lors du prototypage

Si vous effectuez un prototypage interactif avec l'extension Data Connect pour VS Code et son émulateur Data Connect, les fichiers sources du SDK sont automatiquement générés et mis à jour lorsque vous modifiez les fichiers .gql qui définissent les schémas, les requêtes et les mutations. Cette fonctionnalité peut s'avérer utile dans les workflows de (re)chargement à chaud.

Dans d'autres cas, si vous utilisez l'émulateur Data Connect à partir de la CLI Firebase, vous pouvez définir une surveillance des mises à jour .gql et mettre à jour automatiquement les sources du SDK.

Vous pouvez également utiliser la CLI pour regénérer les SDK chaque fois que des fichiers .gql sont modifiés:

firebase dataconnect:sdk:generate --watch

Générer des SDK pour l'intégration et les versions de production

Dans certains cas, par exemple lorsque vous préparez les sources de projet à envoyer pour les tests de CI, vous pouvez appeler la CLI Firebase pour une mise à jour par lot.

Dans ce cas, utilisez firebase dataconnect:sdk:generate.

Configurer le code client

Initialiser votre application Data Connect

Commencez par initialiser votre application à l'aide de la séquence Firebase standard.

initializeApp({...});

Initialiser le SDK Web Data Connect

Initialisez votre instance Data Connect à l'aide des informations que vous avez utilisées pour configurer Data Connect (toutes disponibles dans l'onglet "Data Connect" de la console Firebase).

Objet ConnectorConfig

Le SDK nécessite un objet de configuration du connecteur.

Cet objet est généré automatiquement à partir de serviceId et location dans dataconnect.yaml, et de connectorId dans connector.yaml.

Importer des bibliothèques

Deux ensembles d'importations sont nécessaires pour initialiser votre code client : des importations Data Connect générales et des importations de SDK générées spécifiques.

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

Créer des prototypes et tester vos clients Web

Instrumenter les clients pour qu'ils utilisent un émulateur local

Vous pouvez utiliser l'émulateur Data Connect, que ce soit à partir de l'extension VS Code Data Connect ou de la CLI.

L'instrumentation de l'application pour la connecter à l'émulateur est la même dans les deux scénarios.

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

Pour passer aux ressources de production, commentez les lignes permettant de se connecter à l'émulateur.

Obtenir une instance

L'appel de getDataConnect n'est obligatoire que si vous souhaitez vous connecter à l'émulateur Data Connect. Sinon, le SDK généré créera automatiquement une instance de l'objet DataConnect.

Utiliser des requêtes côté client

Le code généré est déjà fourni avec des références de requête prédéfinies. Il vous suffit d'importer et d'appeler execute dessus.

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

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

Appeler les méthodes de requête du SDK

Voici un exemple d'utilisation de ces fonctions de raccourci d'action:

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

S'abonner aux modifications

Vous pouvez vous abonner aux modifications (qui seront mises à jour chaque fois que vous exécuterez une requête).

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`

Utiliser des mutations côté client

Les mutations sont accessibles de la même manière que les requêtes.

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

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

Types de données dans le SDK Web

Le serveur Data Connect représente les types de données GraphQL courants. Ils sont représentés dans le SDK comme suit.

Type de connexion Data Connect	TypeScript
Horodatage	chaîne
Date	chaîne
UUID	chaîne
Int64	chaîne
Double	Nombre
Float	Nombre

Considérations concernant les frameworks

Angular

Lors de la génération de code, Angular CLI ne détecte pas les nouvelles modifications en raison de son code d'optimisation des dépendances. Pour résoudre ce problème, vous devez modifier votre angular.json.

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