Angular Fire Firestore Query

AngularFirestore Query ข้อมูลจาก firestore แบบจับมือทำ 🤝

Published in

incubate.co.th

3 min readAug 5, 2020

ทำ web ด้วย Angular เชื่อมต่อกับ Firebase Firestore โดยใช้ AngularFire เพื่อที่จะ query ข้อมูลให้ออกมาสวยงาม สะดวกสะบายกับผู้ที่มาใช้งาน web ของเรา แต่ไม่รู้จะใช้ท่าไหน ในบทความนี้ผมขอเสนอวิธีการ query ข้อมูลจาก Firebase Firestore แบบง่ายๆไม่พิมพ์เยอะเจ็บนิ้ว

การ Query ข้อมูลจาก Firestore มี Options ที่ใช้กันบ่อยๆดังนี้

where คือการดึงข้อมูลมาตามเงื่อนไขที่กำหนดไว้
orderBy คือการเรียงตามฟิลด์ที่ระบุจากมากไปน้อยหรือจากน้อยไปมาก
limit คือการ Set จำนวนสูงสุดที่จะ Return
startAt คือการเริ่มต้น Document ตัวที่ Set (รวมตัวที่ set ด้วย)
startAfter คือการเริ่มต้นเอกสารหลังจาก Document ตัวที่ Set (ไม่รวมตัวที่ set)
endAt คือการสิ้นสุด Document ตัวที่ Set (รวมตัวที่ set ด้วย)
endBefore คือการสิ้นสุด Document ตัวที่ Set (ไม่รวมตัวที่ set)

มาเริ่มกันเลย 🏃‍♂️

ข้อมูลที่ใช้ในตัวอย่างอยู่ใน collection items มี document ทั้งหมด 5 doc แต่ละ doc มี field มี key ที่เป็น number และ value ที่เป็นตัวเลข 1–5

where

ตัวอย่างการใช้งาน
 afs.collection('items', (ref) => ref.where('number', '<', 2));ผลลัพธ์ 1 
 'items' คือ ชื่อของ collection ที่ต้องการข้อมูล
 .where('ชื่อ field','Relational Operators','ค่าที่ต้องการเปลียบเทียบ')Relational Operators
 > มากกว่า
 < น้อยกว่า
 >= มากกว่าเท่ากับ
 <= น้อยกว่าเท่ากับ
 == เท่ากับ
 != ไม่เท่ากับ
 in ใช้กับข้อมูลที่เป็น Array เพื่อเช็คว่ามีข้อมูลนี้อยู่ใน Array หรือไม่
 array-contains
 array-contains-any

orderBy

ตัวอย่างการใช้งาน
 afs.collection('items', ref => ref.orderBy('title', 'asc' );ผลลัพธ์
 1 2 3 4 5'items' คือ ชื่อของ collection ที่ต้องการข้อมูล
.orderBy('name collection', 'option')

option
 asc(Default) เรียงจาก น้อยไปมาก
 desc เรียงจาก มากไปน้อย

limit

ตัวอย่างการใช้งาน
 afs.collection('items', ref => ref.orderBy( 'number', 'desc' )    
 .limit(3)); ผลลัพธ์
5 4 3'items' คือ ชื่อของ collection ที่ต้องการข้อมูล
.limit(จำนวนข้อมูลที่ต้องการ)จำนวนข้อมูลที่กำหนดใน
 สำหรับการดึงข้อมูล next page และแนะนำ limit ไม่ควรเกิน 20 documents

startAt

ตัวอย่างการใช้งาน
afs.collection('items', ref => ref.orderBy('number','asc') .startAt(4)); 
ผลลัพธ์
4 5

startAfter

ตัวอย่างการใช้งาน
afs.collection('items',ref => ref.orderBy('number','asc') .startAfter(4)); 
ผลลัพธ์
5

endAt

ตัวอย่างการใช้งาน
afs.collection('items', ref => ref.orderBy('number', 'asc' ).endAt(3)); 
ผลลัพธ์
1 2 3

endBefore

ตัวอย่างการใช้งาน
afs.collection('items', ref => ref.orderBy('number', 'asc') .endBefore(3));
ผลลัพธ์
1 2

มาลองใช้งานจริงกันเลย

ติดตั้ง angular fire
ng add @angular/fire
สร้าง component testQuery
ng g c testQuery
สร้าง Interface item
ng g iterface item
เพิ่มตัวแปล number ที่มี type เป็น Number ใน item.ts

export interface Item {
  number: Number;
}

5. Import AngularFirestore, AngularFirestoreCollection และ Observable ใน file test-query.component.ts

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

6. สร้างตัวแปล itemCol ที่มีชนิดเป็น AngularfirestoreCollection และ item$ ที่มีชนิดเป็น Observable ใน file test-query.component.ts

itemCol: AngularfirestoreCollection<Item>
items$: Observable<Item[]>

7. เพิ่มตัวแปล afs ที่มีชนิดเป็น AngularFirestore ใน constructor

constructor(
  private afs: AngularFirestore
) { }

8. จัดการกับ function ngOnInit

โดยที่จะเอาข้อมูลที่มีค่ามากกว่า3 เรียงจากน้อยไปมากและเริ่มที่ 2 query มาห้ามเกิน 20 ตัว

ngOnInit(): void {
  this.itemCol = this.afs.collection('items', ref => ref.where('number','>',3).orderBy('number', 'asc').startAt(2).limit(20));
  this.items$ = this.itemCol.valueChanges();
}

9. แก้ไขหน้า test-query.component.html

<ul *ngFor="let item of items$ | async">
  <li>
    <strong>
      {{ item.number }}
    </strong>
  </li>
</ul>

เพียงเท่านี้ก็ได้ข้อมูลตามที่ต้องการ 👍

เก็บตก

เลือกใช้ให้เหมาะกับสิ่งที่เราต้องและการ Query ที่ดีควรจะกำหนด limit ในการ Query เพื่อความรวดเร็ว เวลาใช้งานจริง ส่วนใหญ่จะใช้คำสั่ง where + orderBy + limit + startAfter สำหรับ ดึงข้อมูล next page และแนะนำ limit ไม่ให้เกิน 20 documents