Utiliser des listes de données sur le Web

Obtenir une référence de base de données

Pour lire ou écrire des données à partir de la base de données, vous avez besoin d'une instance de firebase.database.Reference :

import { getDatabase } from "firebase/database";

const database = getDatabase();
rtdb_get_reference.js

var database = firebase.database();
index.js

Lire et écrire des listes

Ajouter à une liste de données

Utilisez la méthode push() pour ajouter des données à une liste dans des applications multi-utilisateurs. La méthode push() génère une clé unique chaque fois qu'un nouvel enfant est ajouté à la référence Firebase spécifiée. En utilisant ces clés générées automatiquement pour chaque nouvel élément de la liste, plusieurs clients peuvent ajouter des enfants au même emplacement en même temps sans conflit d'écriture. La clé unique générée par push() est basée sur un code temporel. Les éléments de liste sont donc automatiquement triés chronologiquement.

Vous pouvez utiliser la référence aux nouvelles données renvoyées par la méthode push() pour obtenir la valeur de la clé générée automatiquement de l'enfant ou définir des données pour l'enfant. La propriété .key d'une référence push() contient la clé générée automatiquement.

Vous pouvez utiliser ces clés générées automatiquement pour simplifier l'aplatissement de votre structure de données. Pour en savoir plus, consultez l'exemple de fan-out de données.

Par exemple, push() peut être utilisé pour ajouter un post à une liste de posts dans une application de réseau social:

import { getDatabase, ref, push, set } from "firebase/database";

// Create a new post reference with an auto-generated id
const db = getDatabase();
const postListRef = ref(db, 'posts');
const newPostRef = push(postListRef);
set(newPostRef, {
    // ...
});
rtdb_social_push.js

// Create a new post reference with an auto-generated id
var postListRef = firebase.database().ref('posts');
var newPostRef = postListRef.push();
newPostRef.set({
    // ...
});
lists-of-data.js

Écouter les événements enfants

Les événements enfants sont déclenchés en réponse à des opérations spécifiques qui affectent les enfants d'un nœud à partir d'une opération, comme l'ajout d'un enfant via la méthode push() ou la mise à jour d'un enfant via la méthode update().

Chacun de ces éléments peut être utile pour écouter les modifications apportées à un nœud spécifique dans une base de données. Par exemple, une application de bloggage sur les réseaux sociaux peut utiliser ces méthodes ensemble pour surveiller l'activité dans les commentaires d'un post, comme indiqué ci-dessous :

import { getDatabase, ref, onChildAdded, onChildChanged, onChildRemoved } from "firebase/database";

const db = getDatabase();
const commentsRef = ref(db, 'post-comments/' + postId);
onChildAdded(commentsRef, (data) => {
  addCommentElement(postElement, data.key, data.val().text, data.val().author);
});

onChildChanged(commentsRef, (data) => {
  setCommentValues(postElement, data.key, data.val().text, data.val().author);
});

onChildRemoved(commentsRef, (data) => {
  deleteComment(postElement, data.key);
});
rtdb_social_listen_children.js

var commentsRef = firebase.database().ref('post-comments/' + postId);
commentsRef.on('child_added', (data) => {
  addCommentElement(postElement, data.key, data.val().text, data.val().author);
});

commentsRef.on('child_changed', (data) => {
  setCommentValues(postElement, data.key, data.val().text, data.val().author);
});

commentsRef.on('child_removed', (data) => {
  deleteComment(postElement, data.key);
});
lists-of-data.js

Écouter les événements de valeur

Bien que l'écoute des événements enfants soit la méthode recommandée pour lire des listes de données, il existe des situations où l'écoute des événements de valeur sur une référence de liste est utile.

Associer un observateur value à une liste de données renvoie la liste complète de données sous la forme d'un seul instantané que vous pouvez ensuite parcourir pour accéder à des enfants individuels.

Même s'il n'y a qu'une seule correspondance pour la requête, l'instantané reste une liste, mais ne contient qu'un seul élément. Pour accéder à l'élément, vous devez effectuer une boucle sur le résultat:

import { getDatabase, ref, onValue } from "firebase/database";

