useSetDoc（ドキュメントの書き込み）

Firestore 上のドキュメントにデータを書き込むのに用います。

const [setFn, writing, called, error] = useSetDoc(path, fql, options);

Hooks の戻り値

• setFn: (...args: any[]) => void

  データを書き込むための関数です。

• writing: boolean

  データを書き込んでいるかを表します。

• called: boolean

  setFn が呼び出されたかどうかを表します。

• error: Error

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

Hooks の引数

• path: string

  書き込み対象のドキュメントの Firestore 上のパスです。

• fql: SetFql

  ドキュメントに書き込む内容を宣言的に示すオブジェクトです。 書き込む内容を Hooks を使う時点で確定させるStaticSetFqlを用いたり、 書き込む内容を setFn を呼び出す時点で確定させるDynamicSetFqlを用いることができます.

• optional options: object

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

options の内容

• optional merge: boolean

  書き込み時に、ドキュメントの既存のフィールドを上書きするかを指定します。

• optional mergeFields: string[]

  書き込み時に、ドキュメントのどのフィールドを上書き対象にするかを指定します。

• optional callback: () => void

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

Example

ドキュメントのパスを渡す場合

const fql = {
  fields: {
    country: "Japan",
    name: "Tokyo",
    population: 35676000,
  },
};
const [setTokyo, writing, called, error] = useSetDoc("/cities/Tokyo", fql);

次を実行することでデータが追加されます。

setTokyo();

書き込み結果は次のようになります。

─── cities
    └── Tokyo
        ├── country: "Japan"
        ├── name: "Tokyo"
        └── population: 35676000

コレクションのパスを渡す場合

const fql = {
  fields: {
    country: "Japan",
    name: "Tokyo",
    population: 35676000,
  },
};
const [setTokyo, writing, called, error] = useSetDoc("/cities", fql);

次を実行することでデータが追加されます。

setTokyo();

書き込み結果は次のようになります。

─── cities
    └── kmgPSVMTCbDBUUm4efB1
        ├── country: "Japan"
        ├── name: "Tokyo"
        └── population: 35676000

StaticSetFqlを用いる場合

fql をオブジェクトで指定します。

const fql = {
  fields: {
    country: "Japan",
    name: "Tokyo",
    population: 35676000,
    weather: "sunny",
  },
};
const [setTokyo, writing, called, error] = useSetDoc("/cities/Tokyo", fql);

次を実行することでデータが書き込まれます。

setTokyo();

DynamicSetFqlを用いる場合

fql を関数で指定します。

const fql = (newPopulation, newWeather) => ({
  fields: {
    country: "Japan",
    name: "Tokyo",
    population: newPopulation,
    weather: newWeather,
  },
});
const [setTokyo, writing, called, error] = useSetDoc("/cities/Tokyo", fql);

次を実行することでデータが書き込まれます。

setTokyo(35676000, "sunny");

View でのステータス表示

writingとcalledを組み合わせることで、書き込みに関するステータスを表現することができます。

return (
  <>
    {!called && <div>Before call setFn</div>}
    {writing && <div>Setting...</div>}
    {error !== null && <div>Error</div>}
    {!writing && called && error === null && <div>Completed</div>}
  </>
);