状態変更時のリソース取得

このチュートリアルでは、指定されたGitHub組織のリポジトリリストを取得します。支援のために、ファイルの最後に `getRepositories()` 関数を追加しました。あなたのタスクは、ユーザーが `org` 入力を更新するたびに、`getRepositories()` 関数を使用してリポジトリのリストを取得することです。

Qwikは、サーバーからのデータの取得と表示を支援するために、`useResource$()` と `<Resource>` を提供しています。データを取得する場合、アプリケーションは次の3つの状態のいずれかになります。

• `pending`：サーバーからデータを取得中 => `loading...` インジケーターを表示します。
• `resolved`：サーバーからデータの取得に成功しました => データを表示します。
• `rejected`：エラーが発生したため、サーバーからデータを取得できませんでした => エラーを表示します。

`useResource$()` 関数を使用して、サーバーからデータを取得する方法を設定します。 `<Resource>` を使用してデータを表示します。

データの取得

`useResource$()` を使用して、サーバーからデータを取得する方法を設定します。

  const reposResource = useResource$<string[]>(({ track, cleanup }) => {
    // We need a way to re-run fetching data whenever the `github.org` changes.
    // Use `track` to trigger re-running of this data fetching function.
    track(() => github.org);
 
    // A good practice is to use `AbortController` to abort the fetching of data if
    // new request comes in. We create a new `AbortController` and register a `cleanup`
    // function which is called when this function re-runs.
    const controller = new AbortController();
    cleanup(() => controller.abort());
 
    // Fetch the data and return the promises.
    return getRepositories(github.org, controller);
  });

`useResource$()` 関数は、QwikによってシリアライズできるPromiseのようなオブジェクトである `ResourceReturn` オブジェクトを返します。 `useResource$()` 関数を使用すると、ストアのプロパティを `track` できるため、`useResource$()` 関数はストアの変更に対してリアクティブになることができます。 `cleanup` 関数を使用すると、以前の実行からリソースを解放するために実行する必要があるコードを登録できます。最後に、`useResource$()` 関数は、値に解決されるpromiseを返します。

データのレンダリング

`<Resource>` を使用して、`useResource$()` 関数のデータを表示します。 `<Resource>` を使用すると、リソースが `pending`、`resolved`、または `rejected` のいずれであるかによって、異なるコンテンツをレンダリングできます。

サーバーでは、`<Resource>` は `loading` 状態をレンダリングしません。代わりに、リソースが解決されるまでレンダリングを一時停止し、常に `resolved` または `rejected` としてレンダリングします。（クライアントでは、`<Resource>` は `pending` を含むすべての状態をレンダリングします。）

<Resource
  value={resourceToRender}
  onPending={() => <div>Loading...</div>}
  onRejected={(reason) => <div>Error: {reason}</div>}
  onResolved={(data) => <div>{data}</div>}
/>

SSR vs クライアント

同じコードがサーバーとクライアントの両方でレンダリングできることに注意してください（サーバーでは `pending` 状態のレンダリングをスキップするというわずかに異なる動作があります）。

次へ基本コンポーネント