跳至主要内容
版本: v18.0.0

useSubscription

useSubscription​

用于订阅和取消订阅订阅的 Hook。

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: [可选] 数字。以毫秒为单位，通过以指定的时间间隔轮询来使查询进行实时更新。（此值将传递给 setTimeout）。
    • liveConfigId: [可选] 字符串。通过调用 GraphQLLiveQuery 来使查询进行实时更新；它表示执行实时查询时网关的配置。
    • metadata: [可选] 对象。用户提供的元数据。
    • transactionId: [可选] 字符串。用户提供的值，旨在用作执行操作的给定实例的唯一 ID。

类型 SelectorStoreUpdater​

  • 具有签名 (store: RecordSourceSelectorProxy, data) => void 的函数
  • 此接口允许你命令式地直接写入和读取数据到 Relay 存储中。这意味着你可以完全控制如何根据订阅有效负载更新存储：你可以创建全新的记录，或者更新或删除现有记录。有关读取和写入 Relay 存储的完整 API，请参见 此处。

行为​

  • 这只是围绕 requestSubscription API 的一个薄包装器。它将
    • 在组件使用给定的配置装载时订阅
    • 在组件卸载时取消订阅
    • 如果环境、配置或 requestSubscriptionFn 更改，则取消订阅并使用新值重新订阅。
  • 如果你需要做更复杂的事情，例如命令式地请求订阅，请直接使用 requestSubscription API。
  • 有关如何使用订阅的更详细说明，请参见 GraphQL 订阅指南。