Firestore 제한 데이터
Firestore 컬렉션에 많은 문서가 포함되어 있는 경우, 사용자가 관심 있는 내용을 기반으로 애플리케이션에서 보여주는 데이터를 제한하고 싶을 수 있습니다. 필요한 데이터만 선별하여 가져오는 것은 사용자 친화적일 뿐만 아니라 더 효율적이고 비용도 덜 발생시킵니다(클라우드 서비스는 항상 무료가 아닙니다).
Collection 객체에 로드되는 데이터 양을 제한하는 간단한 방법이 세 가지 있습니다:
fields 속성 사용: 로드할 필드를 지정합니다. 이 옵션은 컬렉션에 많은 필드가 포함되어 있고, 몇 개의 필드만 관심이 있을 때 유용할 수 있습니다. 필드의 하위 집합만 가져오는 것은 SQL 데이터베이스, OData 소스 및 GraphQL에서 제공되는 기능입니다.
pageSize 속성 설정: 기록 수를 합리적인 숫자(예: 10 또는 20)로 설정하고 pageOnServer 속성을 true로 설정합니다. 이렇게 하면 Collection은 한 번에 몇 개의 기록만 로드하며, pageIndex 속성을 사용하여 데이터를 한 페이지씩 탐색할 수 있습니다.
where 메서드 사용: 서버 측 필터를 적용합니다. 예를 들어, 특정 한두 개 국가의 고객만 보고 싶을 수 있습니다.
위의 세 가지 옵션은 결합하여 동시에 사용할 수 있습니다.
예를 들어, 아래 코드는 고객이 포함된 컬렉션을 로드합니다. 선택된 필드 몇 개만 검색되며, 한 번에 여섯 명의 고객만 로드됩니다. Collection 객체를 사용하려면 Firestore 클래스와 함께 Collection 클래스를 가져와야 합니다:
import { Firestore, Collection } from '@mescius/wijmo.cloud';// load the Customers collection
let customers = new Collection(fsNWind, 'Customers', {
sortDescriptions: ['CustomerID'],
fields: ['CustomerID', 'CompanyName', 'ContactName', 'City', 'Country'],
pageOnServer: true,
pageSize: 6 // load only six customers per page
});사용자가 국가별로 데이터를 필터링할 수 있도록 설정합니다. 사용자가 관심 있는 국가를 선택할 수 있도록 ComboBox 를 사용해줍니다:
let cmbCountries = new ComboBox('#cmbCountries', {
placeholder: '(Select a Country)',
itemsSource: 'Brazil,France,Germany,UK,USA'.split(','),
isRequired: false,
text: '',
textChanged: (s, e) => {
customers.where('Country', '==', s.text);
}
});사용자가 국가를 선택하면, ComboBox는 textChanged 이벤트를 발생시키고, 코드는 queryFilter 속성을 업데이트하여 선택한 국가의 모든 고객을 보여줍니다.
데이터를 표시하기 위해 CollectionViewPager와 FlexGrid를 사용할 것입니다:
let fsCustomerPager = new CollectionViewNavigator('#fsCustomerPager', {
cv: customers,
byPage: true,
headerFormat: 'Page {current:n0}'
});
let fsCustomerGrid = new FlexGrid('#fsCustomerGrid', {
showMarquee: true,
formatItem: addRowHeaderIndex,
autoGenerateColumns: false,
columns: customers.fields.map(fld => {
return { binding: fld }
}),
itemsSource: customers
});