Firestore : 모든 데이터 수를 얻는 방법

페이지 네이션에 필요한, Firestore 컬렉션의 모든 데이터 건수 취득. 데이터 크기에 따라 획득 방법을 변경하는 것이 좋습니다 (성능에 영향).

아래에 방법.

수백건 정도의 경우

데이터를 로컬로 로드하고 카운트합니다.

import { AngularFirestore, AngularFirestoreCollection } from '@angular/fire/firestore';
import { Observable } from 'rxjs';

  constructor(
    private db: AngularFirestore,
  ) {}

  ngOnInit() {
  }

  length: number; // 全件数を格納する変数

  // commentsコレクションの全データ件数を獲得しlengthに保存
  getDataSize() {
    this.db.collection('comments').valueChanges().subscribe( values => {
      console.log('■データ数は、' + values.length);
      this.length = values.length
    })
  }

그리고 이 함수를 ngOnInit() {..}에 돌진해 두면 된다.

  ngOnInit() {
    this.getDataSize();
  }

수천 건의 경우

Cloud Functions를 이용해 그곳에서 카운트시킨다.

Functions의 이용 방법은 여기 으로.

functions/src/index.ts 편집

코드는 다음과 같습니다.

import * as functions from 'firebase-functions';
import * as admin from 'firebase-admin';
import * as rp from 'request-promise';
// firebase の初期化
admin.initializeApp(functions.config().firebase) 

const fireStore = admin.firestore()

// commentsコレクションのデータ数カウント
exports.countComments = functions.https.onRequest((req, res) => {
  let commentsfaqsRef = fireStore.collection('commentsfaqs');
  commentsfaqsRef.get().then( snap => {
    res.header('Access-Control-Allow-Origin', "*");
    res.header('Access-Control-Allow-Headers', "Origin, X-Requested-With, Content-Type, Accept");
    res.status(200).send({length: snap.size});
  })
  .catch(error => {
      res.send( error() );
  });
});

res.header('Access-Control-Allow-Origin', "*");
res.header('Access-Control-Allow-Headers', "Origin, X-Requested-With, Content-Type, Accept");
두 줄을 붙이지 않으면 CORS 관련 오류가 발생합니다.
이런 느낌의 에러 메시지↓

Access to fetch at 'https://<your-project>.cloudfunctions.net/<your-function>' 
from origin 'http://localhost:3000' has been blocked by CORS policy: 
Response to preflight request doesn't pass access control check: 
No 'Access-Control-Allow-Origin' header is present on the requested resource. 
If an opaque response serves your needs, 
set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

firebase deploy

그러면 해당 기능만 배포한다.

$ firebase deploy --only functions:countComments

아래와 같이 countComments 함수만 배포되고 완료 전에 Function URL이 표시되므로 삼가해 둔다.

…略…
i  functions: uploading functions in project: countComments(us-central1)
i  functions: creating Node.js 8 function countComments(us-central1)...
+  functions[countComments(us-central1)]: Successful create operation.

Function URL (countComments): https://us-central1-projectName.cloudfunctions.net/countComments

 Deploy complete!

낙서에 URL에 액세스하면,

카운트 된 데이터 수가 표시됩니다.

클라이언트 측에서 REST 클라이언트 구현

그리고는 countComments가 토출한 데이터 건수를 클라이언트측(Angular)으로 페치 하는 것만. HttpClientModule을 사용합니다.

app.module.ts로 HttpClientModule 가져 오기

import { HttpClientModule } from '@angular/common/http';

  imports: [
    HttpClientModule,
  ]

데이터 수를 사용하려는 구성 요소에 함수 만들기

import { HttpClient } from '@angular/common/http';

  constructor(
    private httpClient: HttpClient,
  ) {}

  ngOnInit() {
    this.getDataSize();
  }

  countCommentsURL : string = 'https://us-central1-projectName.cloudfunctions.net/countComments' // function 'countComments'のURL
  length: number; // 全件数を格納する変数

  // commentsコレクションの全データ件数を獲得しlengthに保存
  async getDataSize() {
     this.httpClient.get(this.countCommentsURL)
      .toPromise()
      .then((res) => {
        const response: any = res;
        this.length = response.length
      })
      .catch((error) =>
        console.log(error)
      );
  }

1만건 이상의 경우

To Be Continue…

참고:
[Angular] HTTP 클라이언트(REST 클라이언트) 구현
Firebase의 Cloud Functions에서 CORS가 ~라든지 Access-Control-Allow-Origin이 ~라고 말하면
Google Cloud Functions에서 cors 사용