Utiliser les SDK Flutter générés

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 correspondantes côté client pour éviter de perturber les utilisateurs existants (par exemple, sur d'anciennes versions de l'application).

C'est pourquoi Data Connect vous fournit un environnement et des outils de développement qui vous permettent de prototyper 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é des mises à jour de vos applications de service et clientes, les mises à jour côté serveur et côté client sont prêtes à être déployées.

Générer votre SDK Flutter

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

connectorId: movies
generate:
  dartSdk:
    outputDir: ../../lib/generated # Feel free to change this to a different path
    package: movies

outputDir spécifie l'emplacement de sortie du SDK généré. Ce chemin est relatif au répertoire contenant le fichier connector.yaml lui-même. Vous pouvez éventuellement fournir un chemin d'accès absolu à votre outputDir.

package spécifie le nom du package.

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.

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 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 en suivant les instructions de configuration standards de Firebase.

Ensuite, installez le plug-in Data Connect:

flutter pub add firebase_data_connect

Initialiser le SDK Flutter 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).

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 'package:firebase_data_connect/firebase_data_connect.dart';

// generated queries and mutations from SDK
import 'generated/movies.dart';

Concevoir et tester vos applications Flutter

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 se connecter à l'émulateur est la même dans les deux scénarios.

import 'package:firebase_data_connect/firebase_data_connect.dart';
import 'generated/movies.dart';

MoviesConnector.instance.dataConnect
          .useDataConnectEmulator('127.0.0.1', 9399);

// Make calls from your app
QueryRef<ListMoviesData, void> ref = MoviesConnector.instance.listMovies.ref();

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

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 sur ces éléments.

import 'generated/movies.dart';

await MoviesConnector.instance.listMovies().execute();

Appeler les méthodes de requête du SDK

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

import 'generated/movies.dart';

function onBtnClick() {
  // This will call the generated Dart from the CLI and then make an HTTP request to the server.
  MoviesConnector.instance.listMovies().execute().then(data => showInUI(data)); // == MoviesConnector.instance.listMovies().ref().execute();
}

Champs facultatifs

Certaines requêtes peuvent comporter des champs facultatifs. Dans ce cas, le SDK Flutter expose une méthode de compilation et doit être défini séparément.

Par exemple, le champ rating est facultatif lors de l'appel de createMovie. Vous devez donc le fournir dans la fonction du compilateur.

await MoviesConnector.instance.createMovie({ title: 'Empire Strikes Back', releaseYear: 1980, genre: "Sci-Fi"}).rating(5).execute();

S'abonner aux modifications

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

QueryRef<ListMoviesData, void> listRef = MoviesConnector.instance.listMovies().ref();

// subscribe will immediately invoke the query if no execute was called on it previously.
listRef.subscribe().listen((data) {
  updateUIWithMovies(data.movies);
});

await MoviesConnector.instance.createMovie({ title: 'Empire Strikes Back', releaseYear: 1980, genre: "Sci-Fi" }).rating(5).execute();
await listRef.execute(); // 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.

await MoviesConnector.instance.createMovie({ title: 'Empire Strikes Back', releaseYear: 1980, genre: "Sci-Fi" }).rating(5).execute();

Types de données dans le SDK Dart

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