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 サブスクリプションガイド をご覧ください。
このページは役に立ちましたか?
簡単な質問に答えて サイトをさらに改善するのにご協力ください.