auto reload once Firebase batch commit executed

September 2, 2022

I am trying to auto reload page when Firebase batch method is being fired, otherwise I get this error

‘FirebaseError: A write batch can no longer be used after commit() has been called.’

The problem is that when I add ‘window.location.reload()’ the reload triggers before data is sent to Firebase and all the data are lost.
is there any other ways?
This is my current code VueJS 3 with Pinia.

addOrder(clientId, priorityOrder, orderList) {
  const storeAuth = useStoreAuth();
  const docRef = doc(collection(db, 'users', storeAuth.user.id, 'clients', clientId, 'orders'))

  batch.set(docRef, {
    priority: priorityOrder
  })

  const newId = docRef.id
  orderList.forEach((order) => {
    batch.set(doc(collection(db, 'users', storeAuth.user.id, 'clients', clientId, 'orders', newId, 'order')), order)
  })
  // batch.set(doc(collection(db, 'users', storeAuth.user.id, 'clients', 'punTa54ogJ6wLgRmAp4Y', 'ordera', newId, 'order')), {name: 'something'})

  return batch.commit()
},

>Solution :

It seems you are calling the addOrder() function multiple times and you have declared batch out of the function. So the 2nd time you call addOrder() you are trying to use a batch that has been committed already. Try declaring the batch in the function so a new one is created every time:

addOrder(clientId, priorityOrder, orderList) {
  const storeAuth = useStoreAuth();

  // create batch here so a new one is created for each function invocation 
  const batch = writeBatch(); 

  // rest of the logic

  return batch.commit()
},