サブスクリプション
✅
この API を使用するには、最新バージョン（≥ 2.1.0）にアップデートしてください。
useSWRSubscription
useSWRSubscription は、SWR を使用してリアルタイムデータソースを購読できる React フックです。
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()
}next に data としてアップデーター関数を渡すこともできます。この関数は、最初の引数として以前のデータを受け取り、新しいデータを返します。
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 は、同じキーを持つサブスクリプションリクエストを重複排除します。同じキーを使用する複数のコンポーネントがある場合、それらは同じサブスクリプションを共有します。キーを使用する最後のコンポーネントがアンマウントされると、サブスクリプションは閉じられます。
これは、同じキーを使用する複数のコンポーネントがある場合、それらはすべて同じデータを受信することを意味します。また、キーごとにリアルタイムデータソースへのサブスクリプションは 1 つだけです。