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 dans 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 des données à une liste

Utilisez la méthode push() pour ajouter des données à une liste dans les applications multi-utilisateurs. La méthode push() génère une clé unique chaque fois qu'un 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 conflits d'écriture. La clé unique générée par push() est basée sur un code temporel. Les éléments de la liste sont donc automatiquement classés par ordre chronologique.

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 répartition des données.

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

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 se produisent sur les enfants d'un nœud à partir d'une opération telle qu'un nouvel enfant ajouté via la méthode push() ou un enfant mis à jour via la méthode update().

Chacun de ces éléments peut être utile pour écouter les modifications apportées à un nœud spécifique d'une base de données. Par exemple, une application de blog social 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 les 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.

Si vous associez un observateur value à une liste de données, la liste entière sera renvoyée sous la forme d'un instantané unique que vous pourrez ensuite parcourir en boucle pour accéder à chaque enfant.

Même lorsqu'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 parcourir 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 être utile lorsque vous souhaitez récupérer tous les enfants d'une liste en une seule opération, plutôt que d'écouter les événements d'enfant ajouté supplémentaires.

Trier et filtrer les données

Vous pouvez utiliser la classe Realtime Database Query 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 pour obtenir 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 order-by pour déterminer l'ordre des résultats :

Vous ne pouvez utiliser qu'une seule méthode order-by à la fois. L'appel d'une méthode order-by 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 par 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, classés par le nombre d'étoiles que chaque post a reçues. Cette technique d'utilisation des ID comme clés d'index est appelée "expansion des données". Pour en savoir plus, consultez Structurer votre base de données.

L'appel à la méthode orderByChild() spécifie la clé enfant selon 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 vous avez des données qui ressemblent à ceci :

"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 ordonner les éléments de notre liste par valeurs imbriquées sous la clé metrics en spécifiant le chemin d'accès relatif à 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 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 d'ordre lorsque vous créez une requête.

Contrairement aux méthodes order-by, vous pouvez combiner plusieurs fonctions limit ou range. 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 recevrez initialement que 100 événements child_added. Si votre base de données Firebase contient moins de 100 éléments, un événement child_added est déclenché pour chacun d'eux.

À 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 une application de blog type définit une requête pour récupérer la liste des 100 derniers posts 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. Pour synchroniser réellement les données, il doit être associé à un écouteur.

Filtrer par clé ou par valeur

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

Ordre des données de requête

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

orderByChild

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

1. Les enfants dont la valeur null correspond à la clé enfant spécifiée sont affichés en premier.
2. Viennent ensuite les enfants dont la valeur est false pour la clé enfant spécifiée. Si plusieurs enfants ont une valeur de false, ils sont triés lexicographiquement par clé.
3. Viennent ensuite les enfants dont la valeur est true pour la clé enfant spécifiée. Si plusieurs enfants ont une valeur de true, ils sont triés de façon lexicographique par clé.
4. Les enfants avec une valeur numérique suivent, 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 façon lexicographique par clé.
6. Les objets sont placés en dernier et triés de manière lexicographique par clé, dans l'ordre croissant.

orderByKey

Lorsque vous utilisez orderByKey() pour trier vos données, celles-ci sont renvoyées par clé dans l'ordre croissant.

1. Les enfants dont la clé peut être analysée comme un entier de 32 bits sont affichés en premier, 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 classés par ordre de 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.

Détacher les écouteurs

Les fonctions de rappel sont supprimées en appelant 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(). L'appel de 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