const db = getDatabase();
const dbRef = ref(db, '/a/b/c');

onValue(dbRef, (snapshot) => {
  snapshot.forEach((childSnapshot) => {
    const childKey = childSnapshot.key;
    const childData = childSnapshot.val();
    // ...
  });
}, {
  onlyOnce: true
});
rtdb_social_listen_value.js

ref.once('value', (snapshot) => {
  snapshot.forEach((childSnapshot) => {
    var childKey = childSnapshot.key;
    var childData = childSnapshot.val();
    // ...
  });
});
lists-of-data.js

Ce modèle peut s'avérer utile lorsque vous souhaitez récupérer tous les enfants d'une liste en une seule opération, plutôt que d'écouter des événements d'ajout d'enfants supplémentaires.

Trier et filtrer des données

Vous pouvez utiliser la classe Query Realtime Database pour récupérer des données triées par clé, par valeur ou par valeur d'un enfant. Vous pouvez également filtrer les résultats triés selon un nombre spécifique de résultats, ou une plage de clés ou de valeurs.

Trier les données

Pour récupérer des données triées, commencez par spécifier l'une des méthodes de tri afin de déterminer comment les résultats sont ordonnés:

Vous ne pouvez utiliser qu'une méthode de tri à la fois. Appeler une méthode de tri plusieurs fois dans la même requête génère une erreur.

L'exemple suivant montre comment récupérer la liste des posts les plus populaires d'un utilisateur, triés en fonction de leur nombre d'étoiles:

import { getDatabase, ref, query, orderByChild } from "firebase/database";
import { getAuth } from "firebase/auth";

const db = getDatabase();
const auth = getAuth();

const myUserId = auth.currentUser.uid;
const topUserPostsRef = query(ref(db, 'user-posts/' + myUserId), orderByChild('starCount'));
rtdb_social_most_starred.js

var myUserId = firebase.auth().currentUser.uid;
var topUserPostsRef = firebase.database().ref('user-posts/' + myUserId).orderByChild('starCount');
lists-of-data.js

Cela définit une requête qui, combinée à un écouteur enfant, synchronise le client avec les posts de l'utilisateur à partir du chemin d'accès dans la base de données en fonction de son ID utilisateur, triés par nombre d'étoiles reçues par chaque post. Cette technique d'utilisation des ID comme clés d'index s'appelle "fan-out" des données. Pour en savoir plus, consultez Structurer votre base de données.

L'appel de la méthode orderByChild() spécifie la clé enfant en fonction de laquelle trier les résultats. Dans ce cas, les posts sont triés en fonction de la valeur de leur enfant "starCount" respectif. Les requêtes peuvent également être triées par enfants imbriqués, si vos données se présentent comme suit :

"posts": {
  "ts-functions": {
    "metrics": {
      "views" : 1200000,
      "likes" : 251000,
      "shares": 1200,
    },
    "title" : "Why you should use TypeScript for writing Cloud Functions",
    "author": "Doug",
  },
  "android-arch-3": {
    "metrics": {
      "views" : 900000,
      "likes" : 117000,
      "shares": 144,
    },
    "title" : "Using Android Architecture Components with Firebase Realtime Database (Part 3)",
    "author": "Doug",
  }
},

Dans ce cas, nous pouvons organiser nos éléments de liste par valeurs imbriquées sous la clé metrics en spécifiant le chemin relatif vers l'enfant imbriqué dans notre appel orderByChild().

import { getDatabase, ref, query, orderByChild } from "firebase/database";

const db = getDatabase();
const mostViewedPosts = query(ref(db, 'posts'), orderByChild('metrics/views'));
rtdb_social_most_viewed.js

var mostViewedPosts = firebase.database().ref('posts').orderByChild('metrics/views');
lists-of-data.js

Pour en savoir plus sur l'ordre des autres types de données, consultez la section Ordre des données de requête.

Filtrer les données

Pour filtrer les données, vous pouvez combiner l'une des méthodes de limite ou de plage avec une méthode de tri lors de la création d'une requête.

Contrairement aux méthodes de tri, vous pouvez combiner plusieurs fonctions de limite ou de plage. Par exemple, vous pouvez combiner les méthodes startAt() et endAt() pour limiter les résultats à une plage de valeurs spécifiée.

