Updating Data in Firebase using React

Question

I am updating an object in firebase using React js. I'm using this boilerplate as reference.

  updateBookList: (id, data) => {
    return firebaseDb.ref('NewBooks').child(id).update(data).then(() => {
      return {};
    }).catch(error => {
      return {
        errorCode: error.code,
        errorMessage: error.message
      }
    });
  },

The following updates the Books fine.

What I want to do is return the result instead of returning a blank {}. How can I return the result of what I updated?

This is how I fetch books:

  fetchBooks: () => {
    return new Promise((resolve, reject) => {
      const bookSub = firebaseDb.ref('NewBooks').on("value", books => {
        resolve(books.val());
      }, error => {
        reject(error);
      })
    })
  },

cartant · Accepted Answer · 2017-01-26 04:42:19Z

5

If you want to return the value, you need to retrieve it. You can do that using once and the value event, which returns a promise that resolves to a Firebase snapshot:

updateBookList: (id, data) => {
  let ref = firebaseDb.ref('NewBooks');
  return ref
    .child(id)
    .update(data)
    .then(() => ref.once('value'))
    .then(snapshot => snapshot.val())
    .catch(error => ({
      errorCode: error.code,
      errorMessage: error.message
    }));
}

Also, you could simplify your fetchBooks by using once there, too:

fetchBooks: () => {
  return firebaseDb.ref('NewBooks')
    .once("value")
    .then(snapshot => snapshot.val());
}

once returns a promise, so you don't have to create your own and you won't have a dangling event listener. The call to on in your implementation of fetchBooks will see a listener added with each call and multiple calls to resolve will be attempted if the database changes.

edited Jan 26, 2017 at 4:42

answered Jan 26, 2017 at 4:24

cartant

58.6k17 gold badges169 silver badges201 bronze badges

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

Collectives™ on Stack Overflow

Updating Data in Firebase using React

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related