跳到内容
文档
订阅

订阅

✅

请更新到最新版本（≥ 2.1.0）以使用此 API。

useSWRSubscription

useSWRSubscription 是一个 React 钩子，允许使用 SWR 订阅实时数据源。

useSWRSubscription<Data, Error>(key: Key, subscribe: (key: Key, options: { next: (error?: Error | null, data: Data) => void }) => () => void): { data?: Data, error?: Error }

API

此钩子使用提供的 subscribe 函数订阅实时数据源，并返回收到的最新数据以及遇到的任何错误。钩子会自动更新返回的数据，因为会收到新的事件。

参数

  • key：用于识别正在订阅的数据的唯一键，与 useSWR 键相同。
  • subscribe：订阅实时数据源的函数。它接收以下参数
    • key：与上面相同
    • options：包含以下属性的对象
      • next：接受错误和数据的函数，并使用从实时数据源接收到的最新数据更新状态。

例如

function subscribe(key, { next }) {
  const sub = remote.subscribe(key, (err, data) => next(err, data))
  return () => sub.close()
}

您还可以将更新器函数作为 data 传递给 next，它将接收上一个数据作为第一个参数并返回新的数据。

function subscribe(key, { next }) {
  const sub = remote.subscribe(key, (err, data) => next(err, prev => prev.concat(data)))
  return () => sub.close()
}

返回值

  • state：包含以下属性的对象
    • data：从实时数据源接收到的最新数据。
    • error：如果在订阅实时数据源时发生错误，则为 Error 对象，否则为 undefined。

当收到新数据时，error 将重置为 undefined。

用法

使用 useSWRSubscription 订阅 Firestore 数据源

import useSWRSubscription from 'swr/subscription'
 
function Post({ id }) {
  const { data } = useSWRSubscription(['views', id], ([_, postId], { next }) => {
    const ref = firebase.database().ref('views/' + postId)
    ref.on('value',
      snapshot => next(null, snapshot.data()),
      err => next(err)
    )
    return () => ref.off()
  })
 
  return <span>Your post has {data} views!</span>
}

使用 useSWRSubscription 订阅 WebSocket 数据源

import useSWRSubscription from 'swr/subscription'
 
function App() {
  const { data, error } = useSWRSubscription('ws://...', (key, { next }) => {
    const socket = new WebSocket(key)
    socket.addEventListener('message', (event) => next(null, event.data))
    socket.addEventListener('error', (event) => next(event.error))
    return () => socket.close()
  })
  if (error) return <div>failed to load</div>
  if (!data) return <div>loading...</div>
  return <div>hello {data}!</div>
}

您也可以在 此页 查看 useSWRSubscription 的 TypeScript 示例

去重

useSWRSubscription 会对具有相同键的订阅请求进行去重。如果有多个组件使用相同的键，它们将共享相同的订阅。当使用该键的最后一个组件卸载时，订阅将关闭。

这意味着，如果您有多个组件使用相同的键，它们都将接收相同的数据。并且每个键只订阅一次实时数据源。

分页预取