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 會使用相同的鍵來重複資料刪除訂閱請求。如果有使用相同鍵的多個元件，它們將共用相同的訂閱。當使用該鍵的最後一個元件卸載時，訂閱將會關閉。

這表示如果您有多個元件使用相同的鍵，它們都將接收相同的資料。並且每個鍵只有一個對即時資料來源的訂閱。

分頁預先提取

訂閱

`useSWRSubscription`

API

參數

回傳值

用法

重複資料刪除