圖片來源:Introducing Cloud Firestore
本篇要解決的問題
一般要用到資料庫的時候,如果沒有後端支援,會選擇用 Firebase,原因很簡單,因為在一定額度下可以免費使用 XD~
以前剛用 Firebase 的時候,還是 Realtime Datebase 的時代,那時 Cloud Firestore 還在 Beta。
Cloud Firestore 正式版出來後,似乎是 Google 的主推項目,文件說明蠻齊全的,看到一些教程也都是用 Firestore。
以後如果想繼續用 Firebase 開發下去,會很常接觸到 Cloud Firestore,因此就花了一點時間,看了一下文件及教學,把會常用到的功能給筆記並整理起來,方便以後要用的時候可以直接看著取用,不用再重頭翻一次文件。
本篇主要的參考資源是官方文件(各段中會列上連結)以及 The Net Ninja 的 Firebase Firestore Tutorial。
本篇是 Version 8 的,想看 Version 9 的朋友請點這:
Firebase Cloud Firestore V9 常用功能筆記
安裝
HTML 上引用 JS 檔即可,initial 需要的 3 個值在 Firebase 的專案設定上可以看到:
讀取資料 get
文件:https://firebase.google.com/docs/firestore/query-data/get-data
取 collect 中的所有資料
取 document 中的所有資料
選擇資料來源
文件:https://firebase.google.com/docs/reference/js/firebase.firestore.GetOptions
取資料時,可選擇資料來源,來源有:server, cache, default,未填為 default。
查詢 where
文件:https://firebase.google.com/docs/firestore/query-data/queries
where 只取我們要的資料,不用整批丟來。
where(key, 運算符, value)
運算符:<
、 <=
、 ==
、 >
、 >=
、 array-contains
、 in
、 array-contains-any
也可以多個條件查詢,但要在同一個 key 內:
排序 orderBy
文件:https://firebase.google.com/docs/firestore/query-data/order-limit-data
可以讓來的資料以哪一個欄位為主來做排序:
也可以改用倒序:
查詢 + 排序
如果要搭配查詢做排序,查詢跟排序抓的 key 值要是相同的:
寫入資料 add, set, update
文件:https://firebase.google.com/docs/firestore/manage-data/add-data
add
生成亂數 id 給 document 用。
用了 add 就不能指定 document 的值。如:
db.collection('collection').add({ ... })
如果寫了 document 就會報錯,如:
db.collection('collection').doc('doc').add({ ... })
使用 add()
的範例:
set
跟 add 相反,可以指定 document 的 id。
用了 set 就一定要有 document 的值。如:
db.collection('collection').doc('doc').set({ ... })
如果沒寫 document 就會報錯,如:
db.collection('collection').set({ ... })
使用 set()
的範例:
merge
用 set 時可以設定 merge。
merge 是 Boolean。如果資料已經存在,可以選擇要不要覆蓋。預設值為 false。
merge 的影響在於傳送的資料量不一樣時。
比方資料庫上有以下資料:
{ name: 'August', website: 'Lets Write' }
我們準備傳送以下資料:
{ name: 'August S' }
merge 為 true 時,Firebase 只會更新有更新值的部份,所以資料庫的資料會變以下:
{ name: 'August S', website: 'Lets Write' }
merge 為 false 時,Firebase 會拿新資料整個替換掉原有資料,所以資料庫會變以下:
{ name: 'August S' }
使用 set()
加上 merge
的範例:
update
部份更新,主要是可以更新物件中的某個資料。比方資料庫上有以下資料:
{ name: 'August', website: { first: 'Lets Write', second: 'i-see' } }
想要更新 website.second
這個值,就可以寫:
但……其實用 set()
也是做得到,就是程式碼會長一點,而且要記得 merge
設 true
,如:
如果只是想要更新部份資料,建議用 update()
,用 set()
又忘了寫 merge: true
就容易把原資料給整個覆蓋了。
時間戳
firebase.firestore.FieldValue.serverTimestamp()
時間戳使用範例:
刪資料 delete
文件:https://firebase.google.com/docs/firestore/manage-data/delete-data
刪 document
刪 document 中的某個值
刪 collection
Firebase 文件上說:
如果需要刪除整個集合,請僅從受信任的服務器環境中刪除。儘管可以從移動 / Web 客戶端刪除集合,但是這樣做會對安全性和性能造成負面影響。
刪除集合
不建議在 client 端中刪除整個 collection。
如果真想從 client 端刪掉 collection,就是跑回圈刪掉 collection 中的所有 document:
監聽變動 onSnapshot
文件:https://firebase.google.com/docs/firestore/query-data/listen
Cloud Firestore 可以監聽資料庫的即時變動,這樣就可以拿來當 Realtime Database 來用。
onSnapshot()
使用範例:
變動類型、只抓有變動的資料
可以先判斷變動的類型,是「新增、修改、刪除」中的哪一個,再來決定要不要讓資料庫丟資料來。
變動類型:added
, modified
, removed
。
[…] Version 8 版的,結果人生就是第 8 版都還沒用熟,就有了第 9 版,就像 Tailwind CSS […]