メインコンテンツにスキップ
バージョン: v18.0.0

クライアント専用データ

クライアント専用データ (クライアントスキーマ拡張)​

Relayは、クライアント側（つまりブラウザ内）でGraphQLスキーマを拡張する機能を、クライアントスキーマ拡張を介して提供します。これにより、クライアントでのみ作成、読み取り、更新する必要があるデータをモデル化できます。これは、サーバーから取得したデータに少量の情報を追加したり、Relayによって保存および管理されるクライアント固有の状態を完全にモデル化したりするのに役立ちます。

クライアントスキーマ拡張を使用すると、スキーマ上の既存の型を変更（例：型に新しいフィールドを追加）したり、クライアントにのみ存在するまったく新しい型を作成したりできます。

既存の型の拡張​

既存の型を拡張するには、適切なソース (--src) ディレクトリに .graphql ファイルを追加します。

extend type Comment {
  is_new_comment: Boolean
}
  • この例では、extend キーワードを使用して既存の型を拡張し、既存の Comment 型に新しいフィールド is_new_comment を追加しています。このフィールドは、コンポーネントで読み取ることができ、必要に応じて通常のRelay APIを使用して更新できます。このフィールドを使用して、コメントが新しい場合に異なる視覚的な処理をレンダリングしたり、新しいコメントを作成するときに設定したりすることを想像できるかもしれません。

新しい型の追加​

html/js/relay/schema/ 内の .graphql ファイルに定義することで、通常のGraphQL構文と同じ構文を使用して型を定義できます。

# You can define more than one type in a single file
enum FetchStatus {
  FETCHED
  PENDING
  ERRORED
}


type FetchState {
  # You can reuse client types to define other types
  status: FetchStatus

  # You can also reference regular server types
  started_by: User!
}

extend type Item {
  # You can extend server types with client-only types
  fetch_state: FetchState
}
  • この例では、2つの新しいクライアント専用型、enum と通常の type を定義しています。これらは通常どおり自身を参照でき、通常のサーバー定義型を参照できることに注意してください。また、サーバ型を拡張し、クライアント専用の型のフィールドを追加できることにも注意してください。
  • 前述のように、Relay APIを介してこのデータを通常どおり読み取ることと更新することができます。

クライアント専用データの読み取り​

クライアント専用データは、フラグメントまたはクエリ内で通常どおり選択することで読み取ることができます。

const data = *useFragment*(
  graphql`
    fragment CommentComponent_comment on Comment {

      # We can select client-only fields as we would any other field
      is_new_comment

      body {
        text
      }
    }
  `,
  props.user,
);

クライアント専用データの更新​

クライアント専用データを更新するには、ミューテーションまたはサブスクリプションアップデーター内で通常どおり行うか、ローカル更新を行うためのプリミティブを使用してストアに更新することができます。

このページは役に立ちましたか？

いくつかの簡単な質問に答えることで、 サイトの改善にご協力ください。.