Firebase Cloud Firestore V8 常用功能筆記

Firebase Cloud Firestore V8 常用功能筆記
Firebase Cloud Firestore V8 常用功能筆記

圖片來源: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-containsinarray-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() 也是做得到,就是程式碼會長一點,而且要記得 mergetrue,如:

如果只是想要更新部份資料,建議用 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

Summary
Firebase Cloud Firestore V8 常用功能筆記
Article Name
Firebase Cloud Firestore V8 常用功能筆記
Description
本篇大綱:本篇要解決的問題。安裝。讀取資料 get。查詢 where。排序 orderBy。寫入資料 add, set, update。刪資料 delete。監聽變動 onSnapshot。
Augustus
Let's Write
Let's Write
https://letswrite.tw/wp-content/uploads/2020/08/logo_512.jpg
訂閱
通知
guest

1 Comment
最舊
最新
Inline Feedbacks
看所有留言
trackback
Firebase Cloud Firestore V9 常用功能筆記 - Google - Let's Write
5 月 之前

[…] Version 8 版的,結果人生就是第 8 版都還沒用熟,就有了第 9 版,就像 Tailwind CSS […]