useResource$() - 明示的なリアクティビティ
このチュートリアルでは、特定の GitHub 組織のリポジトリのリストを取得したいと思います。 皆さんのために、ファイルの末尾に getRepositories() 関数を追加しました。 皆さんのタスクは、ユーザーが org 入力を更新するたびに getRepositories() 関数を使用してリポジトリのリストを取得することです。
Qwikは、サーバーからデータを取得して表示するのに役立つuseResource$()と<Resource>を提供しています。 データを取得する際、アプリケーションは次の3つの状態のいずれかになります。
pending: データがサーバーから取得されている =>読み込み中...インジケーターを表示します。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$() 関数を使用すると、ストアプロパティを追跡できるため、useResource$() 関数はストアの変更に反応できます。 cleanup 関数を使用すると、前の実行からリソースを解放するために実行する必要があるコードを登録できます。 最後に、useResource$() 関数は、値に解決されるプロミスを返します。
データのレンダリング
<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状態のレンダリングをスキップするなど、わずかに異なる動作をします）。