React+Firebase: How to add item to list data into firebase realtime database

Question

I'm using react and firebase real-time database. I want to create a list for each user. A list of id to later look for files in storage. In this case what is the best method to generate and add an id to list in database? (Not list of data, the data stored in the database is the list)

So I have two methods in mind. I'll write in pseudo code

//Method 1
//get id list
receivedList = getKeyListFromDB()
//generate ID
newID = generateID()
// append new id
receivedList.append(newID)
//set value with updated list
updateDB(receivedList)

//Method 2
// Using the list provided by the firebase
newRef = firebase.database().ref().child('pathToList').push()
newRef.set({
      key: newRef.key
    })

I was going for method 1, but couldn't find a way to generate id. And retreiving the list to update it seemed inefficient. So I tried to find another method. But I can't find a good way to do this.

Solution to add a value to list in database

I have solved using transaction method. But if there is a way to solve by using push please do answer.

Frank van Puffelen · Accepted Answer · 2019-11-11 01:51:32Z

2

There are many reasons why Firebase has a built-in push() operation to add a child node to a list. In fact, you've already listen one of them in your question:

retreiving the list to update it seemed inefficient

Other reasons are that push IDs will work while your app is offline, and that they scale much better across multiple users.

If you want to learn more about why you should use push(), read Best Practices: Arrays in Firebase.

answered Nov 11, 2019 at 1:51

Frank van Puffelen

603k85 gold badges895 silver badges869 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Inyoung Kim 김인영 · Accepted Answer · 2019-11-11 02:34:49Z

First, you can generate a unique key by using below code

const newID = firebase.database.ref().push().key

According to this answer, whenever you use push on a Database Reference, a new data node is generated with a unique key that includes the server timestamp. These keys look like -KiGh_31GA20KabpZBfa.

Because of the timestamp, you can be sure that the given key will be unique, without having to check the other keys inside your database.

Second, you can add an item to a list in database using transaction.

const newID = firebase.database.ref().push().key
//user is user object from firebase auth module
const newDatabaseRouteRef = firebase.database.ref().child('users/' + user.uid + '/ids')
// if null, create a new list with id, if not add newID to list
newDatabaseRouteRef.transaction((currentValue) => {
  return currentValue ? currentValue.push(newID) : [newID]
})

Inyoung Kim 김인영 · Accepted Answer · 2019-11-11 03:01:43Z

0

I'm creating another answer just to show different kinds of solutions. This solution, using push is better than using transaction.

// Get a new ref by push
const newDatabaseRouteRef = firebase.database.ref().child('users/' + user.uid + '/routes').push()
// Set the value to the key of received ref
newDatabaseRouteRef.set(newDatabaseRouteRef.key)

This is better because

Transaction needs multiple round trips where push() doesn't, thus reducing time.
Is more safe according to this article.

This is achieves the same result because even using list, when the list is saved in firebase database, it is stored as object. ex) ["a","b","c"] => {0:"a",1:"b",2:"c"}

answered Nov 11, 2019 at 3:01

Inyoung Kim 김인영

1,6171 gold badge25 silver badges47 bronze badges

Collectives™ on Stack Overflow

React+Firebase: How to add item to list data into firebase realtime database

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related