Update RTDB snippets to new API (#132)

Author: samtstern

database-next/emulator-suite.js

@@ -11,22 +11,22 @@ const firebaseApp = initializeApp({
 
 function onDocumentReady() {
   // [START rtdb_emulator_connect]
-  const { getDatabase } = require("firebase/database");
+  const { getDatabase, useDatabaseEmulator } = require("firebase/database");
 
   const db = getDatabase(firebaseApp);
   if (location.hostname === "localhost") {
     // Point to the RTDB emulator running on localhost.
-    db.useEmulator("localhost", 9000);
+    useDatabaseEmulator(db, "localhost", 9000);
   } 
   // [END rtdb_emulator_connect]
 }
 
 function flushRealtimeDatabase() {
   // [START rtdb_emulator_flush]
-  const { getDatabase } = require("firebase/database");
+  const { getDatabase, ref, set } = require("firebase/database");
 
   // With a database Reference, write null to clear the database.
   const db = getDatabase(firebaseApp);
-  db.ref().set(null);
+  set(ref(db), null);
   // [END rtdb_emulator_flush]
 }

database-next/lists-of-data.js

@@ -11,13 +11,13 @@ const firebaseApp = initializeApp({
 
 function socialPush() {
   // [START rtdb_social_push]
-  const { getDatabase } = require("firebase/database");
+  const { getDatabase, ref, push, set } = require("firebase/database");
 
   // Create a new post reference with an auto-generated id
   const db = getDatabase(firebaseApp);
-  const postListRef = db.ref('posts');
-  const newPostRef = postListRef.push();
-  newPostRef.set({
+  const postListRef = ref(db, 'posts');
+  const newPostRef = push(postListRef);
+  set(newPostRef, {
       // ...
   });
   // [END rtdb_social_push]
@@ -31,19 +31,19 @@ function socialListenChildren() {
   function deleteComment(el, key) {};
 
   // [START rtdb_social_listen_children]
-  const { getDatabase } = require("firebase/database");
+  const { getDatabase, ref, onChildAdded, onChildChanged, onChildRemoved } = require("firebase/database");
 
   const db = getDatabase(firebaseApp);
-  const commentsRef = db.ref('post-comments/' + postId);
-  commentsRef.on('child_added', (data) => {
+  const commentsRef = ref(db, 'post-comments/' + postId);
+  onChildAdded(commentsRef, (data) => {
     addCommentElement(postElement, data.key, data.val().text, data.val().author);
   });
 
-  commentsRef.on('child_changed', (data) => {
+  onChildChanged(commentsRef, (data) => {
     setCommentValues(postElement, data.key, data.val().text, data.val().author);
   });
 
-  commentsRef.on('child_removed', (data) => {
+  onChildRemoved(commentsRef, (data) => {
     deleteComment(postElement, data.key);
   });
   // [END rtdb_social_listen_children]
@@ -52,48 +52,50 @@ function socialListenChildren() {
 function socialListenValue() {
 
   // [START rtdb_social_listen_value]
-  const { getDatabase } = require("firebase/database");
+  const { getDatabase, ref, onValue } = require("firebase/database");
 
   const db = getDatabase(firebaseApp);
-  const ref = db.ref('/a/b/c');
+  const dbRef = ref(db, '/a/b/c');
 
-  ref.once('value', (snapshot) => {
+  onValue(dbRef, (snapshot) => {
     snapshot.forEach((childSnapshot) => {
       const childKey = childSnapshot.key;
       const childData = childSnapshot.val();
       // ...
     });
+  }, {
+    onlyOnce: true
   });
   // [END rtdb_social_listen_value]
 }
 
 function socialMostStarred() {
   // [START rtdb_social_most_starred]
-  const { getDatabase } = require("firebase/database");
+  const { getDatabase, ref, query, orderByChild } = require("firebase/database");
   const { getAuth } = require("firebase/auth");
 
   const db = getDatabase(firebaseApp);
   const auth = getAuth(firebaseApp);
 
   const myUserId = auth.currentUser.uid;
-  const topUserPostsRef = db.ref('user-posts/' + myUserId).orderByChild('starCount');
+  const topUserPostsRef = query(ref(db, 'user-posts/' + myUserId), orderByChild('starCount'));
   // [END rtdb_social_most_starred]
 }
 
 function socialMostViewed() {
   // [START rtdb_social_most_viewed]
-  const { getDatabase } = require("firebase/database");
+  const { getDatabase, ref, query, orderByChild } = require("firebase/database");
 
   const db = getDatabase(firebaseApp);
-  const mostViewedPosts = db.ref('posts').orderByChild('metrics/views');
+  const mostViewedPosts = query(ref(db, 'posts'), orderByChild('metrics/views'));
   // [END rtdb_social_most_viewed]
 }
 
 function socialRecent() {
   // [START rtdb_social_recent]
-  const { getDatabase } = require("firebase/database");
+  const { getDatabase, ref, query, limitToLast } = require("firebase/database");
 
   const db = getDatabase(firebaseApp);
-  const recentPostsRef = db.ref('posts').limitToLast(100);
+  const recentPostsRef = query(ref(db, 'posts'), limitToLast(100));
   // [END rtdb_social_recent]
 }

database-next/offline.js

@@ -11,23 +11,23 @@ const firebaseApp = initializeApp({
 
 function onDisconnectSimple() {
   // [START rtdb_ondisconnect_simple]
-  const { getDatabase } = require("firebase/database");
+  const { getDatabase, ref, onDisconnect } = require("firebase/database");
 
   const db = getDatabase(firebaseApp);
-  const presenceRef = db.ref("disconnectmessage");
+  const presenceRef = ref(db, "disconnectmessage");
   // Write a string when this client loses connection
-  presenceRef.onDisconnect().set("I disconnected!");
+  onDisconnect(presenceRef).set("I disconnected!");
   // [END rtdb_ondisconnect_simple]
 }
 
 function onDisconnectCallback() {
-  const { getDatabase } = require("firebase/database");
+  const { getDatabase, ref, onDisconnect } = require("firebase/database");
 
   const db = getDatabase(firebaseApp);
-  const presenceRef = db.ref("disconnectmessage");
+  const presenceRef = ref(db, "disconnectmessage");
 
   // [START rtdb_ondisconnect_callback]
-  presenceRef.onDisconnect().remove((err) => {
+  onDisconnect(presenceRef).remove().catch((err) => {
     if (err) {
       console.error("could not establish onDisconnect event", err);
     }
@@ -36,13 +36,13 @@ function onDisconnectCallback() {
 }
 
 function onDisconnectCancel() {
-  const { getDatabase } = require("firebase/database");
+  const { getDatabase, ref, onDisconnect } = require("firebase/database");
 
   const db = getDatabase(firebaseApp);
-  const presenceRef = db.ref("disconnectmessage");
+  const presenceRef = ref(db, "disconnectmessage");
 
   // [START rtdb_ondisconnect_cancel]
-  const onDisconnectRef = presenceRef.onDisconnect();
+  const onDisconnectRef = onDisconnect(presenceRef);
   onDisconnectRef.set("I disconnected");
   // some time later when we change our minds
   onDisconnectRef.cancel();
@@ -51,11 +51,11 @@ function onDisconnectCancel() {
 
 function detectConnectionState() {
   // [START rtdb_detect_connection_state]
-  const { getDatabase } = require("firebase/database");
+  const { getDatabase, ref, onValue } = require("firebase/database");
 
   const db = getDatabase(firebaseApp);
-  const connectedRef = db.ref(".info/connected");
-  connectedRef.on("value", (snap) => {
+  const connectedRef = ref(db, ".info/connected");
+  onValue(connectedRef, (snap) => {
     if (snap.val() === true) {
       console.log("connected");
     } else {
@@ -67,21 +67,21 @@ function detectConnectionState() {
 
 function setServerTimestamp() {
   // [START rtdb_set_server_timestamp]
-  const { getDatabase, ServerValue } = require("firebase/database");
+  const { getDatabase, ref, onDisconnect, serverTimestamp } = require("firebase/database");
 
   const db = getDatabase(firebaseApp);
-  const userLastOnlineRef = db.ref("users/joe/lastOnline");
-  userLastOnlineRef.onDisconnect().set(ServerValue.TIMESTAMP);
+  const userLastOnlineRef = ref(db, "users/joe/lastOnline");
+  onDisconnect(userLastOnlineRef).set(serverTimestamp());
   // [END rtdb_set_server_timestamp]
 }
 
 function estimateClockSkew() {
   // [START rtdb_estimate_clock_skew]
-  const { getDatabase } = require("firebase/database");
+  const { getDatabase, ref, onValue } = require("firebase/database");
 
   const db = getDatabase(firebaseApp);
-  const offsetRef = db.ref(".info/serverTimeOffset");
-  offsetRef.on("value", (snap) => {
+  const offsetRef = ref(db, ".info/serverTimeOffset");
+  onValue(offsetRef, (snap) => {
     const offset = snap.val();
     const estimatedServerTimeMs = new Date().getTime() + offset;
   });
@@ -90,31 +90,31 @@ function estimateClockSkew() {
 
 function samplePresenceApp() {
   // [START rtdb_sample_presence_app]
-  const { getDatabase, ServerValue } = require("firebase/database");
+  const { getDatabase, ref, onValue, push, onDisconnect, set, serverTimestamp } = require("firebase/database");
 
   // Since I can connect from multiple devices or browser tabs, we store each connection instance separately
   // any time that connectionsRef's value is null (i.e. has no children) I am offline
   const db = getDatabase(firebaseApp);
-  const myConnectionsRef = db.ref('users/joe/connections');
+  const myConnectionsRef = ref(db, 'users/joe/connections');
 
   // stores the timestamp of my last disconnect (the last time I was seen online)
-  const lastOnlineRef = db.ref('users/joe/lastOnline');
+  const lastOnlineRef = ref(db, 'users/joe/lastOnline');
 
-  const connectedRef = db.ref('.info/connected');
-  connectedRef.on('value', (snap) => {
+  const connectedRef = ref(db, '.info/connected');
+  onValue(connectedRef, (snap) => {
     if (snap.val() === true) {
       // We're connected (or reconnected)! Do anything here that should happen only if online (or on reconnect)
-      const con = myConnectionsRef.push();
+      const con = push(myConnectionsRef);
 
       // When I disconnect, remove this device
-      con.onDisconnect().remove();
+      onDisconnect(con).remove();
 
       // Add this device to my connections list
       // this value could contain info about the device or a timestamp too
-      con.set(true);
+      set(con, true);
 
       // When I disconnect, update the last time I was seen online
-      lastOnlineRef.onDisconnect().set(ServerValue.TIMESTAMP);
+      onDisconnect(lastOnlineRef).set(serverTimestamp());
     }
   });
   // [END rtdb_sample_presence_app]