ランタイム関数

このページでは、Relayリゾルバーに関連付けられたランタイム関数について説明します。Relayリゾルバーの概要とその考え方については、Relayリゾルバーガイドを参照してください。

LiveResolverStore

Relayリゾルバーを使用するには、relay-runtime/lib/store/experimental-live-resolvers/LiveResolverStoreからインポートされた、実験的なRelayストアの実装であるLiveResolverStoreを使用する必要があります。これはデフォルトのRelayストアと同じように動作しますが、Relayリゾルバーもサポートします。

これは、追加のユーザー向けメソッドbatchLiveStateUpdates()を公開します。このメソッドの使用方法の詳細については、ライブフィールドを参照してください。

readFragment()

派生リゾルバーフィールドは、グラフ内の他のデータから派生したデータをモデル化します。派生フィールドが依存するデータを読み取るには、relay-runtimeからエクスポートされたreadFragment()関数を使用する必要があります。この関数は、GraphQLフラグメントとフラグメントキーを受け取り、フラグメントのデータを返します。

危険

readFragment()はRelayリゾルバー内でのみ使用できます。他のコンテキストで使用すると、エラーがスローされます。

import {readFragment} from "relay-runtime";

/**
 * @RelayResolver User.fullName: String
 * @rootFragment UserFullNameFragment
 */
export function fullName(key: UserFullNameFragment$key): string {
  const user = readFragment(graphql`
    fragment UserFullNameFragment on User {
      firstName
      lastName
    }
  `, key);
  return `${user.firstName} ${user.lastName}`;
}

Relayは、フラグメント内のデータが変更されるたびに、フィールドリゾルバーが再計算されるようにします。

詳細については、派生フィールドガイドを参照してください。

suspenseSentinel()

ライブリゾルバーは、時間とともに変化する可能性のあるクライアント状態をモデル化します。フィールドのライフサイクル中に、読み込まれるデータが保留状態（たとえば、APIからデータをフェッチしている場合など）の場合、リゾルバーはsuspenseSentinel()を返して、データがまだ利用可能ではないことを示す場合があります。

Relayは、データが利用可能になったときに、LiveStateValueがサブスクライブコールバックを呼び出してRelayに通知することを期待しています。

import {suspenseSentinel} from 'relay-runtime';

/**
 * @RelayResolver Query.myIp: String
 * @live
 */
export function myIp(): LiveState<string> {
  return {
    read: () => {
      const state = store.getState();
      const ipLoadObject = state.ip;
      if (ipLoadObject.status === "LOADING") {
        return suspenseSentinel();
      }
      return state.ip;
    },
    subscribe: (callback) => {
      return store.subscribe(callback);
    },
  };
}

詳細については、ライブフィールドガイドを参照してください。

useClientQuery()

クエリにクライアントフィールドのみが含まれている場合、usePreloadedQueryやuseLazyLoadQueryのようなフックでは現在使用できません。これらのフックは両方ともネットワークリクエストを発行する必要があることを前提としているためです。これらのAPIをFlowで使用しようとすると、型エラーが発生します。

代わりに、クライアント専用のクエリには、useClientQueryフックを使用できます。

import {useClientQuery} from 'react-relay';

export function MyComponent() {
  const data = useClientQuery(graphql`
    query MyQuery {
      myIp
    }
  `);
  return <div>{data.myIp}</div>;
}