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

Relayリゾルバー入門

Relayリゾルバーは、クライアントでのみ既知の値をRelayのGraphQLグラフに追加できる、実験的なRelay機能です。これにより、サーバーの状態をモデル化するのと同じ方法でクライアントの状態をスキーマ化し、Relayの使い慣れたデータフェッチAPIを使用してその状態にアクセスできます。クライアントの状態には、クライアントサイドのデータストアからのデータだけでなく、グラフ内の他の値から計算された派生データも含まれます。

派生状態とクライアント状態をグラフでモデル化することにより、Relayは製品開発者向けの統一されたデータアクセスAPIを提供できます。製品エンジニアがアクセスしたいグローバルに関連するすべてのデータは、同じ構造化されたGraphQLスキーマから発見し、効率的に取得できます。さらに、リゾルバーは、多くのランタイム上の利点を提供します。

  • ガベージコレクションによるグローバルなメモ化
  • リゾルバーの効率的なリアクティブ再計算
  • データが変更されたときの効率的なUI更新

リゾルバーは、クライアントコードで定義され、サーバーのスキーマにステッチされる追加のスキーマ型とフィールドと考えることができます。サーバー上のフィールドをモデル化するリゾルバーメソッド/関数を定義するのと同じように、Relayリゾルバーはリゾルバー関数を使用して定義されます。

Relayリゾルバーのユースケース​

Relayリゾルバーは、さまざまな種類のデータをモデル化するのに役立ちます。以下に、Relayリゾルバーを使用してスキーマ化し、製品コードで使用できるようにするデータの種類の例をいくつか示します。

  • ユーザー作成データ - 複雑なフォーム状態や、特定のコンポーネントツリーよりも長く存続する必要があるその他のデータをモデル化できます。
  • クライアントサイドデータベース - IndexDB、localStorage、またはSQLiteなどの永続データストア
  • サードパーティAPI - クライアントが直接サードパーティAPIからフェッチするデータ。たとえば、サードパーティの検索プロバイダーからの検索結果など
  • 暗号化されたデータ - サーバーでは不透明であり、サーバーのスキーマでモデル化できないエンドツーエンドで暗号化されたデータ
  • レガシーデータストア - RelayとGraphQLの採用中に、Reduxなどの既存のデータレイヤーからのデータをグラフで公開して、アプリの移行済み部分と未移行部分が常に同期を維持できるようにすることができます。

リゾルバーの定義​

危険

リゾルバーはまだ実験的な機能であるため、Relayでリゾルバーの使用を開始する前に、有効にする必要があります。手順については、「Relayリゾルバーの有効化」を参照してください。

リゾルバーは、特別な@RelayResolver docblockでアノテーションが付けられたエクスポートされた関数を使用して定義されます。これらのdocblockはRelayコンパイラーに表示され、コンパイラーがクライアントスキーマを構築し、Relayの生成された成果物で関数を自動的にインポートできるようにします。リゾルバー関数は、Relayプロジェクトの任意のファイルで定義できますが、コードベース内のどこに配置するかについていくつかの規約を定義することをお勧めします。

最も単純なリゾルバーは、既存の型を拡張し、入力はありません。

/**
 * @RelayResolver Query.greeting: String
 */
export function greeting(): string {
  return "Hello World";
}

リゾルバーの使用は、サーバーフィールドの使用と同一です。製品コードは、読み取っているフィールドの種類を知る必要はありません。

import {useLazyLoadQuery, graphql} from 'react-relay';
import {useClientQuery, graphql} from 'react-relay';

function Greeting() {
  const data = useClientQuery(graphql`
    query GreetingQuery {
      greeting
    }`, {});
  return <p>{data.greeting}</p>;
}
注意

クエリにクライアント定義のフィールドのみが含まれている場合は、データをフェッチするために別のクエリAPIを使用する必要があります。この例では、useLazyLoadQueryまたはusePreloadedQueryの代わりにuseClientQueryを使用していることに注意してください。クエリにサーバーデータも含まれている場合は、標準のuseLazyLoadQueryまたはusePreloadedQuery APIを使用できます。

この要件は、Relayの将来のバージョンで削除する予定です。