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

useSubscription

useSubscription

サブスクリプションの登録と登録解除に使用されるフックです。

import {graphql, useSubscription} from 'react-relay';
import {useMemo} from 'react';

const subscription = graphql`
subscription UserDataSubscription($input: InputData!) {
# ...
}
`;

function UserComponent({ id }) {
// IMPORTANT: your config should be memoized.
// Otherwise, useSubscription will re-render too frequently.
const config = useMemo(() => ({
variables: {id},
subscription,
}), [id, subscription]);

useSubscription(config);

return (/* ... */);
}

引数

  • config: GraphQLSubscriptionConfigタイプのrequestSubscriptionに渡される設定
  • requestSubscriptionFn: ?<TSubscriptionPayload>(IEnvironment, GraphQLSubscriptionConfig<TSubscriptionPayload>) => Disposable。署名がrequestSubscriptionと同じオプション関数です。代わりに呼び出されます。デフォルトはrequestSubscriptionです。

GraphQLSubscriptionConfig<TSubscriptionPayload>

  • 次のフィールドを持つオブジェクト
    • cacheConfig: [オプション] CacheConfig
    • subscription: GraphQLTaggedNode. graphqlテンプレートリテラルを使用して指定されたGraphQLサブスクリプション
    • variables: サブスクリプションに渡す変数
    • onCompleted: [オプション] () => void. サブスクリプションが確立されたときに実行されるオプションのコールバック
    • onError: [オプション] (Error) => {}. エラーが発生したときに実行されるオプションのコールバック
    • onNext: [オプション] (TSubscriptionPayload) => {}. 新しいデータを受信したときに実行されるオプションのコールバック
    • updater: [オプション] SelectorStoreUpdater.

CacheConfig

  • 次のフィールドを持つオブジェクト
    • force: [オプション] ブール値。 trueの場合、設定された応答キャッシュの状態に関係なく、クエリが必ず発行されます。
    • poll: [Optional] 数値。 ミリ秒単位で指定された間隔でポーリングすることにより、クエリをライブ更新します。 (この値はsetTimeoutに渡されます)。
    • liveConfigId: [オプション] 文字列。GraphQLLiveQuery の呼び出しによるクエリをライブ更新させる。ライブクエリの完了時に、ゲートウェイの設定を表す。
    • metadata: [オプション] オブジェクト。ユーザー提供のメタデータ。
    • transactionId: [オプション] 文字列。ユーザー提供の値。オペレーションを実行する特定のインスタンスの固有 ID として使用することを目的としている。

タイプ SelectorStoreUpdater

  • 署名 (store: RecordSourceSelectorProxy, data) => void の関数
  • このインターフェイスを使用すると、Relay ストアに対して明示的にデータを直接書き込み、読み出しを行うことができます。つまり、サブスクリプションのペイロードへの応答としてストアを更新する方法を完全に制御できます。完全に新しいレコードを作成することも、既存のレコードを更新または削除することもできます。Relay ストアに対する読み取りおよび書き込みの完全な API は こちら にあります。

動作

  • これは requestSubscription API の薄いラッパーにすぎません。それは
    • コンポーネントが所定の設定でマウントされるとサブスクライブする
    • コンポーネントがアンマウントされると購読を解除する
    • 環境、構成、または requestSubscriptionFn が変更された場合は、購読を解除して新しい値で再購読する。
  • サブスクリプションの明示的なリクエストなど、より複雑なことを行う必要がある場合は、requestSubscription API を直接使用してください。
  • サブスクリプションの使用方法の詳細については、GraphQL サブスクリプションガイド をご覧ください。

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

簡単な質問に答えて サイトをさらに改善するのにご協力ください.