useSubscribeCollection（コレクションの監視）

この Hooks を使用することで、Firestore 上のコレクションをリッスンすることができます。

Collection をリッスンすることで、Firestore 側でコレクションの内容が書き換えられた場合データが自動で再取得され、 データを常に最新の状態に保つことができます。

const [collectionData, loading, error, unsubscribeFn] = useSubscribeCollection(path, options);

Hooks の戻り値

• collectionData: CollectionData

  Firestore から取得したコレクションの内容であり、
  初期値には [] が代入されています。

• loading: boolean

  データを取得しているかを表します。

• error: Error

  データ取得の際にエラーが発生した場合エラー内容が入力されます。
  初期値にはnullが代入されています。

• unsubscribeFn: () => void

  コレクションのリッスンを中断するための関数です。

Hooks の引数

• path: string

  取得対象のコレクションの Firestore 上のパスです。

• optional options: object

  データを取得する際のオプションです。

options の内容

• optional callback: (DocData) => void

  データを取得する際に実行される関数を指定することができます。

• optional where: Where

  条件を付けてコレクションを取得することができます。

• optional limit: Limit

  取得するコレクションの数を制限することができます。

• optional order: Order

  コレクションをソートした状態で取得します。limit と組み合わせることで、上位 n 個を取得ということができます。

• optional cursor: Cursor

  取得するコレクションの開始地点・終了地点を指定します。

注意：Firestore 上のパスは /Collection/Doc/Collection/Doc/... となっていることに注意してください。 もしドキュメントを取得する場合は、代わりに useSubscribeDoc を使用してください。

Example

const [citiesData, loading, error, unsubscribeFn] = useSubscribeCollection("/cities");

citiesData には次のような内容が代入されます。

[
  {
    name: "New York",
    population: 19354922,
    country: "United States",
  },
  {
    name: "São Paulo",
    population: 18845000,
    country: "Brazil",
  },
  {
    name: "Tokyo",
    population: 35676000,
    country: "Japan",
  },
  {
    name: "Mumbai",
    population: 18978000,
    country: "India",
  },
  {
    name: "Mexico City",
    population: 19028000,
    country: "Mexico",
  },
];

次を実行することでコレクションのリッスンを中断できます。

unsubscribeFn();