Firestore：データ数の制限

Firestore コレクションに多くのドキュメントが含まれている場合、ユーザーが興味を持っているものに基づいて、アプリケーションがユーザーに見せるものを制限したいと思うかもしれません。絞り込んで必要なデータだけを取得することで、よりユーザーフレンドリーになるだけでなく、より効率的になり、コストも抑えられます（クラウドサービスは必ずしも無料とは限りません）。

Collection オブジェクトに読み込まれるデータの量を制限するには、次の3つの簡単な方法があります:

fields プロパティを使用して、ロードするフィールドを指定します。このオプションは、コレクションに多くのフィールドが含まれていて、少数のフィールドのみに関心がある場合に役立ちます。フィールドのサブセットのみを取得することは、SQLデータベース、ODataソース、およびgraphQLで使用可能な機能です。
pageSize プロパティを適切なレコード数（たとえば10または20）に設定し、pageOnServerプロパティがtrueに設定されていることを確認します。このように、Collection は一度に数レコードのみをロードし、pageIndex プロパティを使用して、一度に1ページずつデータをナビゲートできます。
where メソッドを使用して、サーバー側フィルターを適用します。たとえば、1つまたは2つの国の顧客のみを表示したい場合があります。

上記の3つのオプションは、組み合わせて同時に使用できます。

たとえば、以下のコードは顧客と一緒にコレクションをロードします。選択したいくつかのフィールドのみが取得され、一度に6人の顧客のみがロードされます。 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  
});

Firestore：データ数の制限