Canner CMS 整合 Firestore 資料結構

Canner CMS 的 canner.data.js 在整合 Firestore 時他的資料格式會轉換成較不一樣的儲存方式。

Array 處理

如果第一層的 key 的 value 是 Array 會直接把 key 存成 collection

Object 處理

如果第一層的 key 的 value 是 Object ，所有 key 都會存在 object collection 下面。

範例

以下用一個簡單範例來了解我們如何去處理 CMS 和 Firestore 資料整合問題。完整的程式碼在 Canner/firestore-data-structure-demo

假設今天我們要上傳資料，此資料集有 object 和 array，資料及如下

canner.data.js 中：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
  module.exports = {
    "object1": {
      "name": "Hello object 1",
      "description": "I am object 1"
    },
    "object2": {
      "name": "Hello object 2",
      "description": "I am object 2"
    },
    "array1": [
      {
        "name": "Array item1"
      }
    ],
    "array2": [
      {
        "name": "Array item2"
      }
    ]
  };

我們在搭建此 Firestore 的 CMS 會這樣寫：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
// use Firebase's Firestore
CannerTypes.endpoint('firebase.firestore.admin', {
  ...[your firebase config]
});

const name = CannerTypes
              .string()
              .title('Name')
              .description('Please enter a name');
const description = CannerTypes
              .string()
              .title('Description')
              .description('Enter description of yourself')
              .ui('editor');

const object1 = CannerTypes.object({
  name,
  description
}).description('object1 page');

const object2 = CannerTypes.object({
  name,
  description
}).description('object2 page');

const array1 = CannerTypes.array({
  name
}).description('array1 page').ui('tab');

const array2 = CannerTypes.array({
  name
}).description('array2 page').ui('tab');

module.exports = {object1, object2, array1, array2};

我們把此資料及經過 @canner/cli 上傳資料（canner data:import) 然後把 schema 上傳（canner schema:deploy)

來看看 Firestore 上儲存的格式

• 如果第一層的 value 是 Array 會變成

• 如果第一層的 value 是 Object 會變成