auto reload once Firebase batch commit executed-CodePudding

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()
},

CodePudding user response：

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()
},