`@osdk/react` でアプリケーションを構築する

@osdk/react ライブラリは、オントロジーソフトウェア開発キット（オントロジー SDK）を React コンポーネントのライフサイクルに接続します。型付きフックと共有キャッシュを提供するため、リクエストとその状態を個別に管理することなく、オントロジーのデータを読み込んで更新できます。

オントロジー SDK を使用して React アプリケーションを構築する際は、常に @osdk/react を使用することを推奨します。オントロジーのデータを扱うための、より宣言的で保守しやすい方法を提供します。

機能

@osdk/react では、次のことができます。

型付き React フックを使用して、オブジェクト、オブジェクトセット、リンク、集計をクエリします。
楽観的更新を含め、アクションを適用して検証します。
オントロジー関数を呼び出し、その依存関係を追跡します。
正規化され、キャッシュされたオブジェクトをコンポーネント間で共有します。
アクションの実行後に、影響を受けたキャッシュ内のオブジェクトを自動的に同期します。

例

次のコンポーネントは、生成されたオントロジー SDK パッケージから未完了の Todo オブジェクトを読み込みます。

Copied!1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
import { Todo } from "@my/osdk";
import { useOsdkObjects } from "@osdk/react";

function TodoList() {
  const { data, error, isLoading } = useOsdkObjects(Todo, {
    orderBy: { createdAt: "desc" },
    where: { isComplete: false },
  });

  if (data == null && isLoading) {
    return <div>Loading...</div>;
  }

  if (error) {
    return <div>Error: {error.message}</div>;
  }

  if (data == null) {
    return <div>No todos found</div>;
  }

  return (
    <div>
      {data.map(todo => <div key={todo.$primaryKey}>{todo.title}</div>)}
    </div>
  );
}

インストール、プロバイダーのセットアップ、フックのオプション、その他の例については、オントロジー SDK の React ドキュメント ↗を参照してください。

@osdk/react でアプリケーションを構築する

機能

例

`@osdk/react` でアプリケーションを構築する