(Vue.js)Firestoreのトランザクションで2つの処理をしたい

Question

例えばAさんとBさんの所持金が1000円でAさんが入力フォームから100と入力してBさんに送信するとBさんに100円を送金できるシステムを組みたいです。
Vuexのactions内でfirestoreの特定のフィールドを呼び出して書き換えることで実現しましたが、こちらのコードですと送金される側のコードが実行されなかった場合に、送金した側の所持金だけが変更されてしまいます。
そこでfirestoreのtransactionを使用したいのですが、送金する側される側二つの処理をtransactionで行いたい場合はどのような記述をしたら良いでしょうか？

// getTransfer 入力フォームの金額
// isMyUid 送金する側のfirebaseAuthのUID(各ユーザーのfirestoreのフィールドにUIDを格納している)
// state.isUid 送金される側のfirebaseのUID
// balance 所持金

updateUserBalance({ state, commit }, getTransfer) {
      const isMyUid = firebase.auth().currentUser.uid
      //送金される側
      db.collection('users').where('uid', '==', state.isUid).get()
        .then((docs) => {
          docs.forEach((doc) => {
            db.collection('users').doc(doc.id).update({
              balance: Number(state.isBalance) + Number(getTransfer)
            })
          })
          commit('updateDestinationBalance', getTransfer)
        })
        .catch(function(error) {
          console.log(error)
        })
      //送金する側
      db.collection('users').where('uid', '==', isMyUid).get()
        .then((docs) => {
          docs.forEach((doc) => {
            db.collection('users').doc(doc.id).update({
              balance: Number(state.balance) - Number(getTransfer)
            })
          })
          commit('updateMyBalance', getTransfer)
        })
        .catch(function(error) {
          console.log(error)
        })
    }

Answer 1

firestoreのtransaction機能を使うと下記のようになると思います。（試してはいません）

しかし、もし本当に送金のようなセンシティブな処理を行う場合はフロントではなくサーバサイドで処理を行うべきだと思います。フロントのJSは容易に改変できてしまうので。

サーバサイドでも似たようなコードで動作するはずです。

ちなみに、firebase.firestore.FieldValue.increment は現在の値に対してインクリメントできる機能です。
参考) https://qiita.com/1amageek/items/665df5a6d9921319e300

async updateUserBalance({ state, commit }, getTransfer) {
  const isMyUid = firebase.auth().currentUser.uid
  try {
    const receiverDocs = await db.collection('users').where('uid', '==', state.isUid).get()
    const receiverId = receiverDocs[0].id
    const senderDocs = await db.collection('users').where('uid', '==', isMyUid).get()
    const senderId = senderDocs[0].id
    await db.runTransaction(async t => {
      //送金される側
      await t.update(db.collection('users').doc(receiverId), {
        balance: firebase.firestore.FieldValue.increment(Number(getTransfer))
      })
      commit('updateDestinationBalance', getTransfer)
      //送金する側
      await t.update(db.collection('users').doc(senderId), {
        balance: firebase.firestore.FieldValue.increment(-Number(getTransfer))
      })
      commit('updateMyBalance', getTransfer)
    })
  } catch (error) {
    console.log(error)
  }
}

Comments

[yusuke.y]

FirebaseError: Type does not match the expected instance. Did you pass a reference from a different Firestore SDK?

上記のようなエラーが発生します。

[Arahabica]

うーん、もしかしたらfirestoreのバージョンが違うのかもしれません。最新のバージョンですか？

[yusuke.y]

最近新しくGoogleアカウントを作成して導入してみたので最新だと思うのですか……

[Arahabica]

ちなみに何行目でエラーになっていますか？

[Arahabica]

どうやら、クエリはfirestoreのトランザクションで使えないようでした。コード修正しました。
これでおそらく動くはずかと。

[yusuke.y]

今は出先に居ますので、帰宅したら試してみます！

[yusuke.y]

const receiverId = receiverDocs[0].id
ここを
const receiverId = receiverDocs.docs[0].id
でいけました！クエリのIDってここにあるんですねぇ…。

ちなみにrunTransactionの引数であるtransactionにはどういった役割があるんでしょうか？
transaction.update(db.collection('users')doc(~~~){ })といったようにtransactionオブジェクトのプロパティにupdate()があるイメージが湧かないです。

[Arahabica]

このトランザクションでアップデート処理を行いますよというのを示していますね。
トランザクションについて語ると長くなるので、詳しくはDBの本などを参照してください。