RTK 查詢有時會從 Cloud Firestore 中提取舊數據

Question

我目前正在開發一個使用 Cloud Firestore 作為后端的 SPA（React，RTK 查詢和自動重新獲取）。 這是我第一次從事更大的項目並且還使用 Firebase，所以我真的需要一些意見或建議。

我遇到的問題是，當您在網站上登錄您的帳戶並對您的個人資料進行任何類型的更新時，它仍然會顯示舊數據（一旦我刷新網站，它就會消失）。

我一直在努力尋找原因，在 Redux devtools 中，序列如下所示：

1. 用戶做了改變
2. RTK 查詢觸發 updateUserCollection 突變並且正在等待
3. 完成后，它會觸發 getUserData 查詢（待處理）
4. getUserData 已完成，但舊數據仍在站點上

當我在 Redux devtools 中檢查 getUserData 時，我可以看到它已經獲取了舊數據。 奇怪的是這個問題並不一致。 在我刷新站點並嘗試進行另一次更新后，一切都會正常工作，但它會時不時地獲取舊數據。 這也發生在網站的其他地方（例如，當管理員嘗試添加新產品時）。

我一直在嘗試查看我的RKT查詢代碼的編寫方式是否存在問題，但我開始認為問題在於Firebase。有時看起來更新文檔有點慢，並且我想知道 RTK 查詢是否以某種方式設法在 Firebase 有時間更新文檔之前獲取數據？

我正在考慮嘗試為 getUserData 添加某種時間延遲，但老實說，我不喜歡試圖強制應用程序變慢以適應 Firebase 的想法。也可能是它只是無法獲取數據所以它使用舊的，但我不知道如何驗證。

關於如何解決這個問題的任何建議或想法？

---

（從我的切片中添加示例代碼以防我做錯了）

getUserData: builder.query({
  async queryFn(uid) {
    try {
      const userQuery = query(
        collection(db, "users"),
        where("userId", "==", uid)
      );
      const querySnapshot = await getDocs(userQuery);
      const data = querySnapshot?.docs[0].data();

      return { data: data };
    } catch (err) {
      return { error: err };
    }
  },
  providesTags: ["Users", "UserData"],
}),
updateUserCollection: builder.mutation({
  async queryFn(data) {
    try {
      const userQuery = query(
        collection(db, "users"),
        where("userId", "==", data[0].userId)
      );
      const querySnapshot = await getDocs(userQuery);

      querySnapshot.forEach(async (doc) => {
        await updateDoc(doc.ref, {
          userCollection: [...data],
        });
      });

      return { data: "edited" };
    } catch (err) {
      return { error: err };
    }
  },
  invalidatesTags: ["Users", "UserData"],
}),

Answer 1

在這里寫下答案以防其他人遇到同樣的問題。

似乎在 Get 查詢和 Update 突變中重寫了我的一些代碼就成功了。 （在更改代碼之前，我還將 RTK 查詢從 1.8.5 更新到 1.9.0，但沒有注意到差異）。

下面是更改后的代碼現在的樣子：

getUserData: builder.query({
  async queryFn(uid) {
    try {
      const docRef = doc(db, "users", uid);
      const docSnap = await getDoc(docRef);
      const data = docSnap.data();

      return { data: data };
    } catch (err) {
      return { error: err };
    }
  },
  providesTags: ["UserData"],
}),
updateUserCollection: builder.mutation({
  async queryFn(data) {
    try {
      const docRef = doc(db, "users", data[0].userId);

      await updateDoc(docRef, {
        userCollection: [...data],
      });

      return { data: "updated" };
    } catch (err) {
      return { error: err };
    }
  },
  invalidatesTags: ["UserData"],
}),