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 訂閱指南。

---

這個頁面實用嗎？

透過回答幾個簡單的問題，幫助我們讓網站變得更好 回答幾個快速問題.