Firebaseデータベースのコレクションのリストの取得

実装例

では、バックエンドを活用した実装例を紹介します

バックエンドの実装例

バックエンドでは、REST API の定義は Excpress などのバックエンドのフレームワークを利用すると簡単です。 「/api/collections」という API を定義して「listCollections()」を使ってバックエンドで、指定したパスのサブコレクションのリストを取得して、応答するような処理にしています。

Firebase のホスティング機能を利用して、Functions を実現します。

import * as express from "express";
import * as firebase from "firebase-admin";
import * as functions from "firebase-functions";
import * as CONSTANT from "./constant";
const bodyParser = require("body-parser");
class BackendApp {
    public app: express.Express = express();
    private firebase: firebase.app.App = firebase.initializeApp({
        credential: firebase.credential.cert(
        path.join(__dirname, CONSTANT.SERVICE_ACCOUNT)
        ),
        databaseURL: CONSTANTS.FB_DB_URL,
    })
    constructor() {
        this.app.use(bodyParser.urlencoded({extended: false}));
        this.app.use(bodyParser.json());
        this.init();
    }
    init():void {
        this.app.get(
            "/api/collections",
            (req:express.Request, res:express:Response) => {
                const collection: string = req.body.collection;
                const docId: string = req.body.doc_id;
                this.firebase
                    .firestore()
                    .collection(collection)
                    .doc(docId)
                    .listCollections()
                    .then((collections:FirebaseFirestore.CollectionReference<FirebaseFirestore.DocumentData>) => {
                        const list: Array<string> = []
                        for (let i = 0 ; i < collections.length ; i++) {
                            list.push(collections[i].id)
                        }
                        res.end(JSON.stringify({success: true, collections: list }))
                }).catch((error: any) => {
                    res.end(JSON.stringify({success: false, collection: [], error: error})
                })
            }
        )
    }
}
const server = new BackendApp();
exports.app = functions.https.onRequest(server.app)

フロントエンドの実装例

フロントエンドでは、「/api/collections」の API を呼び出すとコレクションのリストを取得できます。 バックエンドからコレクションのリストが取得できない場合は、空の Array を返すようになっています。

function getEventContacts(payload: any): Promise<Array<string>> {
  return new Promise((resolve) => {
    const event_id = payload.id;
    console.log(event_id);
    const url = CONSTANT.BACKEND_URL + "/api/collections";
    axios
      .post(url, {
        uid: payload.uid as string,
        gid: payload.gid as string,
      })
      .then((res: AxiosResponse) => {
        if (res.data.success) {
          resolve(res.data.collections);
        } else {
          resolve([]);
        }
      })
      .catch((error: any) => {
        resolve([]);
      });
  });
}