angularfire2 transactions and batch writes in firestore

Question

How can I do batch writes/run transactions with firestore in an angular2 app?

https://firebase.google.com/docs/firestore/manage-data/transactions

If it's possible, how can I convert the JS code to TS code in an angular2 app.

Solution 1

If you are using AngularFirestore, firstly you will need to make sure that your constructor is setup as follows:

constructor(private db: AngularFirestore)

Now you can use db.firestore to get a firebase.firestore instance.

You can just copy the code from the link and replace db with db.firestore. Or you can make it more fancy using arrow functions:

Updating data with transactions:

// Create a reference to the SF doc.
const sfDocRef = db.firestore.collection("cities").doc("SF");

// Uncomment to initialize the doc.
// sfDocRef.set({ population: 0 });

db.firestore.runTransaction(transaction => 
// This code may get re-run multiple times if there are conflicts.
  transaction.get(sfDocRef)
  .then(sfDoc => {
    const newPopulation = sfDoc.data().population + 1;
    transaction.update(sfDocRef, { population: sfDoc.data().population + 1 });
  })).then(() => console.log("Transaction successfully committed!"))
.catch(error => console.log("Transaction failed: ", error));

Passing information out of transactions:

// Create a reference to the SF doc.
const sfDocRef = db.firestore.collection("cities").doc("SF");

db.firestore.runTransaction(transaction =>
  transaction.get(sfDocRef).then(sfDoc => {
      const newPopulation = sfDoc.data().population + 1;
      if (newPopulation <= 1000000) {
          transaction.update(sfDocRef, { population: newPopulation });
          return newPopulation;
      } else {
          return Promise.reject("Sorry! Population is too big.");
      }
    }))
    .then(newPop => console.log("Population increased to ", newPop)
  ).catch(err => console.error(err));  // This will be an "population is too big" error.

Batch writes:

// Get a new write batch
var batch = db.firestore.batch();

// Set the value of 'NYC'
var nycRef = db.firestore.collection("cities").doc("NYC");
batch.set(nycRef, {name: "New York City"});

// Update the population of 'SF'
var sfRef = db.firestore.collection("cities").doc("SF");
batch.update(sfRef, {"population": 1000000});

// Delete the city 'LA'
var laRef = db.firestore.collection("cities").doc("LA");
batch.delete(laRef);

// Commit the batch
batch.commit().then(() => {
    // ...
});

Solution 2

It's simple:

constructor(private db: AngularFirestore){}
    
inserting(){
        //--create batch-- 
        let batch = this.db.firestore.batch();
        
        //--create a reference-- 
        const userRef = this.db.collection('users').doc('women').ref;
        batch.set(userRef , {
          name: "Maria"
        });
        
        //--create a reference-- 
        const userRef = this.db.collection('users').doc('men').ref;
        batch.set(userRef , {
          name: "Diego"
        });
        
        //--Others more 54 batch's--
        
        //--finally--
        return batch.commit();
    }

Comments

[Wayne Riesterer]

This worked perfectly for me. It also helped having .ref on the end too or batch.set complains that the parameter is an AngularFirestoreDocument and not a DocumentReference. Thanks!