Fireclient

useGetCollection（コレクションの取得）

Fireclient の中で最もベーシックな Hooks であり、Firestore 上のコレクションを取得するのに用います。

React Hooks と同様に、各変数は任意の命名を与えることができます。

const [collectionData, loading, error, loadFn] = useGetCollection(path, options);

Hooks の戻り値

  • collectionData: CollectionData

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

  • loading: boolean

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

  • error: Error

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

  • reloadFn: () => void

    データを再取得するための関数です。

Hooks の引数

  • path: string

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

  • optional options: object

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

options の内容

  • optional callback: (DocData) => void

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

  • optional acceptOutdated: boolean

    Fireclient ではリッスンしているコレクションを取得する際にキャッシュを利用しますが、その機能を過去に取得したコレクションの再取得にも適応します。

  • optional where: Where | Where[]

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

  • optional limit: Limit

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

  • optional order: Order | Order[]

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

  • optional cursor: Cursor

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

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

Example

const [citiesData, loading, error, reloadFn] = useGetCollection("/cities");

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

[
  {
    data: {
      country: "Mexico",
      name: "Mexico City",
      population: 19028000,
    },
    id: "MexicoCity",
  },
  {
    data: {
      country: "India",
      name: "Mumbai",
      population: 18978000,
    },
    id: "Mumbai",
  },
  {
    data: {
      country: "United States",
      name: "New York",
      population: 19354922,
      users: ["Baker", "Davis"],
    },
    id: "NewYork",
  },
  {
    data: {
      country: "Brazil",
      name: "São Paulo",
      population: 18845000,
    },
    id: "SaoPaulo",
  },
  {
    data: {
      country: "Japan",
      name: "Tokyo",
      population: 35676000,
    },
    id: "Tokyo",
  },
];

次を実行することでデータの再取得が行えます。

reloadFn();

条件付き取得

useGetCollectionにはwhereやorderなどの条件を付けることができます。

const options = {
  where: {
    field: "population",
    operator: ">",
    value: 19000000,
  },
};
const [cities, loading, error] = useGetCollection("/cities", options);

取得が完了すると、citiesには次のようなオブジェクトが入っています。

[
  {
    data: {
      country: "Mexico",
      name: "Mexico City",
      population: 19028000,
    },
    id: "MexicoCity",
  },
  {
    data: {
      country: "United States",
      name: "New York",
      population: 19354922,
    },
    id: "NewYork",
  },
  {
    data: {
      country: "Japan",
      name: "Tokyo",
      population: 35676000,
    },
    id: "Tokyo",
  },
];

複合の条件付き取得

条件は複数付けることもできます。

const options = {
  where: [
    {
      field: "population",
      operator: ">",
      value: 19000000,
    },
    {
      field: "population",
      operator: "<",
      value: 20000000,
    },
  ],
};
const [cities, loading, error] = useGetCollection("/cities", options);

取得が完了すると、citiesには次のようなオブジェクトが入っています。

[
  {
    data: {
      country: "Mexico",
      name: "Mexico City",
      population: 19028000,
    },
    id: "MexicoCity",
  },
  {
    data: {
      country: "United States",
      name: "New York",
      population: 19354922,
    },
    id: "NewYork",
  },
];

その他のオプションについてはこちらにて紹介しています。

← useGetDoc（ドキュメントの取得）useSetDoc（ドキュメントの書き込み） →