waitForNone(依存関係)

要求された依存関係の現在の状態に対するLoadableのセットを返します。

依存関係は、タプル配列として提供するか、オブジェクト内の名前付き依存関係として提供できます。

---

function waitForNone(dependencies: Array<RecoilValue<>>):
  RecoilValueReadOnly<UnwrappedArrayOfLoadables>

function waitForNone(dependencies: {[string]: RecoilValue<>}):
  RecoilValueReadOnly<UnwrappedObjectOfLoadables>

---

waitForNone()はwaitForAll()に似ていますが、即座に返され、値ではなく、各依存関係のLoadableを返します。waitForNone()はnoWait()に似ていますが、一度に複数の依存関係を要求できます。

このヘルパーは、部分的なデータを使用して操作するか、別のデータが入手可能になったときに徐々にUIを更新するのに役立ちます。

段階的なロードの例

この例では、複数のレイヤーがあるチャートを描画します。各レイヤーには、可能性としてデータのクエリに多額の費用がかかります。保留中の各レイヤーに対してスピナーを使用してすぐにチャートをレンダリングし、そのレイヤーのデータが入手可能になると、各新しいレイヤーを追加するようにチャートを更新します。いずれかのレイヤーのクエリにエラーが発生した場合、そのレイヤーにのみエラーメッセージが表示され、残りのレイヤーはレンダリングを続行します。

function MyChart({layerQueries}: {layerQueries: Array<RecoilValue<Layer>>}) {
  const layerLoadables = useRecoilValue(waitForNone(layerQueries));

  return (
    <Chart>
      {layerLoadables.map((layerLoadable, i) => {
        switch (layerLoadable.state) {
          case 'hasValue':
            return <Layer key={i} data={layerLoadable.contents} />;
          case 'hasError':
            return <LayerErrorBadge key={i} error={layerLoadable.contents} />;
          case 'loading':
            return <LayerWithSpinner key={i} />;
        }
      })}
    </Chart>
  );
}