Limiter le nombre de résultats

Vous pouvez utiliser les méthodes limitToFirst() et limitToLast() pour définir un nombre maximal d'enfants à synchroniser pour un événement donné. Par exemple, si vous utilisez limitToFirst() pour définir une limite de 100, vous ne recevez initialement que 100 événements child_added. Si vous stockez moins de 100 éléments dans votre base de données Firebase, un événement child_added se déclenche pour chaque élément.

À mesure que les éléments changent, vous recevez des événements child_added pour les éléments qui entrent dans la requête et des événements child_removed pour les éléments qui en sortent, de sorte que le nombre total reste à 100.

L'exemple suivant montre comment l'exemple d'application de blog définit une requête pour récupérer la liste des 100 articles les plus récents de tous les utilisateurs:

import { getDatabase, ref, query, limitToLast } from "firebase/database";

const db = getDatabase();
const recentPostsRef = query(ref(db, 'posts'), limitToLast(100));
rtdb_social_recent.js

var recentPostsRef = firebase.database().ref('posts').limitToLast(100);
lists-of-data.js

Cet exemple ne définit qu'une requête. Afin de synchroniser les données, elle doit être associée à un écouteur.

Filtrer par clé ou valeur

Vous pouvez utiliser startAt(), startAfter(), endAt(), endBefore() et equalTo() pour choisir des points de début, de fin et d'équivalence arbitraires pour les requêtes. Cela peut être utile pour paginer des données ou rechercher des éléments avec des enfants ayant une valeur spécifique.

Ordre des données de requête

Cette section explique comment les données sont triées selon chacune des méthodes "order-by" dans la classe Query.

orderByChild

Lorsque vous utilisez orderByChild(), les données contenant la clé enfant spécifiée sont triées comme suit :

1. Les enfants dont la valeur de la clé enfant spécifiée est null sont affichés en premier.
2. Les enfants dont la valeur est false pour la clé enfant spécifiée viennent ensuite. Si plusieurs enfants ont une valeur de false, ils sont triés de manière lexicographique par clé.
3. Les enfants dont la valeur est true pour la clé enfant spécifiée sont les suivants. Si plusieurs enfants ont une valeur de true, ils sont triés par clé de façon lexicographique.
4. Les enfants associés à une valeur numérique viennent ensuite, triés par ordre croissant. Si plusieurs enfants ont la même valeur numérique pour le nœud enfant spécifié, ils sont triés par clé.
5. Les chaînes viennent après les nombres et sont triées par ordre lexicographique croissant. Si plusieurs enfants ont la même valeur pour le nœud enfant spécifié, ils sont triés de manière lexicographique par clé.
6. Les objets sont placés en dernier et sont triés par ordre croissant, de manière lexicographique, en fonction de la clé.

orderByKey

Lorsque vous utilisez orderByKey() pour trier vos données, elles sont renvoyées par ordre croissant par clé.

1. Les enfants dont la clé peut être analysée en tant qu'entier 32 bits sont affichés en premier, triés par ordre croissant.
2. Les enfants dont la clé est une valeur de chaîne viennent ensuite, triés par ordre lexicographique croissant.

orderByValue

Lorsque vous utilisez orderByValue(), les enfants sont triés en fonction de leur valeur. Les critères de tri sont les mêmes que dans orderByChild(), sauf que la valeur du nœud est utilisée à la place de la valeur d'une clé enfant spécifiée.

Dissocier les écouteurs

Pour supprimer les rappels, appelez la méthode off() sur votre référence de base de données Firebase.

Vous pouvez supprimer un seul écouteur en le transmettant en tant que paramètre à off(). Appeler off() sur l'emplacement sans arguments supprime tous les écouteurs à cet emplacement.

L'appel de off() sur un écouteur parent ne supprime pas automatiquement les écouteurs enregistrés sur ses nœuds enfants. off() doit également être appelé sur tous les écouteurs enfants pour supprimer le rappel.

Étapes suivantes

• Découvrez comment structurer les données.
• Stocker des données hors connexion